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

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

廢話不多說，我們使用AJAX來實(shí)現(xiàn)發(fā)表評(píng)論的功能吧。先來看看怎樣使用M$的JS框架來進(jìn)行異步AJAX請(qǐng)求。

首先，當(dāng)然是要引入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方法中提供了對(duì)他自身的AJAX的支持，使用的是System.Web.Mvc.Ajax命名空間下面的方法。你可以這樣寫代碼：

或者：

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

這里詳細(xì)說下AjaxOptions的可選配置的各個(gè)屬性的作用。

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

public?string?LoadingElementId?：指定在進(jìn)行異步請(qǐng)求的時(shí)候要顯示的提示信息的Loading元素的ID
public?string?OnBegin?：在發(fā)送異步請(qǐng)求前觸發(fā)的JavaScript方法
public?string?OnComplete?：在發(fā)送異步請(qǐng)求完成后觸發(fā)的JavaScript方法
public?string?OnFailure?：在發(fā)送異步請(qǐng)求失敗的時(shí)候觸發(fā)的JavaScript方法
public?string?OnSuccess?：在發(fā)送異步請(qǐng)求成功的時(shí)候觸發(fā)的JavaScript方法
public?string?UpdateTargetId?：指定返回的內(nèi)容要更新的目標(biāo)元素的ID
public?string?Url?：請(qǐng)求的URL，不指定則為form的action的url。

?

在上面的代碼中，在異步請(qǐng)求成功后會(huì)調(diào)用名稱為clearComment的JavaScript方法來清除輸入框的評(píng)論內(nèi)容，然后返回內(nèi)容會(huì)替換掉id為boxcomments元素里面的內(nèi)容。完整的客戶端代碼如下：

MS Ajax

以上為使用M$的AJAX框架來實(shí)現(xiàn)AJAX異步請(qǐng)求，下面來看看使用jQuery怎么做呢。前面說過，我個(gè)人比較喜歡jQuery，所以示例的4mvcBlog里面的將使用jQuery來實(shí)現(xiàn)。

首先，我們用jQuery寫一個(gè)用于提交form表單的異步請(qǐng)求的小"插件"：

(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("請(qǐng)求出錯(cuò)，請(qǐng)重試");
????????????????},
????????????????complete:?function()?{
????????????????????btn.attr("disabled",?false);
????????????????????hideLoading();
????????????????}
????????????});
????????????return?false;
????????});
????};
????function?showLoading()?{
????????$("#loading").css("display",?"");
????};
????function?hideLoading()?{
????????$("#loading").css("display",?"none");
????};
})(jQuery);?

?

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

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

<h3?id="respond">發(fā)表評(píng)論</h3>
????<p>歡迎留下你的評(píng)論,你的支持,是我最大的動(dòng)力!</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;">數(shù)據(jù)處理中</span>
????<input?type="hidden"?value="<%=?ViewData.Model.Id?%>"?id="comment_post_ID"?name="comment_post_ID"/></p>
</form>


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

//我們只需要在這里注冊(cè)一下事件就可以，這就是jQuery和Html干凈的分離的優(yōu)雅。
$("#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>

后臺(tái)代碼如下：

[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)
????????????{
????????????????//將驗(yàn)證不通過的信息添加到錯(cuò)誤信息列表
????????????????jsonData.ErrorMsg.Add(comment.BrokenRules[key]);
????????????}
????????}
????}
????jsonData.IsError?=?true;
????return?Json_Net(jsonData);//如果業(yè)務(wù)邏輯驗(yàn)證不通過，則返回JSON結(jié)果表示的失敗信息
}?

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

暫時(shí)就到這里吧。Enjoy！具體效果請(qǐng)下載示例代碼運(yùn)行查看或到演示站點(diǎn)http://4mvcblog.qsh.in/查看。post by?Q.Lee.lulu?。

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。