一、使用System.Web.Mvc.Ajax

　　1.1 System.Web.Mvc.Ajax.BeginForm

　　1.2 System.Web.Mvc.Ajax.ActionLink

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

一、使用System.Web.Mvc.Ajax

1.1 System.Web.Mvc.Ajax.BeginForm

第一步:用Ajax.BeginForm创建Form

@using(Ajax.BeginForm(newAjaxOptions(){HttpMethod="post",Url=@Url.Action("Index","Reviews"),InsertionMode=InsertionMode.replace,UpdateTargetId="restaurantList",LoadingElementId="loding",LoadingElementDuration=2000})){<inputtype="search"name="searchItem"/><inputtype="submit"value="按名称搜索"/>}

最终生成的form如下:

<formid="form0"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.BeginForm的new AjaxOptions()对象的Url指向的Action

newAjaxOptions(){　　　　　　...Url=@Url.Action("Index","Reviews")　　　...}publicActionResultIndex(stringsearchKey=null){varmodel=_restaurantReviews.Where(r=>searchKey==null||r.Name.ToLower().Contains(searchKey.ToLower().Trim())).OrderByDescending(r=>r.Rating).Take(100).select(r=>newRestaurantReview(){City=r.City,Country=r.Country,Id=r.Id,Name=r.Name,Rating=r.Rating}).ToList();if(Request.IsAjaxRequest()){System.Threading.Thread.Sleep(1000*3);//模拟处理数据需要的时间//returnView(model)会返回整个页面,所以返回部分视图。returnPartialView("_RestaurantPatialView",model);}returnView(model);}

注意:

　　　　关于使用System.Web.Mvc.Ajax的说明:

　　　　　　Controller的Action方法:

　　　　　　　　(1)当显式添加[HttpPost],传给System.Web.Mvc.Ajax的AjaxOptions()的HttpMethod只能为 "post",

　　　　　　　　 (2)当显式添加[HttpGet],传给System.Web.Mvc.Ajax的AjaxOptions()的HttpMethod只能为 "get",

　　　　　　　　 (3)当都没有显式添加[HttpPost]和[HttpGet],传给System.Web.Mvc.Ajax的AjaxOptions()的HttpMethod可以为 "get"也可以为"post",

第三步:添加要承载更新页面的html元素,

　　也就是添加添加AjaxOptionsd对象的UpdateTargetId 参数指定的Id为restaurantList的html元素:

　　这里在页面中添加:id为restaurantList的<p>:

<pid="restaurantList">...</p>

第四步:(可选)为增强用户体验,添加AjaxOption对象的LoadingElementId参数指定的Id为loding的html元素:

newAjaxOptions(){....LoadingElementId="loding",LoadingElementDuration=2000}))

这里在页面中添加:id为loding的元素,添加了包含一个动态的刷新图片<p>:

cshtml文件中添加:

<pid="loding"hidden="hidden"><imgclass="smallLoadingImg"src="@Url.Content("~/Content/images/loading.gif")"/></p>

1.2 System.Web.Mvc.Ajax.ActionLink

System.Web.Mvc.Ajax.ActionLink与System.Web.Mvc.Ajax.BeginForm用法基本一致

第一步:使用System.Web.Mvc.Ajax.ActionLink创建超链接

@*@Html.ActionLink(item.Name,"Details","Reviews",new{id=item.Id},new{@class="isStar"})*@@*<aclass="isStar"href="@Url.Action("Details","Reviews",new{id=item.Id})">@item.Name</a>*@@*使用Ajax的超链接*@@{varajaxOptions=newAjaxOptions(){HttpMethod="post",//Url=@Url.Action(""),UpdateTargetId="renderBody",InsertionMode=InsertionMode.replace,LoadingElementId="loding",LoadingElementDuration=2000};@Ajax.ActionLink(item.Name,"Details","Reviews",new{id=item.Id},ajaxOptions,new{@class="isStar"})}

对应生成的最终html为:

<aclass="isStar"　　href="/Reviews/Details/1"　　data-ajax-update="#renderBody"　　data-ajax-mode="replace"　　data-ajax-method="post"　　data-ajax-loading-duration="2000"　　data-ajax-loading="#loding"　　data-ajax="true">

　　　　第二步:定义出来响应超链接的Action:

///<summary>///关于使用System.Web.Mvc.Ajax的说明:///Controller的Action方法:///(1)当显式添加[HttpPost],传给System.Web.Mvc.Ajax的AjaxOptions()的HttpMethod只能为"post",///(2)当显式添加[HttpGet],传给System.Web.Mvc.Ajax的AjaxOptions()的HttpMethod只能为"get",///(3)当都没有显式添加[HttpPost]和[HttpGet],传给System.Web.Mvc.Ajax的AjaxOptions()的HttpMethod可以为"get"也可以为"post",///</summary>///<paramname="id"></param>///<returns></returns>publicActionResultDetails(intid=1){varmodel=(fromrin_restaurantReviewswherer.Id==idselectr).FirstOrDefault();if(Request.IsAjaxRequest()){returnPartialView("_RestaurantDetails",model);}returnView(model);}

第三步:定义承载更新部分的html元素:

<pid="renderBody">....</p>

第四步:(可选)为增强用户体验,添加AjaxOptionsd对象的LoadingElementId参数指定的Id为loding的html元素:

　　　　　　　　　　与1.1第四步相同。

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

第一步:添加表单:

@*---------------------------------------------------------需要手工为Form添加些属性标签,用于锚点模仿MVC框架的构建自己的“非介入式Javascript”模式-------------------------------------------------------*@<formmethod="post"action="@Url.Action("Index")"data-otf-ajax="true"data-otf-ajax-updatetarget="#restaurantList"><inputtype="search"name="searchItem"/><inputtype="submit"value="按名称搜索"/></form>

生成的form为:

<formdata-otf-ajax-updatetarget="#restaurantList"data-otf-ajax="true"action="/Reviews"method="post"novalidate="novalidate">

第二步:添加处理表单的Action:

　　　　这里与1.1的第二步一样。

第三步:添加Js处理表单:

$(function(){varajaxFormSubmit=function(){var$form=$(this);varajaxOption={type:$form.attr("method"),url:$form.attr("action"),data:$form.serialize()};$.ajax(ajaxOption).done(function(data){varupdateTarget=$form.attr("data-otf-ajax-updatetarget");var$updateTarget=$(updateTarget);if($updateTarget.length>0){var$returnHtml=$(data);$updateTarget.empty().append(data);$returnHtml.effect("highlight");}});returnfalse;};$("form[data-otf-ajax='true']").submit(ajaxFormSubmit);});

注意:

　　所谓的“非介入式Javascript”模式,是指假如没有添加这一步,表单照样能被处理,只是没用到Ajax而已。

“Asp.net MVC 中Ajax的使用方法”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注本站网站,小编将为大家输出更多高质量的实用文章!