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,
 　　　　　　HttpMethod="Get"
 　　　　})
 </div>

@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" />
 　　}

再要渲染的表单中，当用户单击提交按钮时，浏览器就会向控制器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的行为的。

---

	名称	描述
	Confirm	获取或设置提交请求之前，显示在确认窗口中的消息。
	HttpMethod	获取或设置 HTTP 请求方法（“Get”或“Post”）。
	InsertionMode	获取或设置指定如何将响应插入目标 DOM 元素的模式。
	LoadingElementDuration	获取或设置一个值（以毫秒为单位），该值控制显示或隐藏加载元素时的动画持续时间。
	LoadingElementId	获取或设置加载 Ajax 函数时要显示的 HTML 元素的 id 特性。
	OnBegin	获取或设置更新页面之前，恰好调用的 JavaScript 函数的名称。
	OnComplete	获取或设置实例化响应数据之后但更新页面之前，要调用的 JavaScript 函数。
	OnFailure	获取或设置页面更新失败时，要调用的 JavaScript 函数。
	OnSuccess	获取或设置成功更新页面之后，要调用的 JavaScript 函数。
	UpdateTargetId	获取或设置要使用服务器响应来更新的 DOM 元素的 ID。
	Url	获取或设置要向其发送请求的 URL。

JSON和客服端模板

• 第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");
   });
});

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

   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) {

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

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

      }
   });
});