本系列文章基于ASP.NET MVC beta.本示例Blog系統同步更新的演示站點：http://4mvcblog.qsh.in/

在ASP.NET MVC beta發布之前，M$就宣布支持開源的JS框架jQuery，然后ASP.NET MVC beta發布后，你建立一個ASP.NET MVC beta的項目后，你可以在項目的scripts目錄下找到ASP.NET AJAX和jQuery的JS。反正我是比較喜歡jQuery的，所以對于M$此舉還是挺欣慰的。

廢話不多說，我們使用AJAX來實現發表評論的功能吧。先來看看怎樣使用M$的JS框架來進行異步AJAX請求。

首先，當然是要引入M$的AJAX框架的JS：

<script?src="/Content/MicrosoftAjax.js"?type="text/javascript"></script>
<script?src="/Content/MicrosoftMvcAjax.js"?type="text/javascript"></script>?

?

ASP.NET MVC的框架的Helper方法中提供了對他自身的AJAX的支持，使用的是System.Web.Mvc.Ajax命名空間下面的方法。你可以這樣寫代碼：

或者：

在AjaxHelper中并沒有EndForm方法，你可以直接寫Html來關閉form，或者你也可以使用Html.EndForm();來關閉。好，下面我們來寫發表評論的AjaxForm：

這里詳細說下AjaxOptions的可選配置的各個屬性的作用。

public?string?Confirm?：沒測試，不知道干嘛用的，知道的說一下.
public?string?HttpMethod?：就是指定請求的Http方法，"POST"?"GET"?"PUT"?等等
public?InsertionMode?InsertionMode?：返回的內容要更新的目標元素的方式。有三種方式：
????Replace?：替換目標元素里面的內容；
????InsertBefore?：返回內容插入到目標元素的前面；
????InsertAfter：返回內容插入到目標元素的后面。

public?string?LoadingElementId?：指定在進行異步請求的時候要顯示的提示信息的Loading元素的ID
public?string?OnBegin?：在發送異步請求前觸發的JavaScript方法
public?string?OnComplete?：在發送異步請求完成后觸發的JavaScript方法
public?string?OnFailure?：在發送異步請求失敗的時候觸發的JavaScript方法
public?string?OnSuccess?：在發送異步請求成功的時候觸發的JavaScript方法
public?string?UpdateTargetId?：指定返回的內容要更新的目標元素的ID
public?string?Url?：請求的URL，不指定則為form的action的url。

?

在上面的代碼中，在異步請求成功后會調用名稱為clearComment的JavaScript方法來清除輸入框的評論內容，然后返回內容會替換掉id為boxcomments元素里面的內容。完整的客戶端代碼如下：

MS Ajax

以上為使用M$的AJAX框架來實現AJAX異步請求，下面來看看使用jQuery怎么做呢。前面說過，我個人比較喜歡jQuery，所以示例的4mvcBlog里面的將使用jQuery來實現。

首先，我們用jQuery寫一個用于提交form表單的異步請求的小"插件"：

(function($)?{
????$.fn.ajaxForm?=?function(success)?{
????????var?form?=?$(this);
????????var?btn?=?form.find(":submit");
????????form.submit(function()?{
????????????$.ajax({
????????????????url:?form.attr("action"),
????????????????type:?form.attr("method"),
????????????????data:?form.serialize(),
????????????????beforeSend:?function(xhr)?{
????????????????????btn.attr("disabled",?true);
????????????????????showLoading();
????????????????},
????????????????success:?function(data)?{
????????????????????if?(success)?{?success(data);?}
????????????????},
????????????????error:?function()?{
????????????????????alert("請求出錯，請重試");
????????????????},
????????????????complete:?function()?{
????????????????????btn.attr("disabled",?false);
????????????????????hideLoading();
????????????????}
????????????});
????????????return?false;
????????});
????};
????function?showLoading()?{
????????$("#loading").css("display",?"");
????};
????function?hideLoading()?{
????????$("#loading").css("display",?"none");
????};
})(jQuery);?

?

然后我們不需要修改原來的一般的form，我們只需要使用ajaxForm 方法來指定要進行ajax請求的form的id就可以了：

<form?id="commentform"?method="post"?action="<%=?Url.Action("AddComment",new{controller="Home",id=""})?%>">?

<h3?id="respond">發表評論</h3>
????<p>歡迎留下你的評論,你的支持,是我最大的動力!</p>
????<p><label?for="author">Name?(required)</label>
????<input?type="text"?tabindex="1"?size="22"?value=""?id="author"?name="author"/>
????<%=?Html.ValidationMessage("Author")%></p>
????<p><label?for="email">E-mail?(will?not?be?published)?(required)</label>
????<input?type="text"?size="22"?tabindex="2"?value=""?id="email"?name="email"/>
????<%=?Html.ValidationMessage("Email")%></p>
????<p><label?for="url">Website</label>
????<input?type="text"?tabindex="3"?size="22"?value=""?id="Website"?name="Website"/></p>?

????<p><%=?Html.ValidationMessage("Content")%>
????<textarea?tabindex="4"?rows="10"?cols="5"?id="commentContent"?name="content"></textarea></p>?

????<p><input?type="submit"?value="Submit?Comment"?tabindex="5"?id="submit"?name="submit"/>
????<span?id="loading"?style="display:none;">數據處理中</span>
????<input?type="hidden"?value="<%=?ViewData.Model.Id?%>"?id="comment_post_ID"?name="comment_post_ID"/></p>
</form>


<script?type="text/javascript"?language="javascript">????

//我們只需要在這里注冊一下事件就可以，這就是jQuery和Html干凈的分離的優雅。
$("#commentform").ajaxForm(success);
????function?success(data)?{
????????if?(data.search(/^\{[\s\S]+\}$/img)?>?-1)?{
????????????alert(eval("("?+?data?+?")").ErrorMsg.toString());
????????}?else?{
????????????var?c?=?$(".boxcomments");
????????????if?(c.length?<=?0)?{
????????????????c?=?$('<div?class="boxcomments"></div>');
????????????????c.insertBefore("#commentform");
????????????}
????????????c.html($(data).find(".boxcomments").html());
????????????$("#commentContent").val("");
????????}
????}?

</script>

后臺代碼如下：

[AcceptVerbs(HttpVerbs.Post?|?HttpVerbs.Put),?CallByAjax(true)]
public?ActionResult?AddCommentByAjax(FormCollection?form)
{
????JsonResultData?jsonData?=?new?JsonResultData();
????Comment?comment?=?new?Comment();
????string?postId?=?form["comment_post_ID"]????"";
????Post?post?=?Post.GetPost(new?Guid(postId));
????if?(TryUpdateModel(comment,?new[]?{?"Content",?"Author",?"Email"?}))
????{
????????if?(comment.IsValid)
????????{
????????????comment.Id?=?Guid.NewGuid();
????????????comment.Author?=?Server.HtmlEncode(comment.Author);
????????????//comment.Email?=?email;
????????????comment.Content?=?Server.HtmlEncode(comment.Content);
????????????comment.IP?=?Request.UserHostAddress;
????????????//comment.Country?=?country;
????????????comment.DateCreated?=?DateTime.Now;
????????????comment.Parent?=?post;
????????????comment.IsApproved?=?!BlogSettings.Instance.EnableCommentsModeration;?

????????????if?(User.Identity.IsAuthenticated)
????????????????comment.IsApproved?=?true;?

????????????string?website?=?form["Website"]????"";
????????????if?(website.Trim().Length?>?0)
????????????{
????????????????if?(!website.ToLowerInvariant().Contains("://"))
????????????????????website?=?"http://"/?+?website;?

????????????????Uri?url;
????????????????if?(Uri.TryCreate(website,?UriKind.Absolute,?out?url))
????????????????????comment.Website?=?url;
????????????}?

????????????post.AddComment(comment);
????????????SetCommentCookie(comment.Author,?comment.Email,?website,?comment.Country);
????????????return?View("_commentList",?post.Comments);
????????}
????????else
????????{
????????????foreach?(string?key?in?comment.BrokenRules.Keys)
????????????{
????????????????//將驗證不通過的信息添加到錯誤信息列表
????????????????jsonData.ErrorMsg.Add(comment.BrokenRules[key]);
????????????}
????????}
????}
????jsonData.IsError?=?true;
????return?Json_Net(jsonData);//如果業務邏輯驗證不通過，則返回JSON結果表示的失敗信息
}?

對于上面的后臺代碼的[CallByAjax(true)]特性你可以參考我Asp.net Mvc Preview 5 體驗--實現ActionSelectionAttribute來判斷是否為AJAX請求而選擇不同的Action這一篇文章。

暫時就到這里吧。Enjoy！具體效果請下載示例代碼運行查看或到演示站點http://4mvcblog.qsh.in/查看。post by?Q.Lee.lulu?。

最新的Blog示例程序代碼：?4mvcBlog_10.rar

總結

以上是生活随笔為你收集整理的ASP.NET MVC 入门11、使用AJAX的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。