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

简介:   在ASP.NET MVC编程中使用AJAX功能是非常简单的。借助于JQuery框架,你还可以增加其他的优秀特征并且使AJAX调用特别简单。本文中,我们将探讨这方面的编程内容。  一、检测一个AJAX请求  在Web表单中,创建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用户界面新实践

目录
相关文章
|
1月前
|
XML 前端开发 JavaScript
AJAX 前端开发利器:实现网页动态更新的核心技术
**AJAX** 允许网页在不刷新的情况下更新内容,实现异步与服务器交换数据。通过JavaScript的XMLHttpRequest对象,可发送和接收数据。当用户触发事件(如点击),函数向服务器发送GET请求,服务器响应后更新指定HTML部分。AJAX并非编程语言,而是利用浏览器内置对象、JavaScript和DOM技术。核心是XMLHttpRequest对象,它有多种方法(如`open()`和`send()`)和属性(如`onreadystatechange`、`readyState`和`status`)来处理请求和响应。
77 2
AJAX 前端开发利器:实现网页动态更新的核心技术
|
1月前
|
设计模式 前端开发 JavaScript
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
25 0
|
1月前
|
XML JSON 前端开发
JavaWeb----Ajax技术
JavaWeb----Ajax技术
63 0
|
1月前
|
开发框架 前端开发 JavaScript
ASP.NET AJAX使用方法概述(三)
ASP.NET AJAX使用方法概述(三)
20 1
|
4天前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
1月前
|
开发框架 缓存 前端开发
安装ASP.NET AJAX (一安装)
安装ASP.NET AJAX (一安装)
24 0
|
1月前
|
前端开发 搜索推荐 安全
AJAX和CSR(客户端渲染)是Web开发中常用的两种技术
【5月更文挑战第8天】AJAX提升用户体验,减轻服务器压力,但对搜索引擎不友好且增加开发复杂度,易引发安全问题。CSR提供快速响应和交互性,改善用户体验,但首屏加载慢,搜索引擎支持不足,同样面临安全挑战。两者各有适用场景,需按项目需求选择。
25 0
|
1月前
|
XML 前端开发 JavaScript
【JavaScript技术专栏】JavaScript网络请求与Ajax技术
【4月更文挑战第30天】Ajax是Web开发中实现动态数据更新的关键技术,允许不刷新页面即从服务器获取数据。它结合了HTML/CSS、DOM、XML/JSON和JavaScript。`XMLHttpRequest`是传统的Ajax实现方式,而`fetch` API是现代、简洁的替代选项。Ajax应用实例展示了如何使用fetch在搜索框输入时异步获取并显示结果,提升了用户体验。掌握这些技术对前端开发者至关重要。
|
1月前
|
开发框架 前端开发 JavaScript
JavaScript云LIS系统源码ASP.NET CORE 3.1 MVC + SQLserver + Redis医院实验室信息系统源码 医院云LIS系统源码
实验室信息系统(Laboratory Information System,缩写LIS)是一类用来处理实验室过程信息的软件,云LIS系统围绕临床,云LIS系统将与云HIS系统建立起高度的业务整合,以体现“以病人为中心”的设计理念,优化就诊流程,方便患者就医。
35 0
|
1月前
|
JSON 前端开发 JavaScript
JavaScript原生实现AJAX技术详解
【4月更文挑战第22天】本文详细介绍了使用原生JavaScript实现AJAX技术,包括基本原理和步骤。AJAX借助`XMLHttpRequest`对象实现异步通信,允许网页在不刷新情况下与服务器交换数据。文中提供示例展示了如何创建请求、设置回调函数、处理响应数据以及设置请求头和发送不同类型的数据。此外,还讨论了跨域问题及其解决方案,如CORS和JSONP。掌握这些基础知识对前端开发者至关重要,尽管现代框架提供了更高级的抽象。

相关实验场景

更多