Asp.Net MVC Unobtrusive Ajax

1.   Unobtrusive JavaScript介绍

  说到Unobtrusive Ajax,就要谈谈UnobtrusiveJavaScript了,所谓Unobtrusive JavaScript即为非侵入式JavaScript(即将Js代码与html代码分离,方便阅读与维护),是目前在Web开发领域推行的一种思想。

2.   在ASP.NET MVC中的应用

2.1 概述

使用VS新建一个ASP.NET MVC项目就会在~/Scripts/目录下面看到很多以unobtrusive结尾的javascript脚本文件,如:

  今天的主角是ASP.NET MVC Unobtrusive Ajax,那么大家应该可以猜到主要还是jquery.unobtrusive-ajax.js和jquery.unobtrusive-ajax.min.js这两个文件。这就是ASP.NETMVC实现非侵入式Ajax的主要手段,若要在项目中使用Unobtrusive Ajax,那么一定要用到这两个文件中的一个,至于具体用哪个就不多废话了。下面来看看Unobtrusive Ajax在ASP.NET MVC中的使用。

ASP.NET MVC对BeginForm的使用提供了11个重载的版本,但是细细观察11个重载版本就会发现,这些重载中共同点是有一个AjaxOptions类型的参数,除此之外Ajax辅助方法的BeginForm和Html辅助方法的BeginForm相同参数版本之间并无差别,而这个AjaxOptions就是ASP.NET MVC实现Ajax方法依据。

    AjaxOptions的主要属性有:

上表中对参数进行了分组和着色以示区分其在BeginForm中的作用:

  • Url和HttpMethod算是Ajax请求的基础了,指示了Ajax请求的Url路径及所采用的Http方法;
  • UpdateTargetId和InsertionMode是对请求成功后回显的设置,正如上例所示的那样;
  • OnBegin、OnComplete、OnFailure以及OnSuccess四个属性则是对Ajax请求过程JavaScript回调的设置,是具体的JavaScript语句或者是一个JavaScript函数;
  • Confirm则是在发起Ajax请求前页面进行确认的消息,页面通过window.confirm显示确认信息;
  • LoadingElementDuration和LoadingElementId这两个则属于锦上添花的东西了,用于在请求过程中显示页面动态请求情况,比如一个‘Loading…’的文字或者一个显示进度的图片。

设置说明:

  • Url:默认为form的action,上面提到的jquery.unobtrusive-ajax.js两段代码中对其进行了设置,如果有设置data-ajax-url属性,则取data-ajax-url属性作为ajax请求的url,否则取<form>的action属性(如果是链接的话,则取的是<a>的href属性)。
  • HttpMethod:默认值为GET,这部分的设置和AjaxOptions.Url是相似的,对于Form来说优先级依次为data-ajax-method属性,form.action,"GET",对于Link来说就是"GET"。
  • UpdateTargetId:原则上应是需要更新的html元素的id(MVC的Aajx辅助方法会自动在生成的data-ajax-update属性前面插入字符‘#‘,参看前面Ajax.BeginForm生成的Html代码),但是细细查看代码,你会发现此处可为多个html元素,只要第一个不加#,之后的依次加上即可,如UpdateTargetId ="div1,#div2, #div3",可实现多个div同时更新,甚至于后面的可以是任何jQuery支持的css selector。

2.2 示例

  为了便于观察测试效果,在新建的MVC项目的HomeController中增加如下Action:

        public ActionResult Index()
        {
            return View();
        }

        public string s(string q)
        {
            return "The Query String is : " + q;
        }

  其中Action ‘Index’用于显示Ajax操作页面,Action ‘s’用来响应Ajax请求结果。Index页面的主要内容如下:

 1 @using (Ajax.BeginForm(
 2     new AjaxOptions
 3     {
 4         Url = "Home/s",
 5         HttpMethod = "GET",
 6         UpdateTargetId = "searchResult",
 7         InsertionMode = InsertionMode.Replace
 8     }))
 9 {
10     <input type="text" name="q" />
11     <input type="submit" value="查询" />
12 }
13
14 <div id="searchResult"></div>

  其作用就是生成一个表单,提交这个表单的时候执行异步的Ajax请求,并将请求结果回显到id为searchResult的div元素内。运行如下:

参考资料:

ASP.NET MVC Unobtrusive Ajax 原理剖析

原文地址:https://www.cnblogs.com/yscit/p/10419057.html

时间: 2024-10-02 06:22:48

Asp.Net MVC Unobtrusive Ajax的相关文章

ASP.NET MVC 实现AJAX跨域请求方法《1》

ASP.NET MVC 实现AJAX跨域请求的两种方法 通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据的加载,例如Google. 在ASP.Net MVC 框架里实现跨域的AJAX请求有几种方式可以实现,以下就介绍常用的两种方法. 1.     发送JSONP请求 客户端: jQuery对发送JSONP请求有很好的支持,客户端通过. ajax() 函数发送请求,其中需要制定 dataType 为"j

ASP.NET MVC 实现 AJAX 跨域请求

ASP.NET MVC 实现AJAX跨域请求的两种方法 和大家分享下Ajax 跨域的经验,之前也找了好多资料,但是都不行,后来看到个可行的修改了并测试下 果然OK了   希望对大家有所帮助! 通常发送AJAX请求都是在本域内完成的,也就是向本域内的某个URL发送请求,完成部分页面的刷新.但有的时候需要向其它域发送AJAX请求,完成数据的加载,例如Google. 在ASP.NET MVC 框架里实现跨域的AJAX请求有几种方式可以实现,以下就介绍常用的两种方法. 1.     发送JSONP请求

用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]

Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件的 Javascript 组件. This project attempts to achieve a user-friendly file-uploading experience over the web. It's built as a Javascript plugin for developers looking to incorporate file-uploading int

asp.net mvc 使用ajax请求 控制器 (PartialViewResult)分部的action,得到一个分部视图(PartialView)的HTML,进行渲染

在asp.net mvc 使用ajax请求获取数据的时候,我们一般是返回json或者xml,然后解析这些数据进行渲染,这样会比较麻烦,可以请求一个 分部action,返回一个分部视图 直接可以渲染,不需要解析这一步. 下面是示例: 控制器类: public class HomeController : Controller { // // GET: /Home/ public ActionResult Index() { return View(); } [HttpPost] public Pa

ASP.NET MVC的Ajax.ActionLink 的HttpMethod=&quot;Get&quot; 一个重复请求的BUG

这段时间使用BootStrap+Asp.net Mvc5开发项目,Ajax.ActionLink遇到一个重复提交的BUG,代码如下: 1 @model IList<WFModel.WF_Temp> 2 @{ 3 Layout = null; 4 } 5 6 <!DOCTYPE html> 7 8 <html> 9 <head> 10 <meta name="viewport" content="width=device-w

ASP.NET MVC下Ajax.BeginForm方式无刷新提交表单

有时候,不得不考虑到以下场景问题: 数据库表字段会频繁更改扩展,而流行的重业务的js框架过于依赖json数据接口,导致的问题是,数据库表更改 -> 数据接口更改 -> 前段框架逻辑更改... 一不小心就陷入坑坑洼洼. 这样的话,原来纯ASP.NET MVC绑定的方式,还是可以一用的,因为该方式不用再为那么多js代码烦恼. 不好意思,前面自说自话啊,直接上干货代码了———— Ajax.BeginForm @{ Layout = null; var ajaxOptions = new AjaxOp

asp.net mvc 使用Ajax调用Action 返回数据【转】

使用asp.net mvc 调用Action方法很简单. 一.无参数方法. 1.首先,引入jquery-1.5.1.min.js 脚本,根据版本不同大家自行选择. <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> 2.在Controllers中书写前台Ajax需要调用的Action,比如:

Asp.net mvc 使用Ajax调用Action 返回数据。

使用asp.net mvc 调用Action方法很简单. 一.无参数方法. 1.首先,引入jquery-1.5.1.min.js 脚本,根据版本不同大家自行选择. <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> 2.在Controllers中书写前台Ajax需要调用的Action,比如:

浅析Asp.net MVC 中Ajax的使用

在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.