AjaxOptions的使用
AjaxOptions 類別中的屬性列表
| 名稱 | 說明 |
| Confirm | 取得或設定在送出要求之前，要在確認視窗中顯示的訊息。 |
| HttpMethod | 取得或設定 HTTP 要求方法 ("Get" 或 "Post")。 |
| InsertionMode | 取得或設定模式，這個模式會指定如何將回應插入至目標 DOM 項目中。有InsertAfter、InsertBefore、Replace、ReplaceWith四種選項。 |
| LoadingElementDuration | 取得或設定值 (以毫秒為單位)，在顯示或隱藏正載入的項目時，這個值會控制動畫的持續時間，其效果就是在指定的持續時間內該區塊做放大縮小動畫。 |
| LoadingElementId | 取得或設定載入 Ajax 函式時所顯示之 HTML 項目的 id 屬性，其可以跟LoadingElementDuration配合。應用如：讀取中。 |
| OnBegin | 取得或設定更新頁面之前所要立即呼叫之 JavaScript 函式的名稱。 |
| OnComplete | 取得或設定在已執行個體化回應資料但尚未更新頁面之前所要呼叫的 JavaScript 函式。 |
| OnFailure | 取得或設定頁面更新失敗時所要呼叫的 JavaScript 函式。 |
| OnSuccess | 取得或設定成功更新頁面之後所要呼叫的 JavaScript 函式。 |
| UpdateTargetId | 使用來自伺服器的回應取得或設定要更新之 DOM 項目的 ID。 |
| Url | 取得或設定要對其提出要求的URL的內容，不指定則為form的action的url。 |
一、事前準備
在前端使用Ajax.ActionLink、Ajax.BeginForm、配合AjaxOptions屬性等方法，
或是於後端使用JavaScriptResult時，事前必須要準備
(1)、於Package Manager Console安裝Ajax適配器
指令為Install-Package Microsoft.jQuery.Unobtrusive.Ajax
(2)、需在Html原始碼裡安裝該適配器，如下，注意安裝順序不可對調
<script src="~/Scripts/jquery-1.10.2.js"></script> <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
(3)、另外注意於Web.config檔是否有添加或開啟UnobtrusiveJavaScriptEnabled
<configuration> <appSettings> <add key="UnobtrusiveJavaScriptEnabled" value="true" /> </appSettings> </configuration>
(4)、確認你的瀏灠器是否開啟javascript功能
二、範例
1、操作LoadingElementId、LoadingElementDuration範例
Controller為
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace WebApplication2.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[ActionName("AjaxIndex")]
public ActionResult Index(string toSendResult)
{
return Content(toSendResult);
}
}
}
View為
@{
AjaxOptions AjaxOptions = new AjaxOptions()
{
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "result",
LoadingElementId = "loading",
LoadingElementDuration = 1000,
Url = Url.Action("AjaxIndex")
};
}
<p id="result">result</p>
<div id="loading" style="display:none;">Loading...</div>
@using (Ajax.BeginForm("AjaxIndex", AjaxOptions))
{
<input type="text" name="toSendResult" value="" />
<input type="submit" name="name" value="submit" />
}
2、操作OnBegin、OnComplete範例
Controller為
using System.Web.Mvc;
namespace WebApplication1.Controllers
{
public class HomeController : Controller
{
[HttpGet]
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(string myName)
{
return View();
}
}
}
View為
@{
ViewBag.Title = "Home Page";
AjaxOptions AjaxOptions = new AjaxOptions()
{
HttpMethod = "post",
Url = @Url.Action("Index"),
OnBegin = "Start",
OnComplete = "Stop"
};
}
@using (Ajax.BeginForm(AjaxOptions))
{
<input type="text" name="myName" id="myName" value="" />
<input type="submit" value="送出" />
}
<img id="loading" src="http://i.imgur.com/3lMWGHa.gif" style="display:none;" />
@section scripts{
<script>
function Start() {
$("#loading").css("display", "block");
}
function Stop() {
$("#loading").css("display", "none");
}
</script>
}
3、在OnSuccess屬性上如何傳值到javascript function裡
Controller為
using System.Web.Mvc;
namespace WebApplication2.Controllers
{
public class HomeController : Controller
{
[HttpGet]
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(string myName)
{
return Content(myName);
}
}
}
View為
@{
ViewBag.Title = "Home Page";
AjaxOptions AjaxOptions = new AjaxOptions()
{
HttpMethod = "post",
Url = @Url.Action("Index"),
OnSuccess = "Success"
};
}
@using (Ajax.BeginForm(AjaxOptions))
{
<input type="text" name="myName" id="myName" value="" />
<input type="submit" value="送出" />
}
<div id="result"></div>
@section scripts{
<script>
function Success(data) {
$("#result").append("<p>" + data + "</p>");
}
</script>
}
其中OnSuccess屬性的字串指定成"Success(data)"也是可以被接受的
AjaxOptions AjaxOptions = new AjaxOptions()
{
HttpMethod = "post",
Url = @Url.Action("Index"),
OnSuccess = "Success(data)"
};
來看執行結果
成功
三、注意的要點有
1、含糊的Action方法
你將會在成功編譯後並在執行時出現「含糊的Action方法」問題，
The current request for action […] is ambiguous between the following action methods
可以先參考使用ActionNameAttribute的方法。
2、ContentResult、JavaScriptResult、PartialView
Ajax技術就是局部更新內容，所以也常常使用ContentResult方式，以字串形式來回應內容。
另外JavaScriptResult、PartialView也是常被應用的。
參考資料：