脚本src url content scripts-中与jqueryui七章使用ajax.pptx

ASP.NETMVC3第七章MVC中的Ajax

本书目标MVC中使用Ajax设置Ajax选项生成Ajax连接与JSON一起工作

本章任务使用Ajax+JQuery+Json完成在线书城前台的图书显示

显示会议列表实现会议列表过滤功能基本步骤定义模型类编写控制器初始化数据返回数据给视图添加显示视图

启用/禁用Ajax在Web.Config中启用AjaxappSettingsaddkey=ClientValidationEnabledvalue=true/addkey=UnobtrusiveJavaScriptEnabledvalue=true//appSettings在视图中引用Ajax库scriptsrc=@Url.Content(~/Scripts/jquery-1.4.4.min.js)type=text/javascript/scriptscriptsrc=@Url.Content(“~/Scripts/jquery.unobtrusive-ajax.min.js)”type=text/javascript/script

使用Ajax表单启用Ajax的表单需要两步：1、创建一个AjaxOptions对象，通过它来指定具体的Ajax请求的行为。2、替换Html.BeginForm为Ajax.BeginForm。AjaxOptions类的属性：

理解Ajax工作原理修改会议视图@*@Modelstring*@@{ViewBag.Title=Index;AjaxOptionsajaxOpts=newAjaxOptions{UpdateTargetId=tabledata};}h4会议列表/h4@using(Ajax.BeginForm(AppointmentData,ajaxOpts)){...}运行后生成的部分源码formAction=/Appointment/AppointmentDatadata-ajax=truedata-ajax-mode=replacedata-ajax-update=#tabledataid=form0method=postjquery.unobtrusive-ajax.js会扫描HTMLDom并且通过寻找值为true的data-ajax属性来识别Ajax表单。其他的指定的以data-ajax开始的属性的值使用AjaxOptions类

解决禁用JS的问题修改会议视图@Modelstring@{ViewBag.Title=Index;AjaxOptionsajaxOpts=newAjaxOptions{UpdateTargetId=tabledata,Url=Url.Action(AppointmentData)};}h4会议列表/h4@using(Ajax.BeginForm(ajaxOpts)){...}运行程序，禁用js，点击提交页面会正常显示，虽然不是异步的。使用Url.Action方法创建一个调用了AppointmentData的Url，并使用接收一个AjaxOptions参数的重载。这个版本的重载创建一个回发的表单给呈现视图的Action方法，也就是这里的Index。当我们启用了js，则会异步提交，产生好的用户体验。

@*@Modelstring*@@{ViewBag.Title=Index;AjaxOptionsajaxOpts=newAjaxOptions{UpdateTargetId=tabledata,Url=Url.Action(AppointmentData),LoadingElementId=loading,LoadingElementDuration=2000};}h4会议列表/h4divid=loadingstyle=display:none;color:Red;font-weight:boldpLoadingData.../p/div@using(Ajax.BeginForm(AppointmentData,ajaxOpts)){...}给用户提供反馈修改会议视图定义Ajax选项对象调用Ajax选项对象显示提示信息延迟时间

请求之前提示用户@*@Modelstring*@@{ViewBag.Title=Index;AjaxOptionsajaxOpts=newAjaxOptions