Unobtrusive Ajax使用方式(非入侵式)

非入侵式，通俗來講：就是將嵌入在Html中的JavaScript全部取出來，放在單獨的 js 檔案中，html標籤中不要出現任何onclick、onload 等

Unobtrusive Ajax ：方便程式設計師編寫簡單易於維護的ajax程式碼（Code is cleaner and easier to maintain）。

基本特點

1.網頁內容和表單使用純 HTML；

2.不借助 JavaScript，表單和超級連線也能正常使用；

3.頁面外觀完全由 CSS 控制，而不是 HTML（不要用 table 來佈局） 或 JavaScript；

4.任何人都能通過任何裝置（考慮不支援JavaScript的裝置）訪問；

 ASP.Net MVC 全域性開啟非入侵ajax

ASP.NET MVC4中，已經預設開啟客戶端驗證和非侵入式js。Web.config中

    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />

頁面新增非入侵js檔案

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type
 
="text/javascript"></script>

可在單個檢視頁面(View)上關閉

@{Html.EnableUnobtrusiveJavaScript(false);}
@{Html.EnableClientValidation(false);}

注意下js引用順序

<script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type
 
="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

AjaxHelper

非同步連結按鈕

 注意：必須開啟 非入侵式 Ajax：匯入Jquery和unobtrusiveAjax檔案

View中：@Ajax.ActionLink 建立 ajax 超連結按鈕，一般用來請求動態生成的部分html程式碼(分部檢視)

@Ajax.ActionLink("連結文字", "PartialViewTest", new AjaxOptions() {
                         UpdateTargetId="divMsg",//資料顯示的html容器id
                         InsertionMode= InsertionMode.Replace, //替換容器內容
                         HttpMethod="Post" })

Controller中

        public PartialViewResult PartialViewTest()
        {
            ViewData["Msg"] = "Hello world!";
            return PartialView();
        }

非同步表單

View中：@Ajax.BeginForm 建立 非同步表單

@using(Ajax.BeginForm("PartialViewTest","Home",new AjaxOptions{
         UpdateTargetId="msgDiv" , InsertionMode= InsertionMode.Replace, 
         HttpMethod="post" , OnFailure= "fail",
         LoadingElementId="lodeingmsg"}))
{
    <input type="text" name="txtName" />
    <input type="submit" />
}

Controller：

        public PartialViewResult PartialViewTest()
        {
            ViewData["Msg"] = "Hello world!";
            return PartialView();
        }

示例

View中：@Ajax.BeginForm 建立 非同步表單

@using(Ajax.BeginForm("PartialView","Home",new AjaxOptions{
         UpdateTargetId="msgDiv" , InsertionMode= InsertionMode.Replace, 
         HttpMethod="post" , OnFailure= "fail", OnSuccess="success" , 
         OnComplete="comlete", LoadingElementId="lodeingmsg"}))
{
    <input type="text" name="txtName" />
    <input type="submit" />
}
<div id="lodeingmsg" style="display:none;">載入中...</div>
<script type="text/javascript">function fail(xhr) { alert("方法引數是非同步物件" + xhr.responseText); }
    function complete(xhr) { alert("方法引數是非同步物件" + xhr.responseText); }
    function success(text) { alert("方法引數是響應報文體" + text); }
</script>

UpdateTargetId：目標元素id，獲取伺服器響應後，將獲取的響應報文體顯示到目標元素的innerHTML中。
InsertionMode：  InsertAfter 插入目標元素原有內容之後；InsertBefore 插入目標元素原有內容之前，Replace，替換目標元素原有內容
LoadingElementId：非同步物件readyState==4之前顯示"正在載入"狀態的元素id
AjaxOptions物件生成【對應】觸發ajax請求的標籤的 屬性

<a data-ajax="true" data-ajax-method="Post" data-ajax-mode="replace" data-ajax-update="#divMsg" href="/Home/PartialViewTest">連結文字</a>

請求Json資料

View中：

@Ajax.ActionLink("click here", "DogList", new AjaxOptions() {
                         UpdateTargetId="divMsg",
                         InsertionMode= InsertionMode.Replace, 
                         HttpMethod="Get" })

Controller中：使用 Json方法 返回一個 JsonResult

public ActionResult PartialView() //返回型別也可寫 JsonResult
{
     var  dogList = db.Dogs.ToList();
     return Json(dogList, JsonRequestBehavior.AllowGet);
}

MVC框架預設不允許使用Json響應Get請求，需要開啟。

Jquery請求控制器Action

除了url指向 控制器的 Action方法外，其它和以前一樣
具體參見 Jquery幫助文件 ajax 方法：
$.ajax   
$.post   
$.load  
$.get

Jquery 模板外掛

匯入指令碼：

<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.tmpl.min.js")"></script>

新增模板-佔位符格式：$(json物件屬性名)：

<script id="temp" type="text/x-jquery-tmpl">
            <tr>
                <td>${CID}</td><td>${CName}</td><td>${CCount}</td>
            </tr>
</script>

為模板裝載資料並最終生成html，新增到表格中：

function ajaxFinish(jsonObjArray) { //[{CID:"1",CName:"aa",CCount:"1"},....{}]
       $("#temp").tmpl(jsonObjArray).appendTo("#tbList");
}