在Asp.net MVC中,我们能非常方便的使用Ajax。这篇文章将介绍三种Ajax使用的方式,分别为原始的Ajax调用、Jquery、Ajax Helper。分别采用这三种方式结合asp.net mvc去实现一个史上最简单的留言板。
首先看一下原始的Ajax的调用的:
定义CommentController,代码如下:
publicclassCommentController : Controller
{privateIList_comments=newList();publicActionResult Index()
{returnView();
}publicvoidAddCommentServer()
{stringcomment=Request["comment"].ToUpper();
_comments.Add("
"+comment+"");Response.ContentType="text/html";
Response.Write(string.Join("\n", _comments.ToArray()));
}
}
在Asp.net MVC中添加一个custom_ajax.js,加入下面使用ajax的脚本代码,调用AddCommentServer方法。
function getXmlHttpRequest() {
var xhr;//check for IE implementation(s)if(typeofActiveXObject!='undefined') {try{
xhr=newActiveXObject("Msxml2.XMLHTTP");
}catch(e) {
xhr=newActiveXObject("Microsoft.XMLHTTP");
}
}elseif(XMLHttpRequest) {//this works for Firefox, Safari, Operaxhr=newXMLHttpRequest();
}else{
alert("对不起,你的浏览器不支持ajax");
}returnxhr;
}
function getMessage() {//get our xml http request objectvar xhr=getXmlHttpRequest();//prepare the requestxhr.open("GET","Comment/AddCommentServer?comment="+document.getElementById("Comment").value,true)//setup the callback functionxhr.onreadystatechange=function() {//readyState 4 means we're doneif(xhr.readyState!=4)return;//populate the page with the resultdocument.getElementById('comments').innerHTML=document.getElementById('comments').innerHTML+xhr.responseText;
};//fire our requestxhr.send(null);
}
在View中引入此脚本,创建一个简单的表单,并添加触发的代码:
Comments
Add Comment效果如下:
第二种方式:利用Jquery:
在控制器中添加代码IndexJquery方法和AddComment方法的代码,CommentController代码如下所示:
publicclassCommentController : Controller
{privateIList_comments=newList();publicActionResult Index()
{returnView();
}publicActionResult IndexJquery()
{returnView();
}publicActionResult AddComment(stringcomment)
{
_comments.Add("
"+comment+"");returnContent(string.Join("\n", _comments.ToArray()));}publicvoidAddCommentServer()
{stringcomment=Request["comment"].ToUpper();
_comments.Add("
"+comment+"");Response.ContentType="text/html";
Response.Write(string.Join("\n", _comments.ToArray()));
}
}
根据IndexJquery,创建View表单IndexJquery.aspx:
Comments
Add Comment在View中引用Jquery:
添加下面脚本:
});
});
function hijack(form, callback, format) {
$("#indicator").show();
$.ajax({
url: form.action,
type: form.method,
dataType: format,
data: $(form).serialize(),
completed: $("#indicator").hide(),
success: callback
});
}
function update_sessions(result) {//clear the form$("form.hijax")[0].reset();
$("#comments").append(result);
}
效果:与方式一效果一样。
第三种方式:Ajax Helper
将最简单的留言板修改成Ajax Helper的方式。
1、首先了解一下Ajax Helper下面四种方法。
a、Ajax.ActionLink():它将渲染成一个超链接的标签,类似于Html.ActionLink()。当它被点击之后,将获取新的内容并将它插入到HTML页面中。
b、Ajax.BeginForm():它将渲染成一个HTML的Form表单,类似于Html.BeginForm()。当它提交之后,将获取新的内容并将它插入到HTML页面中。
c、Ajax.RouteLink():Ajax.RouteLink()类似于Ajax.ActionLink()。不过它可以根据任意的routing参数生成URL,不必包含调用的action。使用最多的场景是自定义的IController,里面没有action。
d、Ajax.BeginRouteForm():同样Ajax.BeginRouteForm()类似于Ajax.BeginForm()。这个Ajax等同于Html.RouteLink()。
这个例子中使用Ajax.BeginForm(),下面具体了解Ajax.BeginForm()的参数。看下面代码:
{
HttpMethod="POST",
UpdateTargetId="comments",
InsertionMode=InsertionMode.InsertAfter
})) {%>
actionName:AddComment(action的名字)
controllerName:CommentController(Controller的名字)
ajaxOptions:
HttpMethod:Ajax的请求方式,这里为POST
UpdateTargetId :Ajax请求的结果显示的标签的ID,这里为comments
InsertionMode:将Ajax结果插入页面的方式,这里将ajax的结果放置到comments的后面
2、实现:
在CommentController中添加IndexAjaxHelp方法。
publicActionResult IndexAjaxHelp()
{returnView();
}
根据IndexAjaxHelp生成View表单IndexAjaxHelp.aspx,定义表单:
Comments
{
HttpMethod="POST",
UpdateTargetId="comments",
InsertionMode=InsertionMode.InsertAfter
})) {%>Add Comment
要在此View中添加下面两个脚本文件:
这样就行了,我们发现比用Jquery方便很多,但是使用Jquery将灵活很多。
3、效果:和方式一样。
总结:本文非常的简单,在asp.net mvc中实现了3中ajax的调用方式,实现了一个最简单的留言板程序。推荐使用Jquery和Ajax Helper这两种。Ajax Helper使用非常简单,Jquery比较灵活。
更新:三种方式都实现了一个最简单的留言板程序
参考:
ASP.NET MVC 2 In Action
Pro ASP.NET MVC 2 Framework, Second Edition