查了好多资料,发明还是不全,干脆自己整理吧,少至保证在我的做法正确的,以免误导读者,也是给自己做个记录吧!
媒介:面前我们已简略的分析过了MVC如何Jquery,因为我们如果应用Ajax的话必须要懂得Jquery,这篇博客我们将大致懂得一下ASP.NET MVC如何应用Ajax的帮助方法,此博客是我的读书条记,如果那里写的好不,还请各位朋友提出来,我们同共学习。
1.准备作工
(1)在MVC刚开始学习的时候,我们就须要分析ASP.NET MVC框架中的HTML的帮助方法,但是这类文章在现已很多了,而且个人感觉很简略,所以没有写条记,我在这里就不分析了。
(2)ASP.NET MVC框架中的HTML帮助方法,我们可以应用HTML帮助方法创立表单和指向控制器作操的链接,在ASP.NET MVC框架中还含包一组Ajax帮助方法,它们也可以用来创立表单和指向控制器作操的接连,但不同的是它们是异步停止的,当应用这些帮助方法时,不必编写任何本脚代码来实现序程的异步性。
(3)在台后,这些Ajax帮助方法赖依非侵入式MVC的Jquery展扩,如果应用这些帮助方法,就须要引入本脚件文jquery.unobtrusive-ajax.js,至于怎么用引我在上篇博客已说过了,这里就不贴出代码了。
2.Ajax的ActionLink方法
(1)在Razor视图中,AJAX帮助方法可以通过Ajax性属拜访,和HTML帮助方法似类,Ajax性属上的大部分Ajax帮助方法都是展扩方法(除了AjaxHelper类型以外)。
(2)Ajax性属的ActionLink方法可以创立一个拥有异步行为的锚签标。在现我们可以在微软布发的MVC3.0的MusicStore目项面上停止修改,谁如果没有这个目项的话可以加地下的群,然后再群同享面里我同享了这个目项。在视图”Views/Home/Index.cshtml”中添加面下的代码。
<div id="dailydeal">
@Ajax.ActionLink("点击我", "DailyDeal", new AjaxOptions
{
UpdateTargetId="dailydeal",
InsertionMode = InsertionMode.Replace,
HttpMethod="Get"
})
</div>
(3)ActionLink方法的第一个参数指定了接连文本,第二个参数是要异步用调的作操的名称,似类于同名的HTML帮助方法。对于HTML帮助方法和Ajax帮助方法,明显不同的是AjaxOptions参数,该参数指定了发送请乞降理处服务器回返结果的方法,参数中还包含用来理处错误,示显载加素元,示显确认对话框等的选项。为了到得服务器的响应,须要在控制器HomeController上添加一个DailyDeal作操,代码如下:
public ActionResult DailyDeal()
{
var album = GetDailyDeal();
return PartialView("_DailyDeal", album);
}
private Album GetDailyDeal()
{
return storeDB.Albums.OrderBy(a => a.Price).First();
}
(4)Ajax作操接连的目标作操的回返值是纯文本或HTML。面下的Razor代码就在目项的Views/Home件文夹下的_DailyDeal.cshtml件文中。
注解:Ajax.ActionLink成生的内容够能得获服务器的响应,并可以直接将新内容移植到页面中,这时为什么呢?面下我们就分析一下异步作操接连的作工理原。
3.HTML5性特
(1)如果我们查看ActionLink方法染渲的标记,我们会看到如下代码:
<a data-ajax="true" data-ajax-method="Get" data-ajax-mode="replace" data-ajax-update="#dailydeal" href="/Home/DailyDeal">点击我</a>
(2)非侵入式JavaScript的明显特点就是在HTML中不含包任何JavaScript代码,也就是说在HTML中看不到本脚代码,如果仔细看的话就会发明ActionLink中指定的有所设置被码编成了HTML素元的性特,并且这些码编的大多数性特都有data-缀前,平日称之为data-性特。
(3)HTML 5标准为私有应用序程保留了data-性特,换句话说,web浏览器不会实验释解data-性特的内容,因此可以心放的把自己的数据交给它,这些数据不会影响页面的示显或者染渲。
(4)向应用序程中添加jquery.unobtrusive-ajax件文的的目是查找特定的data-性特,然后纵操素元使其表现出不同的行为。
(5)有所的ASP.NET MVC AJAX性特都应用data-性特。
4.Ajax表单
(1)面下我们实现另外一种情况,要在音乐店商的页首为用户添加一个查找艺术家的功能,因为须要用户的输入,所以必须在页面面上放一个form签标,但这不是一个通普的签标,而是一个异步表单。面下这段代码我们看一下:
@using (Ajax.BeginForm("ArtistSearch", "Home", new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
HttpMethod = "GET",
OnFailure = "searchFailed",
LoadingElementId = "ajax-loader",
UpdateTargetId = "searchresults",
}))
{
<input type="text" name="q" />
<input type="submit" value="Search" />
<img id="ajax-loader" src="@Url.Content("~/Content/Images/ajax-loader.gif")" style="display:none" />
}
(2)再要染渲的表单中,当用户单击提交按钮时,浏览器就会向控制器HomeController的ArtistSearch作操发送异步GET请求,意注面上的代码已指定了LoadingElementId作为其中的一个选项,当执行异步请求时,客户端框架会动自的示显这个素元,平日情况下,在这个素元外部会现出一个拥有动画效果的调微框,来告诉用户台后正在停止一些理处,此外,还有一个OnFailure选项,这些选项包含很多参数,可以设置它们以获捕来自Ajax请求的各种客户端事件,如OnBegin,OnComplete,OnSuccess和OnFailure等,可以给这些参数予赋一个JavaScript数函的名称,当事件触发时,用调该数函,面上的代码就为OnFailure指定了一个JavaScript数函,代码如下:
<script type="text/javascript">
function searchFailed() {
$("#searchresults").html("对不起,查询有问题");
}
</script>
(3)如果服务器代码回返一个错误,就意味着AJAX帮助方法都执行失败了,此时,你可能想获捕OnFailure事件,如果用户单击”search”按钮而页面没有反应,我们可能就会觉得迷惑,跟面前代码所做的一样,可以示显一个错误提示信息,少至让他们道知我们已努力了。
(4)帮助方法BeginForm的输出似类于帮助方法ActionLink,最后,当用户单击提交按钮提交表单的时候,服务器会接受到一个Ajax请求,并可能以意任格式的内容作出响应,当客户端收到来自服务器端的响应时,非侵入式本脚就会将响应的内容放入Dom中。
(5)对于这个例子,控制器作操须要查询数据库并且染渲一个分部视图,此外,作操还要回返纯文本,但同时又想把艺术家放到一个列表中,因此,在HomeControler中写入如下的方法代码:
public ActionResult ArtistSearch(string q)
{
var artists = GetArtists(q);
return PartialView(artists);
}
private List<Artist> GetArtists(string q)
{
return storeDB.Artists.Where(a => a.Name.Contains(q)).ToList();
}
制复代码
(6)该分部视图用利模型构建列表,它位于目项的Views/Home件文夹下的视图ArtistSearch.cshtml。
@model IEnumerable<MvcMusicStore.Models.Artist>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>ArtistSearch</title>
</head>
<body>
<div id="searchresults">
<ul>
@foreach (var item in Model)
{
<li>@item.Name</li>
}
</ul>
</div>
</body>
</html>
5.web.config件文里的AJAX设置
(1)默许情况下,非侵入式JavaScript和客户端验证在ASP.NET MVC应用序程中是用启的,然后,我们可以通过web.config件文中的设置变改这些行为,如果打开新应用序程根目录下的web.config件文,就会看到面下的appSettings配置节点:
<appSettings>
<add key="webpages:Version" value="1.0.0.0"/>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>
(2)如果想在个整应用序程中禁用这两个性特中的意任性特,只须要将响应性特的value值修改成false便可,另外,还可以逐视图是的控制这些设置,HTML帮助方法EnableClientValidation和EnableUnobtrusiveJavaScript在一个详细视图中重写了这些配置设置。
(3)由于现有的自定义本脚都是赖依与Microsoft AJAX库而不是Jquery库,因此禁用这些性特的要主原因是维护应用序程的向后兼容性。
文章结束给大家分享下程序员的一些笑话语录:
与女友分手两月有余,精神萎靡,面带菜色。家人介绍一女孩,昨日与其相亲。女孩果然漂亮,一向吝啬的我决定破例请她吃晚饭。
选了一个蛮贵的西餐厅,点了比较贵的菜。女孩眉开眼笑,与我谈得很投机。聊着聊着,她说:“我给你讲个笑话吧。”“ok”
“一只螳螂要给一只雌蝴蝶介绍对象,见面时发现对方是只雄蜘蛛。见面后螳螂问蝴蝶‘如何?’,‘他长的太难看了’,‘别看人家长的丑,人家还有网站呢’。”
“呵呵………”我笑。忽然她问:“你有网站吗?”