[转]ASP.NET MVC 入门11、使用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

时间： 2024-10-29 12:59:44

[转]ASP.NET MVC 入门11、使用AJAX的相关文章

ASP.NET MVC 入门11、使用AJAX

asp.net mvc 支持微软自身Ajax 和 JQuery框架 asp.net mvc View视图可以理解为 一个包含"<%%>"变量引和的模板. Script与HTML优雅分离参见: http://www.cnblogs.com/QLeelulu/archive/2008/10/22/1317214.html ASP.NET MVC 入门11.使用AJAX

ASP.NET MVC 入门系列教程

ASP.NET MVC 入门1.简介 ASP.NET MVC 入门2.项目的目录结构与核心的DLL ASP.NET MVC 入门3.Routing ASP.NET MVC 入门4.Controller与Action ASP.NET MVC 入门5.View与ViewData ASP.NET MVC 入门6.TempData ASP.NET MVC 入门7.Hellper与数据的提交与绑定 ASP.NET MVC 入门8.ModelState与数据验证 ASP.NET MVC 入门9.Action

26、ASP.NET MVC入门到精通——后台管理区域及分离、Js压缩、css、jquery扩展

本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做准备,由于许久没有练习双截棍了,难免生疏,所以现在临时抱佛脚.深圳最近的天气反常,许多人感冒了,我也成为其中之一,大家注意身体... 这一篇,我来简单的讲一下接下来项目中会用到的一些杂七杂八的技术. 区域及分离 在15.ASP.NET MVC入门到精通——MVC-路由中,我已经简要说明了区域的分离. 1.右键单击Web项目,“添加”——“区域”,区域名,

ASP.NET MVC 入门4、Controller与Action

原帖地址:http://www.cnblogs.com/QLeelulu/archive/2008/10/04/1303672.html Controller是MVC中比较重要的一部分.几乎所有的业务逻辑都是在这里进行处理的,并且从Model中取出数据.在ASP.NET MVC Preview5中,将原来的Controller类一分为二,分为了Controller类和ControllerBase类.Controller类继承自ControllerBase类,而ControllerBase实现是了

ASP.NET MVC 入门2、项目的目录结构与核心的DLL

原帖地址:http://www.cnblogs.com/QLeelulu/archive/2008/10/03/1303521.html 我们新建一个ASP.NET MVC的Web Application后,默认的情况下,项目的目录结构如下: App_Data :这个目录跟我们一般的ASP.NET website是一样的,用于存放数据. Content :这个目录是建议用来存放一下资源文件的.例如CSS.JS.图片等等.当然你不愿意的话,完全可以不放到这里来. Controllers :这个目录

ASP.NET MVC WebGrid &ndash; Performing true AJAX pagination and sorting 【转】

ASP.NET MVC WebGrid – Performing true AJAX pagination and sorting FEBRUARY 27, 2012 14 COMMENTS WebGrid is a very powerful HTML helper component introduced with ASP.NET MVC 3 and ASP.NET Web Pages. Despite all its cool features, it is troublesome to

Asp.net MVC入门视频教程

编程开发 > Asp.net视频教程 > Asp.net MVC入门视频教程 > 1.传统web处理方式和mvc处理方式 上传日期:2014-08-16 10:02:45  相关摘要:  - 怎么一创建传统补间就成了上下移动的了 - web 服务器 第一次进入站点速度慢是什么问题?? - EF中怎么处理像Sql多表连接的问题? 2.mvc项目会自动导入mvc程序集 上传日期:2014-08-16 10:14:51  相关摘要:  - Asp.net mvc 可以不用js吗 - 项目发布的

ASP.NET MVC 入门8、ModelState与数据验证

数据验证包括服务器端验证和客户端的验证, 本文介绍的MVC数据库端的数据验证实现. 客户端的数制验证可以使用JQuery的验证插件来实现. Html.ValidationMessage()的时候,就是从ViewData.ModelState中检测是否有指定的KEY,如果存在,就提示错误信息. ValidationMessage(modelName) 指定控件的验证错误信息; ValidationSummary() 表单所有控件的验证错误信息. 验证未通过, 目标控件和验证错误信息HTML标签,都

ASP.NET MVC 入门1、简介

什么是MVC模式 MVC(Model-View-Controller,模型—视图—控制器模式)用于表示一种软件架构模式.它把软件系统分为三个基本部分:模型(Model),视图(View)和控制器(Controller). 那么MVC模式和我们熟悉的WebForm模式有什么不同呢?他的各个部分又是怎样分工的呢? 我们先来看一下普通的WebForm模式下,我们请求一个例如http://www.51mvc.com/blog/index.aspx的URL,那么我们的WebForm程序会到网站根目录下去寻