洋桥网站建设公司,电商首页设计分析,彩票网站建设教程,网站活动专题模板在ASP.NET MVC beta中我们可以使用Ajax.BeginForm, Ajax.ActionLink来进行Ajax调用#xff0c;同样我们也可以使用一些支持Ajax 框架如jQuery来简化对ajax的调用。一、使用System.Web.Mvc.Ajax 1.1 System.Web.Mvc.Ajax.BeginForm 1.2 System.Web.Mvc.Ajax.ActionLink 二、手工… 在ASP.NET MVC beta中我们可以使用Ajax.BeginForm, Ajax.ActionLink来进行Ajax调用同样我们也可以使用一些支持Ajax 框架如jQuery来简化对ajax的调用。 一、使用System.Web.Mvc.Ajax 1.1 System.Web.Mvc.Ajax.BeginForm 1.2 System.Web.Mvc.Ajax.ActionLink 二、手工打造自己的“非介入式”Javascript” 一、使用System.Web.Mvc.Ajax 1.1 System.Web.Mvc.Ajax.BeginForm 第一步用Ajax.BeginForm创建Form ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 using (Ajax.BeginForm( new AjaxOptions() { HttpMethod post, Url Url.Action(Index,Reviews), InsertionMode InsertionMode.Replace, UpdateTargetId restaurantList, LoadingElementId loding, LoadingElementDuration 2000 })) { input typesearch namesearchItem/ input typesubmit value按名称搜索/ } 最终生成的form如下 ? 1 2 3 4 5 6 7 8 9 form idform0 methodpost data-ajax-url/Reviews data-ajax-update#restaurantList data-ajax-modereplace data-ajax-methodpost data-ajax-loading-duration2000 data-ajax-loading#loding data-ajaxtrue action/Reviews novalidatenovalidate 第二步创建Ajax.BeginForm的new AjaxOptions()对象的Url指向的Action ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 new AjaxOptions() { ... Url Url.Action(Index,Reviews) ... } public ActionResult Index(string searchKey null) { var model _restaurantReviews.Where(r searchKey null || r.Name.ToLower().Contains(searchKey.ToLower().Trim())) .OrderByDescending(r r.Rating) .Take(100) .Select(rnew RestaurantReview() { City r.City, Country r.Country, Id r.Id, Name r.Name, Rating r.Rating }).ToList(); if (Request.IsAjaxRequest()) { System.Threading.Thread.Sleep(1000 * 3);//模拟处理数据需要的时间 //return View(model)会返回整个页面所以返回部分视图。 return PartialView(_RestaurantPatialView, model); } return View(model); } 注意 关于使用System.Web.Mvc.Ajax的说明 Controller的Action方法 (1)当显式添加[HttpPost]传给System.Web.Mvc.Ajax的AjaxOptions()的HttpMethod只能为 post, (2)当显式添加[HttpGet]传给System.Web.Mvc.Ajax的AjaxOptions()的HttpMethod只能为 get, (3)当都没有显式添加[HttpPost]和[HttpGet]传给System.Web.Mvc.Ajax的AjaxOptions()的HttpMethod可以为 get也可以为post, 第三步添加要承载更新页面的html元素 也就是添加添加AjaxOptionsd对象的UpdateTargetId 参数指定的Id为restaurantList的html元素 这里在页面中添加id为restaurantList的div ? 1 2 div idrestaurantList... /div 第四步可选为增强用户体验添加AjaxOption对象的LoadingElementId参数指定的Id为loding的html元素 ? 1 2 3 4 5 6 new AjaxOptions() { .... LoadingElementId loding, LoadingElementDuration 2000 })) 这里在页面中添加id为loding的元素添加了包含一个动态的刷新图片div cshtml文件中添加 ? 1 2 3 div idloding hiddenhidden img classsmallLoadingImg srcUrl.Content(~/Content/images/loading.gif) / /div 1.2 System.Web.Mvc.Ajax.ActionLink System.Web.Mvc.Ajax.ActionLink与System.Web.Mvc.Ajax.BeginForm用法基本一致 第一步使用System.Web.Mvc.Ajax.ActionLink创建超链接 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 *Html.ActionLink(item.Name, Details, Reviews,new{id item.Id},new {class isStar})* *a classisStar hrefUrl.Action(Details,Reviews, new {id item.Id})item.Name/a* *使用Ajax的超链接* { var ajaxOptions new AjaxOptions() { HttpMethod post, //Url Url.Action(), UpdateTargetId renderBody, InsertionMode InsertionMode.Replace, LoadingElementId loding, LoadingElementDuration 2000 }; Ajax.ActionLink(item.Name, Details, Reviews, new { id item.Id }, ajaxOptions, new {classisStar}) } 对应生成的最终html为 ? 1 2 3 4 5 6 7 8 a classisStar href/Reviews/Details/1 data-ajax-update#renderBody data-ajax-modereplace data-ajax-methodpost data-ajax-loading-duration2000 data-ajax-loading#loding data-ajaxtrue 第二步定义出来响应超链接的Action ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 /// summary ///关于使用System.Web.Mvc.Ajax的说明 /// Controller的Action方法 /// 1当显式添加[HttpPost]传给System.Web.Mvc.Ajax的AjaxOptions()的HttpMethod只能为 post, /// 2当显式添加[HttpGet]传给System.Web.Mvc.Ajax的AjaxOptions()的HttpMethod只能为 get, /// (3) 当都没有显式添加[HttpPost]和[HttpGet]传给System.Web.Mvc.Ajax的AjaxOptions()的HttpMethod可以为 get也可以为post, /// /summary /// param nameid/param /// returns/returns public ActionResult Details(int id1) { var model (from r in _restaurantReviews where r.Id id select r).FirstOrDefault(); if (Request.IsAjaxRequest()) { return PartialView(_RestaurantDetails, model); } return View(model); } 第三步定义承载更新部分的html元素 ? 1 2 3 div idrenderBody .... /div 第四步可选为增强用户体验添加AjaxOptionsd对象的LoadingElementId参数指定的Id为loding的html元素 与1.1第四步相同。 二、手工打造自己的“非介入式”Javascript” 第一步添加表单 ? 1 2 3 4 5 6 7 8 9 10 11 * --------------------------------------------------------- 需要手工为Form添加些属性标签用于锚点 模仿MVC框架的构建自己的“非介入式Javascript”模式 -------------------------------------------------------* form methodpost actionUrl.Action(Index) data-otf-ajaxtrue data-otf-ajax-updatetarget#restaurantList input typesearch namesearchItem / input typesubmit value按名称搜索 / /form 生成的form为 ? 1 2 3 4 5 form data-otf-ajax-updatetarget#restaurantList data-otf-ajaxtrue action/Reviews methodpost novalidatenovalidate 第二步添加处理表单的Action: 这里与1.1的第二步一样。 第三步添加Js处理表单 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 $(function () { var ajaxFormSubmit function() { var $form $(this); var ajaxOption { type: $form.attr(method), url: $form.attr(action), data: $form.serialize() }; $.ajax(ajaxOption).done(function(data) { var updateTarget $form.attr(data-otf-ajax-updatetarget); var $updateTarget $(updateTarget); if ($updateTarget.length 0) { var $returnHtml $(data); $updateTarget.empty().append(data); $returnHtml.effect(highlight); } }); return false; }; $(form[data-otf-ajaxtrue]).submit(ajaxFormSubmit); }); 注意 所谓的“非介入式Javascript”模式是指假如没有添加这一步表单照样能被处理只是没用到Ajax而已。 如对本文有疑问请提交到交流社区广大热心网友会为你解答 点击进入社区 您可能感兴趣的文章: jQuery使用ajaxSubmit()提交表单示例jquery中ajax使用error调试错误的方法基于jquery的$.ajax async使用jquery.ajax之beforeSend方法使用介绍使用jquery的ajax需要注意的地方dataType的设置jquery序列化form表单使用ajax提交后处理返回的json数据跨域请求之jQuery的ajax jsonp的使用解惑Ajax的使用代码解析Ajax的使用四大步骤AJAX的使用方法详解 http://www.jb51.net/article/72660.htm转载于:https://www.cnblogs.com/wanzhongjun/p/6864100.html
