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,代码如下:
- 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方法。
- 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);
- }
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代码如下所示:- 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 + "
- ");
- return Content(string.Join("\n", _comments.ToArray()));
- }
- public void AddCommentServer()
- {
- string comment = Request["comment"].ToUpper();
- _comments.Add("
- <LI>" + comment + "
- ");
- Response.ContentType = "text/html";
- Response.Write(string.Join("\n", _comments.ToArray()));
- }
- }
- </LI>
- <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 alt=loading... src="http://www.cnblogs.com/content/load.gif"></SPAN>
- <% } %>
-
在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
<hr/>
<%using (Ajax.BeginForm("HelloAjax", new AjaxOptions { UpdateTargetId="result"}))
{%>
<%:Html.TextBox("query", null, new {size=40 })%>
<input type="submit"/>
<%} %>
<div id="result"></div>
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
必须要引用这两个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");
但是你如果返回的是一段