MVC Ajax

_references

Ajax辅助方法 通过这些方法局部返回视图

@Ajax.ActionLink("Link Text","Test",new AjaxOptions { UpdateTargetId="ajax"})

<div id="dailydeal">
　　　　@Ajax.ActionLink("点击我","DailyDeal",new AjaxOptions
　　　　{
　　　　　　UpdateTargetId="dailydeal",
　　　　　　InsertionMode = InsertionMode.Replace,251)">　　　　　　HttpMethod="Get"
　　　　})
</div>

@using (Ajax.BeginForm("ArtistSearch","Home",251)">　　{
　　　　InsertionMode = InsertionMode.Replace,251)">　　　　HttpMethod = "GET",251)">　　　　OnFailure = "searchFailed",251)">　　　　LoadingElementId = "ajax-loader",251)">　　　　UpdateTargetId = "searchresults",251)">　　}))
　　　　<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" />
　　}

再要渲染的表单中，当用户单击提交按钮时，浏览器就会向控制器HomeController的ArtistSearch操作发送异步GET请求，注意上面的代码已经指定了LoadingElementId作为其中的一个选项，当执行异步请求时，客户端框架会自动的显示这个元素，通常情况下，在这个元素内部会出现一个具有动画效果的微调框，来告知用户后台正在进行一些处理，此外，还有一个OnFailure选项，这些选项包括许多参数，可以设置它们以捕获来自Ajax请求的各种客户端事件，如OnBegin，OnComplete，OnSuccess和OnFailure等，可以给这些参数赋予一个JavaScript函数的名称，当事件触发时，调用该函数，上面的代码就为OnFailure指定了一个JavaScript函数，代码如下：
　　<script type="text/javascript">
　　　　function searchFailed() {
　　　　　　$("#searchresults").html("对不起，查询有问题");
　　　　}
　　</script> 

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库，因此禁用这些特性的主要原因是维护应用程序的向后兼容性。

第二、Ajax Helper有几个用法

Ajax.ActionLink()：它将渲染成一个超链接的标签，类似于Html.ActionLink()。当它被点击之后，将获取新的内容并将它插入到HTML页面中。

Ajax.BeginForm()：它将渲染成一个HTML的Form表单，类似于Html.BeginForm()。当它提交之后，将获取新的内容并将它插入到HTML页面中。

Ajax.RouteLink()：Ajax.RouteLink()类似于Ajax.ActionLink()。不过它可以根据任意的routing参数生成URL,不必包含调用的action。使用最多的场景是自定义的IController，里面没有action。

Ajax.BeginRouteForm()：同样Ajax.BeginRouteForm()类似于Ajax.BeginForm()。这个Ajax等同于Html.RouteLink()。

而每个方法里面的参数会有所不同，具体的用法见：http://msdn.microsoft.com/zh-cn/library/system.web.mvc.ajaxhelper_methods(v=VS.98).aspx

其中一个重要的参数为：AjaxOption，存在有以下几个属性，主要是来规定Ajax的行为的。

• 第8章 AJAX
• 概述
• 8.1 jQuery
• 8.1.1 jQuery的特性
• 8.1.2 非侵入式JavaScript
• 8.1.3 jQuery的用法
• 8.2 AJAX辅助方法
• 8.2.1 AJAX的ActionLink方法
• 8.2.2 HTML 5特性
• 8.2.3 AJAX表单
• 8.3 客户端验证
• 8.3.1 jQuery验证
• 8.3.2 自定义验证
• 8.4 辅助方法之外
• 8.4.1 jQuery UI
• 8.4.2 使用jQuery UI实现自动完成部件
• 8.4.3 JSON和jQuery模板
• 8.5.1 使用内容分发网络
• 8.5.2 脚本优化
• 8.6 小结

NuGet/mustanche.js包

模板

<Script Id="artistTemplate" type="text/html">

<ul>

{{#artists}}

<li>{{Name}}</li>

{{/artists}}

</ul>

</script>

<div id="searchresults">

</div>

$("#artistSearch").submit(function (event) {
event.preventDefault();

var form = $(this);
$.getJSON(form.attr("action"),form.serialize(),function (data) {

var html=Mustache.to_html($("#artistTemplate").html(),{artists:data})

$("#searchresults").empty().append(html);
//$("#artistTemplate").tmpl(data).appendTo("#artist-list");
});
});

var form = $(this);
$.ajax({
url: form.attr("action"),
data: form.serialize(),
beforeSend: function () {
$("#ajax-loader").show();
},
complete: function () {
$("#ajax-loader").hide();
},
error: searchFailed,
success: function (data) {

$("#searchresults").empty().append(html); //$("#artistTemplate").tmpl(data).appendTo("#artist-list");

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!