Ajax.BeginForm()知多少

 

在ASP.NET MVC中，Ajax.BeginForm扮演着異步提交的重要角色。其中就有五個重載方法，可是在實際應用中，你未必使用的駕輕就熟，今天咱們就從主要的參數來一探究竟。

1、actionName

用於指定請求地址的Action名稱。

2、controllerName

用於指定請求地址的Controller名稱。

3、routeValues

用來傳遞參數，支持兩種數據類型（兩種傳參方式）：

• object類型能夠在使用時直接以匿名類方式聲明，使用很是方便
  舉例：new { id = 1, type = 1 }
• RouteValueDictionary類型實現了IDictionary<string, object="" style="margin: 0px; padding: 0px;">接口，所以在使用時能夠用鍵值對方式聲明
  舉例：new RouteValueDictionary{ {"id", 1}, {"type", 1} }

4、htmlAttributes

用於指定生成form表單的html屬性。也支持兩種賦值方式：

• object類型能夠在使用時直接以匿名類方式聲明，使用很是方便
  舉例：new{id = "frm", @class = "cls" }因爲class是C#中的關鍵字，所以須要在前面加@符號

• IDictionary<string, object="" style="margin: 0px; padding: 0px;">類型使用靈活，能夠在一個地方聲明，多個地方調用，或修改後使用，舉例：

  Dictionary<string, object> htmlAttr = new Dictionary<string, object>
  {
   {"id","frm"},
   {"class", "cls"}
  };

  生成的代碼：
  <form action="/Home/Index/1?type=1" class="cls" data-ajax="true" id="frm" method="post">

5、ajaxOptions

看到這麼多的參數，是否是一臉懵逼，且聽我一一講解。

1. Confirm，就是在提交時會彈出一個確認框，通常不經常使用。
   new AjaxOption(){Confirm:"確認提交？"}
2. HttpMethod，就是設置請求類型，默認爲post。
   new AjaxOption(){HttpMethod = "GET"}
3. UpdateTargetId，就是設置請求返回的數據/元素更新到哪一個Dom元素中。
4. InsertionMode，設置返回結果更新指定Dom元素的方式，默認爲Replace。
5. LoadingElementId，LoadingElementDuration設置提交實際的加載動畫效果。
6. Url，用來當未指定Action，Controller時，直接在AjaxOption中指定請求的Url。@using (Html.BeginFrom( new AjaxOptions(){Url= '/Tasks/Create'})){ }
7. AllowCache，標記是否使用緩存。
8. OnBegin, OnComplete, OnFailure, OnSuccess，是用於指定回調的js函數。

下面我將具體講解第5和第8個的具體用法。

設置Form提交動畫加載效果

• 定義加載動態元素，並設置css樣式：div#loading { display: none; }

  <div id="loading"> ![](~/Content/Images/ui-loader-white-16x16.gif)</div>

• 在form中指定LoadingElementId

  @using (Ajax.BeginForm(MVC.Account.Login(), 
  new AjaxOptions { 
  OnSuccess = "onLoginSuccess",
  LoadingElementId = "loading", 
  OnBegin = "onLoginBegin" }, new { @id = "loginForm" })){ }

• 定義js函數，隱藏加載動畫。

  <script type="text/javascript"> function onLoginBegin() { // Disable the button and hide the other image here  // or you can hide the whole div like below  $('#logbtn').hide(); } </script>

設置JS回調函數

但其實這幾個js方法你們未必用得好。先來看看常規用法，其中指定的js函數均未傳參。

@using (Ajax.BeginForm("Create", "Tasks", new AjaxOptions()
{
    UpdateTargetId = "taskList",
    OnBegin = "onBegin",
    OnSuccess = "onSuccess",
    OnFailure = "onFailure",
    OnComplete = "onComplete"
}))
{
}
//Js函數
function onSuccess() {
    alert('Success!');
}

若是我想當請求失敗時，彈出返回的錯誤提示並清空form表單怎麼辦呢？

@using (Ajax.BeginForm("Create", "Tasks", new AjaxOptions()
{
    UpdateTargetId = "taskList",
    OnFailure = "onFailure("#formid")",
}))
{
}
//Js函數
function onFailure(id) {
    alert("Somthing is wrong!");    //alert彈出錯誤提示信息。
    var $form = $(id);
    $form.reset();//清空form表單。 
}

這樣實現並無拿到返回的錯誤數據，那到底如何傳參呢？
通過參考jquery.unobtrusive-ajax.js 源碼，終於弄清，默認的傳參是怎樣的。

OnBegin – xhr
OnComplete – xhr, status
OnSuccess – data, status, xhr
OnFailure – xhr, status, error

也就是說，默認未指定參數的js函數實際等同於：

@using (Ajax.BeginForm("Create", "Tasks", new AjaxOptions() { UpdateTargetId = "taskList", OnBegin = "onBegin(xhr)", OnSuccess = "onSuccess(data, status, xhr)", OnFailure = "onFailure(xhr, status, error)", OnComplete = "onComplete(xhr, status)" })) { }

看到這裏，咱們再來看看上例【若是我想當請求失敗時，彈出返回的錯誤提示並清空form表單怎麼辦呢？】

@using (Ajax.BeginForm("Create", "Tasks", new AjaxOptions()
{
    UpdateTargetId = "taskList",
    OnFailure = "onFailure(xhr, status, error,"#formid")",
}))
{
}
//Js函數
function onFailure(xhr, status, error,id) {
    alert(error);    //alert彈出錯誤提示信息。
    var $form = $(id);
    $form.reset();//清空form表單。 
}

經過默認的參數，成功拿到錯誤信息，而且可傳遞自定義參數。

讀到這裏，以爲不錯，就給個推薦吧！

簡書筆記

 

https://www.cnblogs.com/sheng-jie/p/6305385.html

Ajax.BeginForm()知多少