MVC Ajax Helpers

標籤：.text   http請求   提示   javascrip   介紹   inf   擷取   沒有   color   

在MVC中要實現Ajax有很多的方式，有微軟自己的MicrosoftAjax，也可以用JQuery的AJax來實現，如果對其他的JavaScript架構熟悉，還可以採用其他的實現方案，比如說Prototype等等。

以下是微軟自己的實現方案。

需要積極式載入的JavaScript檔案：

1  <script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>2  <script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>

在MVC中已經提供了下面幾個現成的HTML Hepler：

• Ajax.ActionLink()
• Ajax.BeginForm()
• Ajax.RouteLink()
• Ajax.BeginRouteForm()

Ajax.ActionLink

使用ActionLink發送非同步請求的方法：

View

1 <div id="myPnl" style="width: 300px; height: 30px; border: 1px dotted silver;">2 </div>3 @Ajax.ActionLink("Click Me", "GetTime", new AjaxOptions { UpdateTargetId = "myPnl" })

Controller

1 public ActionResult GetTime()2 {3     return Content(DateTime.Now.ToString());4 }

以上樣本使用ActionLink超連結發送請求到GetTime，返回一個ContentResult，通過AjaxOptions中的UpdateTargetId屬性指定了需要更新的頁面元素。

AjaxOptions中還有其他可以指定的屬性：

Confirm	等效於javascript中的return confirm(msg)，在點擊該連結時先提示需要確認的資訊。
HttpMethod	指定使用Get或者是Post方式發送Http請求
InsertMode	指定使用哪一種方式在指定的UpdateTargetId元素更新資料，可以有三種方式： "InsertAfter", "InsertBefore", or "Replace" 。預設為：Replace
LoadingElementDuration	Loading元素顯示的時間
LoadingElementId	可以指定在Http請求期間顯示的Loading元素
OnBegin	在Http請求之前執行的javascript方法
OnComplete	在Http請求結束時執行的方法
OnFailure	在Http請求失敗時執行的方法
OnSuccess	在Http請求成功時執行的方法
UpdateTargetId	Http請求更新的頁面元素
Url	Http請求的Url

關於AjaxOptions中各方法的使用方法，在之前關於ActionResult的介紹的文章中有相關的列子：

JsonResult

注意點

• OnComplete和OnSuccess的區別：OnComplete是擷取了Http請求時引發的，此時頁面還沒有進行更新，OnSuccess是在頁面已經更新後引發的。
• ActionLink中的actionName和AjaxOption中的Url的關係：兩者分別產生的HTML如下，但是執行的結果相同，希望有高手能解釋下這兩者有無區別。

1 <a href="/Home/GetTime" data-ajax-update="#myPnl" data-ajax-mode="replace" data-ajax="true">Click Me</a> 2 <a href="/" data-ajax-url="Home/GetTime" data-ajax-update="#myPnl" data-ajax-mode="replace" data-ajax="true">Click Me</a>

Ajax.BeginForm

該Html Hepler可以實現使用Ajax方式提交Form，在指定的頁面元素中顯示提交的結果。

View

 1 @model MvcAjax.Models.UserModel 2 @{ 3     ViewBag.Title = "AjaxForm"; 4 } 5  6 <div id="myPnl" style="width: 300px; height: 30px; border: 1px dotted silver;"> 7 </div> 8  9 @using (Ajax.BeginForm("SaveUser", new AjaxOptions { UpdateTargetId = "myPnl" }))10 {11     <table>12         <tr>13             <td>14                 @Html.LabelFor(m => m.UserName)15             </td>16             <td>17                 @Html.TextBoxFor(m => m.UserName)18             </td>19         </tr>20         <tr>21             <td>22                 @Html.LabelFor(m => m.Email)23             </td>24             <td>25                 @Html.TextBoxFor(m => m.Email)26             </td>27         </tr>28         <tr>29             <td>30                 @Html.LabelFor(m => m.Desc)31             </td>32             <td>33                 @Html.TextBoxFor(m => m.Desc)34             </td>35         </tr>36         <tr>37             <td colspan="2">38                 <input type="submit" value="Submit" />39             </td>40         </tr>41     </table>42 } 

Model

 1 using System.ComponentModel.DataAnnotations; 2  3 namespace MvcAjax.Models 4 { 5     public class UserModel 6     { 7         [Display(Name = "Username")] 8         public string UserName { get; set; } 9 10         [Display(Name = "Email")]11         public string Email { get; set; }12 13         [Display(Name = "Description")]14         public string Desc { get; set; }15     }16 }

Controller

 1 public ActionResult AjaxForm() 2 { 3     return View(); 4 } 5  6 [HttpPost] 7 public ActionResult SaveUser(UserModel userModel) 8 { 9     //Save User Code Here10     //......11 12     return Content("Save Complete!");13 }

以上範例程式碼實現了採用Ajax提交Form資料的大概方法，在Ajax.BeginForm中同樣使用AjaxOptions來設定Ajax請求的參數，和Ajax.ActionLink中的使用方法相同。

其他：

在介紹JavaScriptResult時曾經提到了該ActionResult在普通的請求中是直接當作檔案Reponse出的，但是在Ajax請求中，便可以使用該Result，並且執行Result中的JavaScript。

比如將上面的Conntroller更改為以下代碼：

1 [HttpPost]2 public ActionResult SaveUser(UserModel userModel)3 {4     //Save User Code Here5     //......6 7     //return Content("Save Complete!");8     return JavaScript("alert(‘Save Complete!‘);");9 }  

便可在執行改Ajax請求之後執行JavaScriptResult中的語句。

 

MVC Ajax Helpers