起风网本系列目录：ASP.NET MVC4入门到精通系列目录汇总
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");}
评论前必须登录！
立即登录