一起谈.NET技术,Asp.net mvc 2中使用Ajax的三种方式

  1. 云栖社区>
  2. 博客>
  3. 正文

一起谈.NET技术,Asp.net mvc 2中使用Ajax的三种方式

狼人2007 浏览577
展开阅读全文

     在Asp.net MVC中,我们能非常方便的使用Ajax。这篇文章将介绍三种Ajax使用的方式,分别为原始的Ajax调用、Jquery、Ajax Helper。分别采用这三种方式结合asp.net mvc去实现一个史上最简单的留言板。

    首先看一下原始的Ajax的调用的:

     定义CommentController,代码如下:


public class CommentController : Controller
{
private IList<string> _comments = new List<string>();

public ActionResult Index()
{
return View();
}

public void AddCommentServer()
{
string comment = Request["comment"].ToUpper();
_comments.Add(
"<li>" + comment + "</li>");
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 (typeof ActiveXObject != 'undefined') {
try {
xhr
= new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
xhr
= new ActiveXObject("Microsoft.XMLHTTP");
}
}
else if (XMLHttpRequest) {
//this works for Firefox, Safari, Opera
xhr = new XMLHttpRequest();
}
else {
alert(
"对不起,你的浏览器不支持ajax");
}

return xhr;
}

function getMessage() {
//get our xml http request object
var xhr = getXmlHttpRequest();

//prepare the request
xhr.open("GET", "Comment/AddCommentServer?comment=" + document.getElementById("Comment").value, true)

//setup the callback function
xhr.onreadystatechange = function() {
//readyState 4 means we're done
if(xhr.readyState != 4) return;

//populate the page with the result
document.getElementById('comments').innerHTML = document.getElementById('comments').innerHTML + xhr.responseText;
};

//fire our request
xhr.send(null);
}

    在View中引入此脚本,创建一个简单的表单,并添加触发的代码:


<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h4>Comments</h4>
<ul id="comments">
</ul>
<%= Html.TextArea("Comment", new{rows=5, cols=50}) %>
<button type="submit" onclick="getMessage()">Add Comment</button>
<span id="indicator" style="display:none"><img src="http://www.cnblogs.com/content/load.gif" alt="loading..." /></span>

</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="headContent" runat="server">
<script src="http://www.cnblogs.com/Scripts/custom_ajax.js" type="text/javascript"></script>
</asp:Content>

   效果如下:

3

   

     第二种方式:利用Jquery:

     在控制器中添加代码IndexJquery方法和AddComment方法的代码,CommentController代码如下所示:


public class CommentController : Controller
{
private IList<string> _comments = new List<string>();

public ActionResult Index()
{
return View();
}

public ActionResult IndexJquery()
{
return View();
}

public ActionResult AddComment(string comment)
{
_comments.Add(
"<li>" + comment + "</li>");
return Content(string.Join("\n", _comments.ToArray()));
}

public void AddCommentServer()
{

string comment = Request["comment"].ToUpper();

_comments.Add(
"<li>" + comment + "</li>");

Response.ContentType
= "text/html";
Response.Write(
string.Join("\n", _comments.ToArray()));
}

}

     根据IndexJquery,创建View表单IndexJquery.aspx:


<h4>Comments</h4>
<ul id="comments">
</ul>

<% using (Html.BeginForm("AddComment","Comment",FormMethod.Post,new {@class="hijax"})) { %>
<%= Html.TextArea("Comment", new{rows=5, cols=50}) %>
<button type="submit">Add Comment</button>
<span id="indicator" style="display:none"><img src="http://www.cnblogs.com/content/load.gif" alt="loading..." /></span>
<% } %>

    在View中引用Jquery:<script src="http://www.cnblogs.com/Scripts/jquery-1.4.1.min.js" type="text/javascript">script>

  添加下面脚本:


<script type="text/javascript">
//execute when the DOM has been loaded
$(document).ready(function () {
//wire up to the form submit event
$("form.hijax").submit(function (event) {
event.preventDefault(); //prevent the actual form post
hijack(this, update_sessions, "html");
});
});

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);
}

</script>

  效果:与方式一效果一样。

 

   第三种方式: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()的参数。看下面代码:


<% using (Ajax.BeginForm("AddComment", new AjaxOptions
{
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方法。


public ActionResult IndexAjaxHelp()
{
return View();
}

    根据IndexAjaxHelp生成View表单IndexAjaxHelp.aspx,定义表单:


<h4>Comments</h4>
<ul id="comments">
</ul>

<% using (Ajax.BeginForm("AddComment", new AjaxOptions
{
HttpMethod
= "POST",
UpdateTargetId
= "comments",
InsertionMode
= InsertionMode.InsertAfter
})) {
%>

<%= Html.TextArea("Comment", new{rows=5, cols=50}) %>
<button type="submit">Add Comment</button>

<% } %>

    要在此View中添加下面两个脚本文件:

    <script src="http://www.cnblogs.com/Scripts/MicrosoftAjax.js" type="text/javascript">script>
    <script src="http://www.cnblogs.com/Scripts/MicrosoftMvcAjax.js" type="text/javascript">script>

   这样就行了,我们发现比用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

网友评论

登录后评论
0/500
评论
狼人2007
+ 关注