方法代码ASP.NET MVC如何使用Ajax的辅助方法
2013-05-08 19:40
871 查看
查了好多资料，发明还是不全，干脆自己整理吧，少至保证在我的做法正确的，以免误导读者，也是给自己做个记录吧！
媒介：面前我们已简略的分析过了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”
“一只螳螂要给一只雌蝴蝶介绍对象，见面时发现对方是只雄蜘蛛。见面后螳螂问蝴蝶‘如何？’，‘他长的太难看了’，‘别看人家长的丑，人家还有网站呢’。”
“呵呵………”我笑。忽然她问：“你有网站吗？”
媒介：面前我们已简略的分析过了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”
“一只螳螂要给一只雌蝴蝶介绍对象，见面时发现对方是只雄蜘蛛。见面后螳螂问蝴蝶‘如何？’，‘他长的太难看了’，‘别看人家长的丑，人家还有网站呢’。”
“呵呵………”我笑。忽然她问：“你有网站吗？”
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ASP.NET MVC如何使用Ajax的辅助方法
- ASP.NET MVC如何使用Ajax的辅助方法
- ASP.NET MVC使用Ajax的辅助的解决方法
- ASP.NET MVC使用Ajax的辅助的解决方法
- 使用asp.net ajax的PageMethods来让客户端代码调用服务器端的方法
- ASP.NET中MVC使用AJAX调用JsonResult方法并返回自定义错误信息
- asp.net mvc页面javascript代码中如何使用razor
- 使用Ajax更新ASP.Net MVC项目中的报表对象方法
- 如何在ASP.NET MVC中使用ajax
- asp.net 事务的处理，dts 的设置，asp.net三种事务处理方法，三层架构,微软企业库,动软生成器生成的代码下如何使用事务
- ASP.NET中MVC使用AJAX调用JsonResult方法并返回自定义错误信息
- ASP.NET MVC 系列之 （强类型HTML辅助方法使用）
- ASP.NET MVC @Helper辅助方法和@functons自定义函数的使用方法
- 【Asp.Net】教你一步一步学习Ajax（一）使用GET方法
- 在Asp.net MVC中使用Asp.net Ajax
- ASP.NET MVC (CTP) - 在MVC中使用AJAX
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法（1）：调用Web Service、调用页面中的类方法(转)
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法：服务器端和客户端数据类型的自动转换：复杂类型
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法（3）：保持用户上下文
- Ajax程序：处理异步调用中的异常(使用Asp.Net Ajax内建的异常处理方法)