ASP.NET MVC 入门11、使用AJAX

本系列文章基于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：

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表单的异步请求的小"插件"：

然后我们不需要修改原来的一般的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相关推荐

14、ASP.NET MVC入门到精通——Ajax
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 Unobtrusive Ajax使用方式(非入侵式) 非入侵式,通俗来讲:就是将嵌入在Html中的JavaScript全部取出来,放在单独的 ...
ASP.NET MVC 入门系列教程
一个居于ASP.NET MVC Beta的系列入门文章,有朋友提议说写一个示例程序来同步讲解,那样更加容易学习.所以就写选择了写一个Blog程序来作为示例程序.(原来是居于ASP.NET MVC Pr ...
ASP.NET MVC入门到精通——Spring.net-业务层仓储
本系列目录:ASP.NET MVC4入门到精通系列目录汇总上一节,我们已经把项目框架的雏形搭建好了,那么现在我来开始业务实现,在业务实现的过程当中,不断的来完善我们现有的框架. 1.假设我们来做一个 ...
ASP.NET MVC 入门8、ModelState与数据验证
ViewData有一个ModelState的属性,这是一个类型为ModelStateDictionary的ModelState类型的字典集合.在进行数据验证的时候这个属性是比较有用的.在使用Html. ...
ASP.NET MVC 入门
入门基础 ASP.NET MVC 是微软系列基于 C# 语言的 Web 开发框架,并不适合 0 基础入门,在学习之前你必须要了解 4 个知识点: 1.HTML 基础.网页的基本标签,结合 ASP.NE ...
ASP.NET MVC 入门3、Routing
本系列文章基于Microsoft ASP.NET MVC Beta. 在一个route中,通过在大括号中放一个占位符来定义( { and } ).当解析URL的时候,符号"/"和& ...
16、ASP.NET MVC入门到精通——MVC过滤器
本系列目录:ASP.NET MVC4入门到精通系列目录汇总在ASP.NET MVC中有四种过滤器类型 Action 1.在ASP.NET MVC项目中,新建文件夹Filter,然后新建类MyCust ...
1、ASP.NET MVC入门到精通——新语法
本系列目录:ASP.NET MVC4入门到精通系列目录汇总在学习ASP.NET MVC之前,有必要先了解一下C#3.0所带来的新的语法特性,这一点尤为重要,因为在MVC项目中我们利用C#3.0的新特 ...
c .net ajax,Asp.net mvc 2中使用Ajax的三种方式
在Asp.net MVC中,我们能非常方便的使用Ajax.这篇文章将介绍三种Ajax使用的方式,分别为原始的Ajax调用.Jquery.Ajax Helper.分别采用这三种方式结合asp.net m ...

ASP.NET MVC 入门11、使用AJAX

ASP.NET MVC 入门11、使用AJAX相关推荐

最新文章

热门文章