浅析Asp.net最有价值球员中埃阿斯的使用

一、使用系统网络。Mvc.Ajax

1.1系统网络。Mvc。Ajax。开始信息

1.2系统网络。Mvc.Ajax.ActionLink

二、手工打造自己的"非介入式“Javascript”

一、使用系统网络。Mvc.Ajax

1.1系统网络。Mvc。Ajax。开始信息

第一步：用Ajax .开始通知创建形式

@使用(Ajax .开始通知(新的AJaxoOptions(){ HttpMethod=' post '，Url=@Url .操作('索引','评论'),插入模式=插入模式。替换，UpdateTargetId='restaurantList '，LoadingElementId=' loding '，loadingelementtdconstance=2000 }){ 0输入类型='search '名称='searchItem'/输入类型='submit '值='按名称搜索'/} 最终生成的形式如下：

form id=' form 0 ' method=' post ' data-Ajax-URL='/Reviews ' data-Ajax-update=' # restaurantList ' data-Ajax-mode=' replace ' data-Ajax-method=' post ' data-Ajax-loading-duration=' 2000 ' data-Ajax-loading=' # loding ' data-Ajax=' true ' action='/Reviews ' novalidate=' novalidate '第二步：创建Ajax .开始通知的新AjaxOptions()对象的全球资源定位器(统一资源定位符)指向的行动

新AJaxooptions(){ 0.Url=@Url .操作("索引"、"评论").}公共行动结果索引(字符串搜索关键字=null){ var model=_ restaurantReviews .其中(r=搜索关键字==null | | r . name。ToLower().包含(搜索关键字.ToLower().Trim())).按降序排序。以(100)为例。选择(r=新餐厅tReview(){ 0城市=r。城市，国家=r。国家，标识=r。标识，名称=r。名称，评级=r。评级})。to list()；如果（请求IsAjaxRequest()) {系统.线程。线程。睡眠(1000 * 3);//模拟处理数据需要的时间//返回视图（模型)会返回整个页面，所以返回部分视图。返回局部视图(' _ RestaurantPatialView '，模型);}返回视图（模型);}注意：

关于使用系统网络。Mvc.Ajax的说明：

控制器的行动方法：

(1)当显式添加[httpset]，传给系统网络。Mvc.Ajax的AjaxOptions()的HttpMethod只能为'岗位，

(2)当显式添加[HttpGet]，传给系统网络。Mvc.Ajax的AjaxOptions()的HttpMethod只能为去拿，

(3)当都没有显式添加[HttpSet]和[HttpGet]，传给系统网络。Mvc.Ajax的AjaxOptions()的HttpMethod可以为去拿也可以为'岗位，

第三步：添加要承载更新页面的超文本标记语言元素，

也就是添加添加AJaxooptions d对象的UpdateTargetId参数指定的身份为餐馆列表的超文本标记语言元素：

这里在页面中添加：id为餐馆列表的div:

div id='restaurantList './div第四步：(可选)为增强用户体验，添加埃阿斯选项对象的加载元素参数指定的身份为洛丁的超文本标记语言元素：

新AJaxooptions(){ 0.LoadingElementId=' loding '，loadingelementtdconstruction=2000 }))这里在页面中添加：id为洛丁的元素，添加了包含一个动态的刷新图片div:

cshtml文件中添加：

div id=' loding ' hidden=' hidden ' img class=' smallLoadingImg ' src=' http : @ URl .内容(' ~/内容/图像/加载。gif ')'//div 1.2系统网络。Mvc.Ajax.ActionLink

系统网络。Mvc.Ajax.ActionLink与系统网络。Mvc。Ajax。开始信息用法基本一致

第一步：使用系统网络。Mvc.Ajax.ActionLink创建超链接

@*@Html .ActionLink(项目。名称，"详细信息"、"评论",新{id=item .Id}，new { @ class=' IsStar ' })* @ @ * a class=' IsStar ' href=' @ Ul .行动('详细信息','评论，新{ id=item.Id})'@item.Name/a*@ @ *使用埃阿斯的超链接* @ @ { var AJaxooptions=new AJaxooptions(){ HttpMethod=' post '，//Url=@Url .操作("")，UpdateTargetId="render body "，InsertionMode=InsertionMode .替换，LoadingElementId=' loding '，loadingelementtdconstruction=2000 }；@Ajax .ActionLink(项目。名称，"详细信息"、"评论",新{ id=item .Id }，ajaxOptions，new {@class='isStar'})对应生成的最终超文本标记语言为：

a class=' isStar ' href='/Reviews/Details/1 ' data-Ajax-update=' # render body ' data-Ajax-mode=' replace ' data-Ajax-method=' post ' data-Ajax-loading-duration=' 2000 ' data-Ajax-loading=' # loding ' data-Ajax=' true '第二步：定义出来响应超链接的行动：

///摘要///关于使用系统网络。Mvc.Ajax的说明：///控制器的行动方法： ///(1)当显式添加[httpset]，传给系统网络。Mvc.Ajax的AjaxOptions()的HttpMethod只能为' post '，///(2)当显式添加[HttpGet]，传给系统网络。Mvc.Ajax的AjaxOptions()的HttpMethod只能为get '，///(3)当都没有显式添加[HttpSet]和[HttpGet]，传给系统网络。Mvc.Ajax的AjaxOptions()的HttpMethod可以为去拿也可以为post '，////summary///param name=' Id '/param///returns/returns public action result Details(int Id=1){ var model=(from r in _ restaurantReviews其中r.Id==id选择r).first ordefault()；如果（请求. IsAjaxRequest()){返回部分视图(' _ RestaurantDetails '，模型);}返回视图（模型);} 第三步：定义承载更新部分的超文本标记语言元素：

div id='renderBody './div第四步：(可选)为增强用户体验，添加AJaxooptions d对象的加载元素参数指定的身份为洛丁的超文本标记语言元素：

与1.1第四步相同。

二、手工打造自己的"非介入式“Javascript”

第一步：添加表单：

@* - 需要手工为形式添加些属性标签，用于锚点模仿手动音量调节框架的构建自己的"非介入式Javascript "模式-* @形式方法='post '操作=' @ Url .操作(' Index ')'数据-OTF-Ajax=' true '数据-OTF-Ajax-updatetarget=' # restaurantList '输入类型='search '名称='searchItem' /输入类型='submit '值='按名称搜索//表单生成的形式为：

表单数据-OTF-Ajax-updatetarget=' # restaurantList ' data-OTF-Ajax=' true ' action='/Reviews ' method=' post ' novalidate=' novalidate '第二步：添加处理表单的操作：

这里与1.1的第二步一样。

第三步：添加射流研究…处理表单：

$(function(){ var AJaxformSubmit=function(){ var $ form=$(this)；var AJaxoOption={ type : $ form。attr(' method ')、url: $form.attr('action ')、data : $ form。serialize()}；$.ajax(ajaxOption).done(函数(数据){ var updateTarget=$ form。attr(' data-OTF-Ajax-updateTarget ')；var $ updateTarget=$(updateTarget)；if($ updatetarget。长度0){ var $ return html=$(数据);$updateTarget.empty().追加（数据);$returnHtml.effect('高亮');} });返回false }；$('form[data-otf-ajax='true']').提交(AJaxformSubmit)；});注意：

所谓的"非介入式Javascript "模式，是指假如没有添加这一步，表单照样能被处理，只是没用到埃阿斯而已。