[轉]ASP.NET MVC 入門十一、使用AJAX

在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元素裏面的內容。完整的客戶端代碼以下：

<div class="entry">
<% 
    Html.RenderPartial("_commentList", ViewData.Model.Comments);
    if (BlogSettings.Instance.IsCommentsEnabled){ 

   Ajax.BeginForm("AddComment", new { controller = "Home", id = "" }, new AjaxOptions()
   {
       HttpMethod = "Post",
       LoadingElementId = "loading",
       //OnBegin = "commentValidate",
       OnSuccess = "clearComment",
       UpdateTargetId = "boxcomments",
       InsertionMode = InsertionMode.Replace
   }, new { id = "commentform" }); 
%> 

    <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">
    function clearComment(a, b, c, d) {
        $get("commentContent").value = "";
    }    
</script>
<% } %>
</div> 

以上爲使用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