M$就宣布支持开源的JS框架jQuery

本种类小说基于ASP.NET MVC beta.本示例Blog系统同步创新的亲自去做站点:

在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命名空间上边的章程。你能够如此写代码:

图片 1

或者:

图片 2

在AjaxHelper中并未EndForm方法,你能够一向写Html来关闭form,可能你也足以使用Html.EndForm();来关闭。好,上面大家来写公布探讨的AjaxForm:

图片 3

此地详细说下AjaxOptions的可选配置的各种属性的法力。

public string Confirm :没测验,不晓得干嘛用的,知道的说一下.
public string HttpMethod :就是钦命恳求的Http方法,"POST" "GET" "PUT" 等等图片 4
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 :哀求的UPAJEROL,不内定则为form的action的url。

 

在上头的代码中,在异步央浼成功后会调用名称叫clearComment的JavaScript方法来祛除输入框的评价内容,然后重回内容会交替掉id为boxcomments成分里面包车型大巴剧情。完整的客户端代码如下:

图片 5图片 6MS Ajax
<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;">数据管理中图片 7</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表单的异步要求的小"插件":

图片 8图片 9(function($) 图片 10{
图片 11图片 12    $.fn.ajaxForm = function(success) 图片 13{
图片 14        var form = $(this);
图片 15        var btn = form.find(":submit");
图片 16图片 17        form.submit(function() 图片 18{
图片 19图片 20            $.ajax(图片 21{
图片 22                url: form.attr("action"),
图片 23                type: form.attr("method"),
图片 24                data: form.serialize(),
图片 25图片 26                beforeSend: function(xhr) 图片 27{
图片 28                    btn.attr("disabled", true);
图片 29                    showLoading();
图片 30                },
图片 31图片 32                success: function(data) 图片 33{
图片 34图片 35                    if (success) 图片 36{ success(data); }
图片 37                },
图片 38图片 39                error: function() 图片 40{
图片 41                    alert("乞请出错,请重试");
图片 42                },
图片 43图片 44                complete: function() 图片 45{
图片 46                    btn.attr("disabled", false);
图片 47                    hideLoading();
图片 48                }
图片 49            });
图片 50            return false;
图片 51        });
图片 52    };
图片 53图片 54    function showLoading() 图片 55{
图片 56        $("#loading").css("display", "");
图片 57    };
图片 58图片 59    function hideLoading() 图片 60{
图片 61        $("#loading").css("display", "none");
图片 62    };
图片 63})(jQuery); 

 

然后大家无需修改原本的相似的form,我们只须求使用ajaxForm 方法来钦命要开始展览ajax需要的form的id就能够了:

图片 64<form id="commentform" method="post" action="<%= Url.Action("AddComment",new{controller="Home",id=""}) %>"> 
图片 65
图片 66<h3 id="respond">发布研究</h3>
图片 67    <p>应接留下你的褒贬,你的支撑,是自家最大的引力!</p>
图片 68    <p><label for="author">Name (required)</label>
图片 69    <input type="text" tabindex="1" size="22" value="" id="author" name="author"/>
图片 70    <%= Html.ValidationMessage("Author")%></p>
图片 71    <p><label for="email">E-mail (will not be published) (required)</label>
图片 72    <input type="text" size="22" tabindex="2" value="" id="email" name="email"/>
图片 73    <%= Html.ValidationMessage("Email")%></p>
图片 74    <p><label for="url">Website</label>
图片 75    <input type="text" tabindex="3" size="22" value="" id="Website" name="Website"/></p> 
图片 76
图片 77    <p><%= Html.ValidationMessage("Content")%>
图片 78    <textarea tabindex="4" rows="10" cols="5" id="commentContent" name="content"></textarea></p> 
图片 79
图片 80    <p><input type="submit" value="Submit Comment" tabindex="5" id="submit" name="submit"/>
图片 81    <span id="loading" style="display:none;">数据处理中图片 82</span>
图片 83    <input type="hidden" value="<%= ViewData.Model.Id %>" id="comment_post_ID" name="comment_post_ID"/></p>
图片 84</form>
图片 85
图片 86
图片 87图片 88<script type="text/javascript" language="javascript">图片 89    
图片 90
图片 91//大家只需求在那边登记一下事件就足以,那就是jQuery和Html干净的拜别的幽雅。
图片 92$("#commentform").ajaxForm(success);
图片 93图片 94    function success(data) 图片 95{
图片 96图片 97        if (data.search(/^{[sS] }$/img) > -1) 图片 98{
图片 99            alert(eval("("   data   ")").ErrorMsg.toString());
图片 100图片 101        } else 图片 102{
图片 103            var c = $(".boxcomments");
图片 104图片 105            if (c.length <= 0) 图片 106{
图片 107                c = $('<div ></div>');
图片 108                c.insertBefore("#commentform");
图片 109            }
图片 110            c.html($(data).find(".boxcomments").html());
图片 111            $("#commentContent").val("");
图片 112        }
图片 113    } 
图片 114
图片 115</script>

后台代码如下:

图片 116图片 117Code
[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 = "   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!具体职能请下载示例代码运营查看或到示范站点 by Q.Lee.lulu 。

最新的Blog示例程序代码: 4mvcBlog_10.rar


更加的多内容,请关注 和


本文由金沙澳门官网-www.js333com-金沙js333com发布于金沙澳门官网计算机,转载请注明出处:M$就宣布支持开源的JS框架jQuery

您可能还会对下面的文章感兴趣: