在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 requestelse//Standard request
为什么检测一个AJAX请求如此重要呢?因为根据行为方法所实现的任务我们处理AJAX请求的方式不同于标准的请求。我们很快会看到这样的例子。
二、使用Ajax表单
微软提供了一组AJAX扩展集,其中之一便是Ajax表单。通过此Ajax表单,可以向服务器发出异步请求并提供相关的响应内容。客户端所有的AJAX调用机制都包含在一个MicrosoftMVCAjax脚本内。清单2给出了一个简单的Ajax表单示例。
清单2:使用AJAX.BeginForm扩展
{ UpdateTargetId="customresponse"})){%>
上述AJAX表单处理回寄的细节,并使用JavaScript以异步方式执行,而不是执行一个到服务器端的标准HTTP回寄。在清单2中,表单把数据回寄到AjaxCustom行为方法,并把表单的值传递过去,最后得到返回的响应内容并以某种方式来使用这个结果。
接下来,在行为方法中你可以使用非常现成的Request.IsAjaxRequest方法:
清单3:处理可能的Ajax回寄并提供响应
[HttpPost]publicActionResult AjaxCustom(FormCollection post)
{if(Request.IsAjaxRequest())returnContent("Success");elsereturnRedirectToAction("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:返回上述每一种类型的内容示例
publicclassJQueryController : Controller
{publicActionResult GettingContent()
{returnContent("This is my content");
}publicActionResult GettingJson()
{returnJson(new{ key=1,value="First"}, JsonRequestBehavior.AllowGet);
}publicActionResult GettingPartial()
{returnPartialView("TestPartial");
}publicActionResult Index()
{returnView();
}
}
我们的客户端会使用jQuery来使用上面定义的这些行为方法,每一个对应使用一个单独的AJAX行为方法。在前面的JQuery调用中,执行了一个回寄,但我特意要求使用GET操作。一个GET和POST操作非常类似,除了POST传递的是一个序列值的集合之外。
清单6:正在加载新数据
$.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")%>');
});
这些方法中,get和load工作非常相似,它们都把内容直接加载到HTML元素中。其中,load方法能够直接注入而不用回调,但get能够使你更多地控制数据的处理。
在文档完全加载后,上述代码将产生以下HTML输出内容。