Asp MVC(AJAX调用示例)

最新推荐文章于 2021-09-16 17:21:05 发布

原创最新推荐文章于 2021-09-16 17:21:05 发布 · 141 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ASP #Ajax #MVC #ASP.net #jQuery #ViewUI

.NET 专栏收录该内容

49 篇文章

订阅专栏

本文介绍了在ASP.NET MVC中整合Ajax的三种方法：原始Ajax调用、使用Jquery及AjaxHelper。通过创建一个简单的留言板应用，详细展示了每种方法的具体实现步骤。

Jquery定义为ASP.NET MVC 的默认JS模板。

使用AJAX的条件

1.每个AJAX请求都会制定确定的ACTION

2.Action会判定是否来自AJAX

3.针对AJAX请求必须返回一个特殊的VIEW

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

定义CommentController，代码如下：

view plain copy to clipboard print ?

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 + "
");
Response.ContentType = "text/html";
Response.Write(string.Join("\n", _comments.ToArray()));
}
}
</LI>

public class CommentController : Controller { private IList _comments = new List(); public ActionResult Index() { return View(); } public void AddCommentServer() { string comment = 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方法。

view plain copy to clipboard print ?

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 runat="server" ContentPlaceHolderID="MainContent">
<H4>Comments</H4>
<UL id=comments>
</UL>
<%= Html.TextArea("Comment", new{rows=5, cols=50}) %>
<BUTTON onclick=getMessage() type=submit>Add Comment</BUTTON>
<SPAN id=indicator style="DISPLAY: none"><IMG alt=loading... src="../../content/load.gif"></SPAN>
</ASP:CONTENT>
<ASP:CONTENT id=Content3 runat="server" ContentPlaceHolderID="headContent">
<SCRIPT src="../../Scripts/custom_ajax.js" type=text/javascript></SCRIPT>
</ASP:CONTENT>
第二种方式：利用Jquery

：
在控制器中添加代码IndexJquery方法和AddComment方法的代码，CommentController代码如下所示:
view plain copy to clipboard print ?
1. public class CommentController : Controller
2. {
3. private IList<STRING> _comments = new List<STRING>();
5. public ActionResult Index()
6. {
7. return View();
8. }
10. public ActionResult IndexJquery()
11. {
12. return View();
13. }
15. public ActionResult AddComment(string comment)
16. {
17. _comments.Add("
18. <LI>" + comment + "
20. ");
21. return Content(string.Join("\n", _comments.ToArray()));
22. }
24. public void AddCommentServer()
25. {
27. string comment = Request["comment"].ToUpper();
29. _comments.Add("
30. <LI>" + comment + "
32. ");
34. Response.ContentType = "text/html";
35. Response.Write(string.Join("\n", _comments.ToArray()));
36. }
38. }
39. </LI>
public class CommentController : Controller { private IList _comments = new List(); public ActionResult Index() { return View(); } public ActionResult IndexJquery() { return View(); } public ActionResult AddComment(string comment) { _comments.Add("
1. <H4>Comments</H4>
2. <UL id=comments>
3. </UL>
5. <% using (Html.BeginForm("AddComment","Comment",FormMethod.Post,new {@class="hijax"})) { %>
6. <%= Html.TextArea("Comment", new{rows=5, cols=50}) %>
7. <BUTTON type=submit>Add Comment</BUTTON>
8. <SPAN id=indicator style="DISPLAY: none"><IMG alt=loading... src="http://www.cnblogs.com/content/load.gif"></SPAN>
9. <% } %>
10. 在View中引用Jquery： <script src="http://www.cnblogs.com/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
" + comment + " "); return Content(string.Join("\n", _comments.ToArray())); } public void AddCommentServer() { string comment = Request["comment"].ToUpper(); _comments.Add("
" + comment + " "); Response.ContentType = "text/html"; Response.Write(string.Join("\n", _comments.ToArray())); } }

根据IndexJquery，创建View表单IndexJquery.aspx：

第三中方式，使用Ajax help

必须要引用这两个JS文件。新建一个ajax.BeginForm

然后在控制器写ACTION

public ActionResult HelloAjax()
        {
            if (Request.IsAjaxRequest())
            {
                return Content("Hello tuping");
            }
            else
            {
                return null;
            }

        }

Request.IsAjaxRequest()方法可以判断HTTP请求是否是AJAX请求。

查看页面即可。

如果你返回的仅仅是一个字符串可以返回 return Content("Hello tuping");
但是你如果返回的是一段