在Asp.net MVC中，我们能非常方便的使用Ajax。这篇文章将介绍三种Ajax使用的方式，分别为原始的Ajax调用、Jquery、Ajax Helper。分别采用这三种方式结合asp.net mvc去实现一个史上最简单的留言板。
首先看一下原始的Ajax的调用的
定义CommentController，代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<span style="color:blue;">public class </span><span style="color:#2B91AF;">CommentController </span>: <span style="color:#2B91AF;">Controller</span>{ <span style="color:blue;">private </span><span style="color:#2B91AF;">IList</span><<span style="color:blue;">string</span>> _comments = <span style="color:blue;">new </span><span style="color:#2B91AF;">List</span><<span style="color:blue;">string</span>>(); <span style="color:blue;">public </span><span style="color:#2B91AF;">ActionResult </span>Index() { <span style="color:blue;">return </span>View(); } <span style="color:blue;">public void </span>AddCommentServer() { <span style="color:green;"></span><span style="color:blue;">string </span>comment = Request[<span style="color:#A31515;">"comment"</span>].ToUpper(); _comments.Add(<span style="color:#A31515;">"<li>" </span>+ comment + <span style="color:#A31515;">"</li>"</span>); Response.ContentType = <span style="color:#A31515;">"text/html"</span>; Response.Write(<span style="color:blue;">string</span>.Join(<span style="color:#A31515;">"\n"</span>, _comments.ToArray())); } } |
在Asp.net MVC中添加一个custom_ajax.js，加入下面使用ajax的脚本代码，调用AddCommentServer方法。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<span style="color:blue;">function </span>getXmlHttpRequest() { <span style="color:blue;">var </span>xhr; <span style="color:#006400;">//check for IE implementation(s) </span><span style="color:blue;">if </span>(<span style="color:blue;">typeof </span>ActiveXObject != <span style="color:maroon;">'undefined'</span>) { <span style="color:blue;">try </span>{ xhr = <span style="color:blue;">new </span>ActiveXObject(<span style="color:maroon;">"Msxml2.XMLHTTP"</span>); } <span style="color:blue;">catch </span>(e) { xhr = <span style="color:blue;">new </span>ActiveXObject(<span style="color:maroon;">"Microsoft.XMLHTTP"</span>); } } <span style="color:blue;">else if </span>(XMLHttpRequest) { <span style="color:#006400;">//this works for Firefox, Safari, Opera </span>xhr = <span style="color:blue;">new </span>XMLHttpRequest(); } <span style="color:blue;">else </span>{ alert(<span style="color:maroon;">"对不起，你的浏览器不支持ajax"</span>); } <span style="color:blue;">return </span>xhr; } <span style="color:blue;">function </span>getMessage() { <span style="color:#006400;">//get our xml http request object </span><span style="color:blue;">var </span>xhr = getXmlHttpRequest(); <span style="color:#006400;">//prepare the request </span>xhr.open(<span style="color:maroon;">"GET"</span>, <span style="color:maroon;">"Comment/AddCommentServer?comment=" </span>+ document.getElementById(<span style="color:maroon;">"Comment"</span>).value, <span style="color:blue;">true</span>) <span style="color:#006400;">//setup the callback function </span>xhr.onreadystatechange = <span style="color:blue;">function</span>() { <span style="color:#006400;">//readyState 4 means we're done </span><span style="color:blue;">if</span>(xhr.readyState != 4) <span style="color:blue;">return</span>; <span style="color:#006400;">//populate the page with the result </span>document.getElementById(<span style="color:maroon;">'comments'</span>).innerHTML = document.getElementById(<span style="color:maroon;">'comments'</span>).innerHTML + xhr.responseText; }; <span style="color:#006400;">//fire our request </span>xhr.send(<span style="color:blue;">null</span>); } |
在View中引入此脚本，创建一个简单的表单，并添加触发的代码：
|
1 |
<span style="color:blue;"><</span><span style="color:maroon;">asp</span><span style="color:blue;">:</span><span style="color:maroon;">Content </span><span style="color:red;">ID</span><span style="color:blue;">="Content2" </span><span style="color:red;">ContentPlaceHolderID</span><span style="color:blue;">="MainContent" </span><span style="color:red;">runat</span><span style="color:blue;">="server"> <</span><span style="color:maroon;">h4</span><span style="color:blue;">></span>Comments<span style="color:blue;"></</span><span style="color:maroon;">h4</span><span style="color:blue;">> <</span><span style="color:maroon;">ul </span><span style="color:red;">id</span><span style="color:blue;">="comments"> </</span><span style="color:maroon;">ul</span><span style="color:blue;">> </span><span style="background:yellow;"><%</span><span style="color:blue;">= </span>Html.TextArea(<span style="color:#A31515;">"Comment"</span>, <span style="color:blue;">new</span>{rows=5, cols=50}) <span style="background:yellow;">%></span><span style="color:blue;"><</span><span style="color:maroon;">button </span><span style="color:red;">type</span><span style="color:blue;">="submit" </span><span style="color:red;">onclick</span><span style="color:blue;">="getMessage()"></span>Add Comment<span style="color:blue;"></</span><span style="color:maroon;">button</span><span style="color:blue;">> <</span><span style="color:maroon;">span </span><span style="color:red;">id</span><span style="color:blue;">="indicator" </span><span style="color:red;">style</span><span style="color:blue;">="</span><span style="color:red;">display</span><span style="color:blue;">:none"><</span><span style="color:maroon;">img </span><span style="color:red;">src</span><span style="color:blue;">="http://www.cnblogs.com/content/load.gif" </span><span style="color:red;">alt</span><span style="color:blue;">="loading..." /></</span><span style="color:maroon;">span</span><span style="color:blue;">> </</span><span style="color:maroon;">asp</span><span style="color:blue;">:</span><span style="color:maroon;">Content</span><span style="color:blue;">><</span><span style="color:maroon;">asp</span><span style="color:blue;">:</span><span style="color:maroon;">Content </span><span style="color:red;">ID</span><span style="color:blue;">="Content3" </span><span style="color:red;">ContentPlaceHolderID</span><span style="color:blue;">="headContent" </span><span style="color:red;">runat</span><span style="color:blue;">="server"> <</span><span style="color:maroon;">script </span><span style="color:red;">src</span><span style="color:blue;">="http://www.cnblogs.com/Scripts/custom_ajax.js" </span><span style="color:red;">type</span><span style="color:blue;">="text/javascript"></</span><span style="color:maroon;">script</span><span style="color:blue;">></</span><span style="color:maroon;">asp</span><span style="color:blue;">:</span><span style="color:maroon;">Content</span><span style="color:blue;">></span> |
|
1 |
<span style="color:blue;"><span style="color:#000000;"> 效果如下：</span></span> |
|
1 |
<pre class="code"><span style="color:blue;"><a href="http://images.cnblogs.com/cnblogs_com/zhuqil/WindowsLiveWriter/Asp.netmvc2Ajax_EBA5/3_2.png"><img width="900" height="321" title="3" style="border-width:0px;display:inline;" alt="3" src="//images.cnblogs.com/cnblogs_com/zhuqil/WindowsLiveWriter/Asp.netmvc2Ajax_EBA5/3_thumb.png" border="0" /></a></span> |
|
1 |
<span style="color:#000000;"><span style="font-size:24px;"><strong> </strong></span></span> |
|
1 |
<span style="color:#000000;"><span style="font-size:24px;"><strong> </strong></span></span> |
|
1 |
<span style="color:#000000;"><span style="font-size:24px;"><strong>第二种方式：利用Jquery：</strong></span></span> |
|
1 |
<span style="color:#000000;"> 在控制器中添加代码IndexJquery方法和AddComment方法的代码，<span style="color:#2B91AF;">CommentController代码</span>如下所示</span> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<span style="color:blue;">public class </span><span style="color:#2B91AF;">CommentController </span>: <span style="color:#2B91AF;">Controller</span>{ <span style="color:blue;">private </span><span style="color:#2B91AF;">IList</span><<span style="color:blue;">string</span>> _comments = <span style="color:blue;">new </span><span style="color:#2B91AF;">List</span><<span style="color:blue;">string</span>>(); <span style="color:blue;">public </span><span style="color:#2B91AF;">ActionResult </span>Index() { <span style="color:blue;">return </span>View(); } <span style="color:blue;">public </span><span style="color:#2B91AF;">ActionResult </span>IndexJquery() { <span style="color:blue;">return </span>View(); } <span style="color:blue;">public </span><span style="color:#2B91AF;">ActionResult </span>AddComment(<span style="color:blue;">string </span>comment) { _comments.Add(<span style="color:#A31515;">"<li>" </span>+ comment + <span style="color:#A31515;">"</li>"</span>); <span style="color:blue;">return </span>Content(<span style="color:blue;">string</span>.Join(<span style="color:#A31515;">"\n"</span>, _comments.ToArray())); } <span style="color:blue;">public void </span>AddCommentServer() { |
|
1 2 3 4 5 6 7 8 9 |
<span style="color:green;"></span><span style="color:blue;">string </span>comment = Request[<span style="color:#A31515;">"comment"</span>].ToUpper(); _comments.Add(<span style="color:#A31515;">"<li>" </span>+ comment + <span style="color:#A31515;">"</li>"</span>); Response.ContentType = <span style="color:#A31515;">"text/html"</span>; Response.Write(<span style="color:blue;">string</span>.Join(<span style="color:#A31515;">"\n"</span>, _comments.ToArray())); } } |
|
1 |
根据IndexJquery，<span style="color:blue;"><span style="color:#000000;">创建View表单IndexJquery.aspx：</span></span> |
|
1 |
<span style="color:blue;"><</span><span style="color:maroon;">h4</span><span style="color:blue;">></span>Comments<span style="color:blue;"></</span><span style="color:maroon;">h4</span><span style="color:blue;">> <</span><span style="color:maroon;">ul </span><span style="color:red;">id</span><span style="color:blue;">="comments"> </</span><span style="color:maroon;">ul</span><span style="color:blue;">> </span><span style="background:yellow;"><%</span><span style="color:blue;">using </span>(Html.BeginForm(<span style="color:#A31515;">"AddComment"</span>,<span style="color:#A31515;">"Comment"</span>,<span style="color:#2B91AF;">FormMethod</span>.Post,<span style="color:blue;">new </span>{@class=<span style="color:#A31515;">"hijax"</span>})) { <span style="background:yellow;">%></span><span style="background:yellow;"><%</span><span style="color:blue;">= </span>Html.TextArea(<span style="color:#A31515;">"Comment"</span>, <span style="color:blue;">new</span>{rows=5, cols=50}) <span style="background:yellow;">%></span><span style="color:blue;"><</span><span style="color:maroon;">button </span><span style="color:red;">type</span><span style="color:blue;">="submit"></span>Add Comment<span style="color:blue;"></</span><span style="color:maroon;">button</span><span style="color:blue;">> <</span><span style="color:maroon;">span </span><span style="color:red;">id</span><span style="color:blue;">="indicator" </span><span style="color:red;">style</span><span style="color:blue;">="</span><span style="color:red;">display</span><span style="color:blue;">:none"><</span><span style="color:maroon;">img </span><span style="color:red;">src</span><span style="color:blue;">="http://www.cnblogs.com/content/load.gif" </span><span style="color:red;">alt</span><span style="color:blue;">="loading..." /></</span><span style="color:maroon;">span</span><span style="color:blue;">> </span><span style="background:yellow;"><%</span> } <span style="background:yellow;">%></span> |
|
1 |
<span style="color:#000000;"> 在View中引用Jquery：</span> |
|
1 |
<span style="color:blue;"><</span><span style="color:maroon;">script </span><span style="color:red;">src</span><span style="color:blue;">="http://www.cnblogs.com/Scripts/jquery-1.4.1.min.js" </span><span style="color:red;">type</span><span style="color:blue;">="text/javascript"></</span><span style="color:maroon;">script</span><span style="color:blue;">></span> |
添加下面脚本：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<span style="color:blue;"><</span><span style="color:maroon;">script </span><span style="color:red;">type</span><span style="color:blue;">="text/javascript"> </span><span style="color:#006400;">//execute when the DOM has been loaded </span>$(document).ready(<span style="color:blue;">function </span>() { <span style="color:#006400;">//wire up to the form submit event </span>$(<span style="color:maroon;">"form.hijax"</span>).submit(<span style="color:blue;">function </span>(event) { event.preventDefault(); <span style="color:#006400;">//prevent the actual form post </span>hijack(<span style="color:blue;">this</span>, update_sessions, <span style="color:maroon;">"html"</span>); }); }); <span style="color:blue;">function </span>hijack(form, callback, format) { $(<span style="color:maroon;">"#indicator"</span>).show(); $.ajax({ url: form.action, type: form.method, dataType: format, data: $(form).serialize(), completed: $(<span style="color:maroon;">"#indicator"</span>).hide(), success: callback }); } <span style="color:blue;">function </span>update_sessions(result) { <span style="color:#006400;">//clear the form </span>$(<span style="color:maroon;">"form.hijax"</span>)[0].reset(); $(<span style="color:maroon;">"#comments"</span>).append(result); } <span style="color:blue;"></</span><span style="color:maroon;">script</span><span style="color:blue;">></span> |
|
1 |
<span style="color:blue;"><span style="color:#000000;"> </span></span> |
|
1 |
|
1 |
<span style="color:blue;"><span style="color:#000000;"> </span></span> |
|
1 |
<pre class="code"><span style="background:yellow;"> </span> |
|
1 |
<span style="color:blue;"><span style="color:#000000;"> </span></span> |
|
1 |
<span style="color:blue;"><span style="color:#000000;"><span style="font-size:24px;"><strong> </strong></span></span></span> |
|
1 |
<span style="color:blue;"><span style="color:#000000;"><span style="font-size:24px;"><strong> </strong></span></span></span> |
效果：与方式一效果一样
|
1 |
|
1 |
<span style="color:blue;"><span style="color:#000000;"><span style="font-size:24px;"><strong>第三种方式：Ajax Helper。</strong></span></span></span> |
|
1 |
<span style="color:blue;"></span> |
|
1 |
<span style="color:blue;"><span style="color:#000000;"> 将最简单的留言板修改成Ajax Helper的方式。</span></span> |
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()的参数。看下面代码
|
1 2 3 4 5 |
<span style="background:yellow;"><%</span><span style="color:blue;">using </span>(Ajax.BeginForm(<span style="color:#A31515;">"AddComment"</span>, <span style="color:blue;">new </span><span style="color:#2B91AF;">AjaxOptions </span>{ HttpMethod = <span style="color:#A31515;">"POST"</span>, UpdateTargetId = <span style="color:#A31515;">"comments"</span>, InsertionMode = <span style="color:#2B91AF;">InsertionMode</span>.InsertAfter })) { <span style="background:yellow;">%></span> |
actionName：AddComment（action的名字）
controllerName：CommentController（Controller的名字）
ajaxOptions：
HttpMethod：Ajax的请求方式,这里为POST
UpdateTargetId :Ajax请求的结果显示的标签的ID，这里为comments
InsertionMode：将Ajax结果插入页面的方式，这里将ajax的结果放置到comments的后面
2、实现：
在CommentController中添加IndexAjaxHelp方法。
|
1 2 3 4 |
<span style="color:blue;">public </span><span style="color:#2B91AF;">ActionResult </span>IndexAjaxHelp() { <span style="color:blue;">return </span>View(); } |
根据IndexAjaxHelp生成View表单IndexAjaxHelp.aspx，定义表单：
|
1 2 3 4 5 |
<span style="color:blue;"><</span><span style="color:maroon;">h4</span><span style="color:blue;">></span>Comments<span style="color:blue;"></</span><span style="color:maroon;">h4</span><span style="color:blue;">> <</span><span style="color:maroon;">ul </span><span style="color:red;">id</span><span style="color:blue;">="comments"> </</span><span style="color:maroon;">ul</span><span style="color:blue;">> </span><span style="background:yellow;"><%</span><span style="color:blue;">using </span>(Ajax.BeginForm(<span style="color:#A31515;">"AddComment"</span>, <span style="color:blue;">new </span><span style="color:#2B91AF;">AjaxOptions </span>{ HttpMethod = <span style="color:#A31515;">"POST"</span>, UpdateTargetId = <span style="color:#A31515;">"comments"</span>, InsertionMode = <span style="color:#2B91AF;">InsertionMode</span>.InsertAfter })) { <span style="background:yellow;">%></span><span style="background:yellow;"><%</span><span style="color:blue;">= </span>Html.TextArea(<span style="color:#A31515;">"Comment"</span>, <span style="color:blue;">new</span>{rows=5, cols=50}) <span style="background:yellow;">%></span><span style="color:blue;"><</span><span style="color:maroon;">button </span><span style="color:red;">type</span><span style="color:blue;">="submit"></span>Add Comment<span style="color:blue;"></</span><span style="color:maroon;">button</span><span style="color:blue;">> </span><span style="background:yellow;"><%</span> } <span style="background:yellow;">%></span> |
要在此View中添加下面两个脚本文件：
|
1 |
<span style="color:blue;"><</span><span style="color:maroon;">script </span><span style="color:red;">src</span><span style="color:blue;">="http://www.cnblogs.com/Scripts/MicrosoftAjax.js" </span><span style="color:red;">type</span><span style="color:blue;">="text/javascript"></</span><span style="color:maroon;">script</span><span style="color:blue;">> <</span><span style="color:maroon;">script </span><span style="color:red;">src</span><span style="color:blue;">="http://www.cnblogs.com/Scripts/MicrosoftMvcAjax.js" </span><span style="color:red;">type</span><span style="color:blue;">="text/javascript"></</span><span style="color:maroon;">script</span><span style="color:blue;">></span> |
|
1 |
这样就行了，我们发现比用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
代码：http://files.cnblogs.com/zhuqil/AjaxDemo.rar
作者：朱祁林
出处：http://zhuqil.cnblogs.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。