巨大转变!ASP.NET MVC2调用AJAX新特征

  在ASP.NET MVC编程中使用AJAX功能是非常简单的。借助于JQuery框架,你还可以增加其他的优秀特征并且使AJAX调用特别简单。本文中,我们将探讨这方面的编程内容。

  一、检测一个AJAX请求

  在Web表单中,创建AJAX请求典型的方法是使用一个更新面板。当更新面板回寄时,ScriptManager提供一个方法(通过其isInAsyncPostBack属性)来检测服务器上的AJAX回寄。ASP.NET MVC也提供了类似的机制。因为AJAX能够调用行为方法,所以我们需要一种方法来检测一个请求是否是标准的GET/POST操作,还是一个AJAX请求。

  我们可以使用一个有用的扩展方法来实现上述检测,这只需调用Request.IsAjaxRequest()方法即可。我们知道,一个Web请求是一个针对HttpRequestBase(针对.NET框架HttpRequest对象的一个包装器)的引用,它也是一个控制器的属性。故而,我们可以使用IsAjaxRequest()方法来检查请求信息,以确保正在向服务器发出一个AJAX请求。通过这种方式,我们可以正确地检测出当前请求是一个ASP.NET请求还是一个jQuery请求。

  要实现上述这一点,只需要在你的行为方法中添加下面的代码。

  清单1—检测一个AJAX请求

if (Request.IsAjaxRequest())

//AJAX request

else

//Standard request

  为什么检测一个AJAX请求如此重要呢?因为根据行为方法所实现的任务我们处理AJAX请求的方式不同于标准的请求。我们很快会看到这样的例子。

  二、使用Ajax表单

  微软提供了一组AJAX扩展集,其中之一便是Ajax表单。通过此Ajax表单,可以向服务器发出异步请求并提供相关的响应内容。客户端所有的AJAX调用机制都包含在一个MicrosoftMVCAjax脚本内。清单2给出了一个简单的Ajax表单示例。

  清单2:使用AJAX.BeginForm扩展

<div id="customresponse"></div>

<% using (Ajax.BeginForm("AjaxCustom", new AjaxOptions

{ UpdateTargetId = "customresponse" })){%>

<div>

Name: <%= Html.TextBox("CustomName")%>

</div>

<div>

Value: <%= Html.TextBox("CustomValue")%>

</div>

<input type="submit" value="save" />

<%}%>

  上述AJAX表单处理回寄的细节,并使用JavaScript以异步方式执行,而不是执行一个到服务器端的标准HTTP回寄。在清单2中,表单把数据回寄到AjaxCustom行为方法,并把表单的值传递过去,最后得到返回的响应内容并以某种方式来使用这个结果。

  接下来,在行为方法中你可以使用非常现成的Request.IsAjaxRequest方法:

  清单3:处理可能的Ajax回寄并提供响应

[HttpPost]

public ActionResult AjaxCustom(FormCollection post)

{

if (Request.IsAjaxRequest())

return Content("Success");

else

return RedirectToAction("Index");

}

  如果是一个AJAX请求,则把一个特殊的字符串传递回客户端,并进行相应处理。这一行为是受AjaxOptions集合控制的。上面的清单2中把字符串“Success”注入到一个id为“customresponse”的HTML元素中。如果由于某种原因,该请求不是来自一个AJAX调用,行为方法仍可以正常工作—重定向到另一个视图中。我们将在以后的文章中讨论这些情况。

  上面我只是简要地介绍了使用MS Ajax的情况,因为我相信最好的AJAX方案是当属使用JQuery。

  三、使用JQuery

  jQuery功能非常强大,这种力量主要来自它的简单性以及它能够让你完全控制整个过程。JQuery能够通过简单的几行客户端代码就可以对一个MVC行为方法执行一个GET或POST操作。回调的结果直接传递给你手中,这意味着你可以全面控制响应操作,而且这一点是很容易做到的。在jQuery中,我们可以使用以下的形式把表单数据发布到服务器:

  清单4:回寄表单数据

var form = $("#form1");

$.post(form.attr("action"), form.serialize(), function(data){

//Do something with data

});

  一个行为方法的响应可以是以下类型之一:

  • Content("Success")—以一个字符串方式返回内容,然后你可以把它注入到HTML文档中。

      • Json(new{ a = 1 })—返回一个JSON对象。

      • View("Action")—以HTML字符串方式返回一个视图或部分视图。

  上述这些选项都非常棒,因为jQuery能够让你从根本上进行数据控制,你可以使用这些数据来注入到用户界面甚至完全取代UI内容。让我们分析针对上述选择的各个对应的例子。我构造了一个简单的控制器,它能够返回上述每一种类型的内容。

  清单5:返回上述每一种类型的内容示例

public class JQueryController : Controller

{

public ActionResult GettingContent()

{

return Content("This is my content");

}

public ActionResult GettingJson()

{

return Json(new { key = 1,value = "First" }, JsonRequestBehavior.AllowGet);

}

public ActionResult GettingPartial()

{

return PartialView("TestPartial");

}

public ActionResult Index()

{

return View();

}

}

  我们的客户端会使用jQuery来使用上面定义的这些行为方法,每一个对应使用一个单独的AJAX行为方法。在前面的JQuery调用中,执行了一个回寄,但我特意要求使用GET操作。一个GET和POST操作非常类似,除了POST传递的是一个序列值的集合之外。

  清单6:正在加载新数据

<script type="text/javascript">

$(document).ready(function(){

$.getJSON('<%= Url.Action("GettingJson")%>', function(obj){

$('#jsoninject').html(obj.key.toString()+" = "+ obj.value.toString());

});

$.get('<%= Url.Action("GettingContent")%>', function(obj){

$('#contentinject').html(obj);

});

$('#partialinject').load('<%= Url.Action("GettingPartial")%>');

});

</script>

  这些方法中,get和load工作非常相似,它们都把内容直接加载到HTML元素中。其中,load方法能够直接注入而不用回调,但get能够使你更多地控制数据的处理。

  在文档完全加载后,上述代码将产生以下HTML输出内容。

<H1>Injecting JSON Object</H1>

<DIV id=jsoninject>1 = First</DIV>

<H1>Injecting Content</H1>

<DIV id=contentinject>This is my content</DIV>

<H1>Injecting Partial</H1>

<DIV id=partialinject>

<DIV>This is my partial view. </DIV></DIV>

  四、使用属性控制请求

  当向服务器发出请求时,一切有关请求的内容都被检查(头部、正文,等等)。这是由AJAX请求决定的。根据你的应用程序的复杂程度,你可能想建立单独的行为方法,一个针对处理AJAX请求,另一个针对其余的请求。因此,一个索引视图可能会对应一个AjaxIndex行为方法来处理Ajax请求,而另外存在一个Index行为方法来处理其余的请求。为此,我们可以利用过滤器属性来确保调用正确的行为方法。

  下面给出的两个类都使用了一个过滤器属性,分别允许AJAX请求和标准的HTTP GET/POST请求。

  清单7:使用AJAX/标准请求过滤属性

public class AjaxOnlyRequestAttribute : ActionMethodSelectorAttribute

{

#region " Methods "

public override bool IsValidForRequest(ControllerContext

controllerContext, MethodInfo methodInfo)

{

return controllerContext.HttpContext.Request.IsAjaxRequest();

}

#endregion

}

public class StandardOnlyRequestAttribute : ActionMethodSelectorAttribute

{

#region " Methods "

public override bool IsValidForRequest(ControllerContext

controllerContext, MethodInfo methodInfo)

{

return !controllerContext.HttpContext.Request.IsAjaxRequest();

}

#endregion

}

  上面这些过滤器属性属于行为方法选择器类型。这意味着,当MVC框架试图匹配一个到行为方法的请求时,它将执行如下过程:

  1.尝试查找一个名字为Index的行为方法。

  2.是否查找完所有现有的规则?—是。

  3.检查过滤器—只存在一个Ajax过滤器。

  4.这是一个AJAX请求吗?—不是。

  5.忽略此行为方法。

  如果在该过程结束时,不存在任何行为方法,则将从服务器端返回资源没有发现的响应。

  五、小结

  在本文中,我们已经看到了MS AJAX和jQuery框架多种使用方法,而且了解到在MVC应用程序中使用AJAX支持是非常方便的。虽然这些功能也存在于Web表单框架下,但jQuery框架使你的MVC程序中实现AJAX调用更为容易。此外,自定义过滤器属性可以帮助你确定每一个请求相应的行为方法,或者可以使用Request.IsAjaxRequest方法直接检测请求类型。

【相关文章】:

巨大转变!ASP.NET MVC2行为方法新改进

巨大转变!教你使用ASP.NET MVC2新功能

巨大转变!ASP.NET MVC2用户界面新实践

时间: 2024-09-20 15:32:10

巨大转变!ASP.NET MVC2调用AJAX新特征的相关文章

一起谈.NET技术,巨大转变!ASP.NET MVC2调用AJAX新特征

在ASP.NET MVC编程中使用AJAX功能是非常简单的.借助于JQuery框架,你还可以增加其他的优秀特征并且使AJAX调用特别简单.本文中,我们将探讨这方面的编程内容. 一.检测一个AJAX请求 在Web表单中,创建AJAX请求典型的方法是使用一个更新面板.当更新面板回寄时,ScriptManager提供一个方法(通过其isInAsyncPostBack属性)来检测服务器上的AJAX回寄.ASP.NET MVC也提供了类似的机制.因为AJAX能够调用行为方法,所以我们需要一种方法来检测一个

一起谈.NET技术,巨大转变!ASP.NET MVC2行为方法新改进

在 上一篇文章中,我们看到了构建用户界面的基本实现.但在现实世界中,我们需要使用更加复杂的方法来开发出更复杂的用户界面.例如,用户不希望点击应用程序中的多个链接才浏览到他们想要的信息,他们希望能够很方便的在一个视图中便取得他们要求的所有信息. 在ASP.NET MVC中,我们仍然可以使用用户控件来创建一个应用程序中的可重用组件-它们被称为部分视图(Partial View).自从ASP.NET MVC 1.0始就提供了这一支持.在本文中,我们还要使用这种方法,并且结合MVC 2.0中提供的一个新

巨大转变!ASP.NET MVC2行为方法新改进

在 上一篇文章中,我们看到了构建用户界面的基本实现.但在现实世界中,我们需要使用更加复杂的方法来开发出更复杂的用户界面.例如,用户不希望点击应用程序中的多个链接才浏览到他们想要的信息,他们希望能够很方便的在一个视图中便取得他们要求的所有信息. 在ASP.NET MVC中,我们仍然可以使用用户控件来创建一个应用程序中的可重用组件-它们被称为部分视图(Partial View).自从ASP.NET MVC 1.0始就提供了这一支持.在本文中,我们还要使用这种方法,并且结合MVC 2.0中提供的一个新

巨大转变!教你使用ASP.NET MVC2新功能

在本系列文章中,我们将针对微软最新推出的ASP.NET MVC 2.0中提供的新特征相关的基础性编程问题进行全面的探讨.在本文(第一篇)中,我们将通过对比ASP.NET MVC框架与ASP.NET Web表单框架的方式来学习ASP.NET MVC 2.0提供的新功能. 在2010年4月,微软正式发布了Visual Studio的下一个版本2010.ASP.NET MVC 2.0也作为其中的一个新框架成员一同发行.ASP.NET MVC如今已是一个成熟的产品,采用了全新的设计,大大提高了开发效率.

用ASP.NET 1.1 新特征防止Script攻击

asp.net|攻击   网站的安全,很多时候,几乎代表了一个单位网络的安全.对于将网站作为企业对外形象的企业或者政府而言,网站安全更加重要.现在很多网站都安装了防火墙等安全设备,可是,一些简单的进攻,反而颇为让人伤脑筋.比如,通过网站,提交恶意代码,这就是比较难以防范的一种进攻,一个比较简单的具体举例,在需要用户提交EMAil地址的数据项,如果用户提交以下信息:<SCRIPT>alert("hello from script")</SCRIPT>,结果会怎样呢

ASP.NET 2.0 AJAX中Webservice调用方法示例

ajax|asp.net|web|示例 ASP.NET 2.0 AJAX中能够在客户端js中很方便地调用服务器Webservice,以下为一些调用的示例.笔者安装的ASP.NET 2.0 AJAX 版本为AJAX November CTP. 三个示例分别为:1 带参数的WS方法2 不带参数的WS方法3 参数类型为DataTable的WS方法 一.WebMethod注意要点:1 WebMethod类需要添加命名空间 Microsoft.Web.Script.Services,此空间需要引用Micr

ajax的异步请求-asp.net异步调用显示的问题

问题描述 asp.net异步调用显示的问题 我想用Ajax异步调用显示数据库里面的数据,循环显示,本人菜鸟一枚,希望有高手能解答,最好有代码能参考一下.万分感谢. 解决方案 function displayAjax(){while(0){ $.ajax({ url:""/datas/getdatas"" type:""post"" dataType:""json"" success:fu

asp.net 跳转到新页面的锚点 但是因为ajax请求 定位不准

问题描述 asp.net 跳转到新页面的锚点 但是因为ajax请求 定位不准 我要跳转到新页面的锚点 但是加载后 有很多ajax请求(不止一个,一个能在回调函数处理) 回调后会改变容器的高度 我的锚点定位就不准了 这个这么处理啊? 解决方案 再回调完毕后再用location.hash='#锚点名称'来定位,要不定位过了ajax返回数据设置容器高度肯定不准

一起谈.NET技术,ASP.NET MVC2.0在Tab页中实现异步无刷新分页

概述 很多地方都存在以Tab页来呈现数据的方式,比如网易.新浪.搜狐.QQ等知名的门户网站的首页,还有大家熟知的博客园首页,都是用了tab页来显示数据.大家之所以喜欢用Tab,因为它能大大的增加显示数据的空间,能在固定的空间中显示更多的数据.分页也是为了方便数据的显示,在应用系统中必不可少.这篇文章使用Jquery在ASP.NET MVC中使用Tab页,以及在Tab页中实现异步无刷新的分页功能.估计这个大家都会用得到的. 在ASP.NET MVC中实现分页,在之前的一篇博文:ASP.NET MV