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

<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命名空间下面的方法。你可以这样写代码:

image

或者:

image

在AjaxHelper中并没有EndForm方法,你可以直接写Html来关闭form,或者你也可以使用Html.EndForm();来关闭。好,下面我们来写发表评论的AjaxForm:

image

这里详细说下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表单的异步请求的小"插件":

(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);