當(dāng)前位置：首頁 > 编程语言 > asp.net >内容正文

asp.net

ASP.NET MVC 入门11、使用AJAX

發(fā)布時(shí)間：2023/12/10 asp.net 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 ASP.NET MVC 入门11、使用AJAX 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

本系列文章基于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的，所以對于M$此舉還是挺欣慰的。

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

首先，當(dāng)然是要引入M$的AJAX框架的JS：

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

或者：

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

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

public?string?Confirm?：沒測試，不知道干嘛用的，知道的說一下.
public?string?HttpMethod?：就是指定請求的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)行異步請求的時(shí)候要顯示的提示信息的Loading元素的ID
public?string?OnBegin?：在發(fā)送異步請求前觸發(fā)的JavaScript方法
public?string?OnComplete?：在發(fā)送異步請求完成后觸發(fā)的JavaScript方法
public?string?OnFailure?：在發(fā)送異步請求失敗的時(shí)候觸發(fā)的JavaScript方法
public?string?OnSuccess?：在發(fā)送異步請求成功的時(shí)候觸發(fā)的JavaScript方法
public?string?UpdateTargetId?：指定返回的內(nèi)容要更新的目標(biāo)元素的ID
public?string?Url?：請求的URL，不指定則為form的action的url。

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

MS Ajax

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

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

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

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

<h3?id="respond">發(fā)表評論</h3>
????<p>歡迎留下你的評論,你的支持,是我最大的動(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">????

//我們只需要在這里注冊一下事件就可以，這就是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é)果表示的失敗信息
}?

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

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

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

總結(jié)

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

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

上一篇：消息称百度全额出售爱奇艺股份！官方回应：
下一篇： AMD显卡重大突破！OpenGL性能暴增