Ajax.BeginForm、Html.BeginForm的使用
一、Html.BeginForm多載方法
針對幾個重要方法實作範例
1、BeginForm(HtmlHelper)
@{ Html.BeginForm(); }
<input type="text" id="userName" class="userName" />
<input type="submit" />
@{ Html.EndForm(); }
HTML原始碼為
<form action="/Home/Index" method="post"> <input type="text" id="userName" class="userName"> <input type="submit"> </form>
2、BeginForm(HtmlHelper, Object routeValues)
@{ Html.BeginForm(new { id = 1 }); }
<input type="text" id="userName" class="userName" />
<input type="submit" />
@{ Html.EndForm(); }
HTML原始碼為
<form action="/Home/Index/1" method="post"> <input type="text" id="userName" class="userName"> <input type="submit"> </form>
3、BeginForm(HtmlHelper, String actionName, String controllerName, FormMethod method)
@{ Html.BeginForm("Index", "Home", FormMethod.Post); }
<input type="text" id="userName" class="userName" />
<input type="submit" />
@{ Html.EndForm(); }
HTML原始碼為
<form action="/" method="post"> <input type="text" id="userName" class="userName"> <input type="submit"> </form>
4、BeginForm(HtmlHelper, String actionName, String controllerName, FormMethod method, IDictionary<String, Object> htmlAttributes)
@using System.Collections.Generic;
@{
ViewBag.Title = "Home Page";
Dictionary<string, object> Dictionary = new Dictionary<string, object>() {
{ "id", "myid" },
{ "class","myclass"}
};
}
@{ Html.BeginForm("Index", "Home", FormMethod.Post, Dictionary); }
<input type="text" id="userName" class="userName" />
<input type="submit" />
@{ Html.EndForm(); }
HTML原始碼為
<form action="/" class="myclass" id="myid" method="post"> <input type="text" id="userName" class="userName"> <input type="submit"> </form>
二、Ajax.BeginForm多載方法
針對幾個重要方法實作範例
1、BeginForm(AjaxHelper, AjaxOptions ajaxOptions)
@{
ViewBag.Title = "Home Page";
AjaxOptions AjaxOptions = new AjaxOptions()
{
UpdateTargetId = "comment",
HttpMethod = "post",
InsertionMode = InsertionMode.InsertAfter
};
}
@{ Ajax.BeginForm(AjaxOptions); }
<input type="text" id="userName" class="userName" />
<input type="submit" />
@{ Html.EndForm(); }
HTML原始碼為
<form action="/Home/Index" data-ajax="true" data-ajax-method="post" data-ajax-mode="after" data-ajax-update="#comment" id="form0" method="post"> <input type="text" id="userName" class="userName"> <input type="submit"> </form>
三、AjaxOptions 類別
| 名稱 | 說明 |
| Confirm | 取得或設定在送出要求之前，要在確認視窗中顯示的訊息。 |
| HttpMethod | 取得或設定 HTTP 要求方法 ("Get" 或 "Post")。 |
| InsertionMode | 取得或設定模式，這個模式會指定如何將回應插入至目標 DOM 項目中。 |
| LoadingElementDuration | 取得或設定值 (以毫秒為單位)，在顯示或隱藏正載入的項目時，這個值會控制動畫的持續時間。 |
| LoadingElementId | 取得或設定載入 Ajax 函式時所顯示之 HTML 項目的 id 屬性。 |
| OnBegin | 取得或設定更新頁面之前所要立即呼叫之 JavaScript 函式的名稱。 |
| OnComplete | 取得或設定在已執行個體化回應資料但尚未更新頁面之前所要呼叫的 JavaScript 函式。 |
| OnFailure | 取得或設定頁面更新失敗時所要呼叫的 JavaScript 函式。 |
| OnSuccess | 取得或設定成功更新頁面之後所要呼叫的 JavaScript 函式。 |
| UpdateTargetId | 使用來自伺服器的回應取得或設定要更新之 DOM 項目的 ID。 |
| Url | 取得或設定要對其提出要求的 URL。 |
四、Ajax.BeginForm完整範例
HomeControler.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Ajax_Helper.Controllers
{
public class HomeController : Controller
{
static List<string> all_message = new List<string>();
public ActionResult Index()
{
return View(all_message);
}
[HttpPost]
public ActionResult _Message(string message)
{
all_message.Add(message);
if (Request.IsAjaxRequest())
{
ViewBag.comment = message;
return PartialView();
}
return View("Index", all_message);
}
}
}
Index.cshtml
@{
ViewBag.Title = "Home Page";
}
@model IEnumerable<string>
<p>using ajax</p>
<div id="comment">
<ul>
@foreach (var item in Model)
{
<li>@item</li>
}
</ul>
</div>
@using (Ajax.BeginForm("_Message",
new AjaxOptions
{
UpdateTargetId = "comment",
HttpMethod = "post",
InsertionMode = InsertionMode.InsertAfter
}))
{
<textarea name="message">aaa</textarea>
<input type="submit" name="name" value="送出" />
}
@section scripts{
<script src="~/Scripts/jquery.unobtrusive-ajax.js">
</script>
}
_Message.cshtml
<li>@ViewBag.comment</li>
五、AntiForgeryToken
使用BeginForm通常會配合AntiForgeryToken來作參數加密動作，如下範例
View為
@using (Html.BeginForm()) { @Html.AntiForgeryToken() <div class="form-actions no-color"> <input type="submit" value="Delete" class="btn btn-default" /> </div> }
Controller為
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApplication1.ViewModels.Home;
using WebApplication1.Models;
namespace WebApplication1.Controllers
{
public class HomeController : Controller
{
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Index(string title, DateTime date)
{
return View();
}
}
}
六、表單提交
最基本的表單提交由View傳到Controller關鍵在於name或routeValues
如下範例
View為
@{ Html.BeginForm(new { id = 1 }); } <input type="text" id="user" name="userName" /> <input type="submit" /> @{ Html.EndForm(); }
Controller為
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace WebApplication1.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(int id, string userName)
{
return View();
}
}
}
七、@using (){}
上面也有範例，使用@using (){}可以讓你省下還要在結尾加上Html.EndForm的時間。
@using (Html.BeginForm())
{
@Html.TextBox("Username")
<input type="submit" />
}