第02章 MVC编程预备知识.pptVIP

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 2.5 用于页面局部更新的Ajax帮助器 2.5.1 Unobtrusive JavaScript Ajax 在视图中用jQuery ajax或者Ajax帮助器实现局部更新需要： UnobtrusiveJavaScriptEnabled的属性必须设置为true 在项目根目录下的Web.config文件的appSettings配置appSettings add key=UnobtrusiveJavaScriptEnabled value=true / /appSettings 添加对jQuey的引用 添加对jQuery Unobtrusive Ajax的引用 2.5 用于页面局部更新的Ajax帮助器 2.5.2 jQuery ajax 有三种使用jQuery ajax的办法，不论使用哪种方式，这些方法中各个参数的含义都是相同的。 $.ajax()、$.get()、$.getJSON() 1. 用法如下： $.ajax(url,[options]) .fail(function( jqXHR, textStatus, errorThrown ) {}) .done(function( data, textStatus, jqXHR ) {}) .always(function( data|jqXHR, textStatus, jqXHR|errorThrown ) {}); 各参数的含义如下： 1）url：客户端请求的目标URL。 2）done：请求成功时执行的回调函数。 3）fail：请求失败时执行的回调函数。 4）always：请求完成时（可能成功也可能失败）执行的回调函数。 2.5 用于页面局部更新的Ajax帮助器 2.5.2 jQuery ajax 可选参数（options）中的常用选项及含义如下： 1）data：指定随请求一起发送到服务器的数据。数据类型可以是PlainObject、String或者Array。 2）dataType：指定服务器响应的数据类型（xml、json、script或者html），如果不指定该参数，默认由jQuery自动判断是哪种数据类型。 3）method：不指定时默认为GET，还可以是POST、PUT等。 4）context：要更新的目标元素，一般用选择器来指定。 2．XMLHttpRequest 在Ajax的回调函数中，利用XMLHttpRequest对象的responseText属性、responseXML属性以及responseJSON属性，可分别获取服务器返回的相应数据格式的结果。 2.5 用于页面局部更新的Ajax帮助器 2.5.2 jQuery ajax 3．直接用jQuery ajax实现页面局部更新 div id=div3/div script $.ajax({ url: @Url.Action(Ajax1, ch02Demos), success: function (result) { $(#div1).html(result);}, error: function () { alert(更新div1出错了); } }); /script 控制器中对应的Ajax1操作方法如下： public ActionResult Ajax1() { string s = string.Format({0:HH:mm:ss}, DateTime.Now); return Content(s); } 2.5 用于页面局部更新的Ajax帮助器 2.5.3 Ajax帮助器 除了直接用jQuery ajax实现“页面局部更新”的功能外，还可以通过ASP.NET MVC提供的Ajax帮助器实现相同的功能。 Ajax帮助器和Html帮助器的异同 （1）使用Ajax帮助器只更新页面中指定元素的内容，而使用Html帮助器更新的是整个页面。 （2）使用Ajax帮助器需要通过AjaxOptions对象指定要更新的目标元素的id和URL，而使用Html帮助器则不需要。 【例2-5】演示Ajax帮助器和jQuery ajax的基本用法 2.5 用于页面局部更新的Ajax帮助器 2.5.3 Ajax帮助器 1．用Ajax帮助器，首先需要设置Ajax选项。 属性 说明 UpdateTargetId 获取或设置服务器响应后要更新的页面元素的id HttpMethod 获取或设