浅析Asp.net MVC 中Ajax的使用
一、使用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( new ajaxoptions() { httpmethod = "post", url = @url.action("index","reviews"), insertionmode = insertionmode.replace, updatetargetid = "restaurantlist", loadingelementid = "loding", loadingelementduration = 2000 })) { <input type="search" name="searchitem"/> <input type="submit" value="按名称搜索"/> }
最终生成的form如下:
<form id="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
new ajaxoptions() { ... url = @url.action("index","reviews") ... } public actionresult index(string searchkey = null) { var model = _restaurantreviews.where(r => searchkey == null || r.name.tolower().contains(searchkey.tolower().trim())) .orderbydescending(r => r.rating) .take(100) .select(r=>new restaurantreview() { 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);//模拟处理数据需要的时间 //return view(model)会返回整个页面,所以返回部分视图。 return partialview("_restaurantpatialview", model); } return view(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的<div>:
<div id="restaurantlist">... </div>
第四步:(可选)为增强用户体验,添加ajaxoption对象的loadingelementid参数指定的id为loding的html元素:
new ajaxoptions() { .... loadingelementid = "loding", loadingelementduration = 2000 }))
这里在页面中添加:id为loding的元素,添加了包含一个动态的刷新图片<div>:
cshtml文件中添加:
<div id="loding" hidden="hidden"> <img class="smallloadingimg" src="@url.content("~/content/images/loading.gif")" /> </div>
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"})*@ @*<a class="isstar" href="@url.action("details","reviews", new {id = item.id})">@item.name</a>*@ @*使用ajax的超链接*@ @{ var ajaxoptions = new ajaxoptions() { 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为:
<a class="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> /// <param name="id"></param> /// <returns></returns> public actionresult details(int id=1) { var model = (from r in _restaurantreviews where r.id == id select r).firstordefault(); if (request.isajaxrequest()) { return partialview("_restaurantdetails", model); } return view(model); }
第三步:定义承载更新部分的html元素:
<div id="renderbody"> .... </div>
第四步:(可选)为增强用户体验,添加ajaxoptionsd对象的loadingelementid参数指定的id为loding的html元素:
与1.1第四步相同。
二、手工打造自己的“非介入式”javascript”
第一步:添加表单:
@* --------------------------------------------------------- 需要手工为form添加些属性标签,用于锚点 模仿mvc框架的构建自己的“非介入式javascript”模式 -------------------------------------------------------*@ <form method="post" action="@url.action("index")" data-otf-ajax="true" data-otf-ajax-updatetarget="#restaurantlist"> <input type="search" name="searchitem" /> <input type="submit" value="按名称搜索" /> </form>
生成的form为:
<form data-otf-ajax-updatetarget="#restaurantlist" data-otf-ajax="true" action="/reviews" method="post" novalidate="novalidate">
第二步:添加处理表单的action:
这里与1.1的第二步一样。
第三步:添加js处理表单:
$(function () { var ajaxformsubmit = function() { var $form = $(this); var ajaxoption = { type: $form.attr("method"), url: $form.attr("action"), data: $form.serialize() }; $.ajax(ajaxoption).done(function(data) { var updatetarget = $form.attr("data-otf-ajax-updatetarget"); var $updatetarget = $(updatetarget); if ($updatetarget.length > 0) { var $returnhtml = $(data); $updatetarget.empty().append(data); $returnhtml.effect("highlight"); } }); return false; }; $("form[data-otf-ajax='true']").submit(ajaxformsubmit); });
注意:
所谓的“非介入式javascript”模式,是指假如没有添加这一步,表单照样能被处理,只是没用到ajax而已。
上一篇: PHP各种异常和错误的拦截方法及发生致命错误时进行报警
下一篇: 关于vuex的学习实践笔记
推荐阅读
-
ASP.NET MVC中使用JavaScriptResult的用法示例
-
ASP.NET在MVC控制器中获取Form表单值的方法
-
ASP.NET MVC4中使用Html.DropDownListFor的方法示例
-
ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项
-
ASP.NET框架中的数据绑定概要与数据绑定表达式的使用
-
深入浅析Vue 中 ref 的使用
-
解读ASP.NET 5 & MVC6系列教程(17):MVC中的其他新特性
-
HTML5中使用postMessage实现Ajax跨域请求的方法
-
ASP.NET MVC中URL地址传参的两种写法
-
浅析Python中signal包的使用