转：MVC3系列：~Html.BeginForm与Ajax.BeginForm

Html.BeginForm与Ajax.BeginForm都是ＭＶＣ架构中的表单元素，它们从字面上可以看到区别，即Html.BeginForm是普通的表单提交，而Ajax.BeginForm是支持异步的表单提交，这对于我们开发者来说是一个福音，我们不用再自己去用ＪＱ代码了，直接用ＭＶＣ自代的Ajax.BeginForm就可以很容易的完成一个异步的表单提交动作。

 

Html.BeginForm的原型解释：

@using (Html.BeginForm()) {} //提交到当前页面

@using (Html.BeginForm(new {} )) {} //提交到当前页面,并可以传递参数

@using (Html.BeginForm("action","controller")) {} //提交到指定controller下的action中

@using (Html.BeginForm("action","controller",FormMethod.POST)) {} //提交到指定controller下的action中，并指定提交方式

FormMethod枚举如下：   

　// 摘要:
    //     枚举窗体的 HTTP 请求类型。
    public enum FormMethod
    {
        // 摘要:
        //     指定 GET 请求。
        Get = 0,
        //
        // 摘要:
        //     指定 POST 请求。
        Post = 1,
    }

 

Ajax.BeginForm异步表单原型解释

@using (Ajax.BeginForm(
    new AjaxOptions
    {
        UpdateTargetId = "UserLogOnContainer",
        HttpMethod = "Post",
        OnSuccess = " ",
    })){}　//提交到当前页面，提交方式为Post,异步更新模块ＩＤ为UserLogOnContainer

 @using (Ajax.BeginForm("action", "controller", null,
    new AjaxOptions
    {
        UpdateTargetId = "UserLogOnContainer",
        HttpMethod = "Post",
        OnSuccess = " ",
    }))
    {} //提交到指定controller下的action，提交方式为Post,异步更新模块ＩＤ为UserLogOnContainer

下面看一下Ajax.BeginForm的例子，一个用户登陆的ＤＥＭＯ

View代码：

@model TsingDa.Ask.Models.UserLogOnModel
@{Layout = "";}
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<div id="UserLogOnContainer">
    @using (Ajax.BeginForm("UserLogOn", "Home", null,
    new AjaxOptions
    {
        UpdateTargetId = "UserLogOnContainer",
        HttpMethod = "Post",
        OnSuccess = " ",
    }))
    {
        @Html.ValidationSummary(true)
        <div class="editor-field">
            @Html.TextBoxFor(m => m.Email)
            @Html.ValidationMessageFor(m => m.Email)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(m => m.Password)
            @Html.ValidationMessageFor(m => m.Password)
        </div>
        <input type="submit" id="logOnBtn" value="登陆" />
    }
</div>

Controller层代码如下：

/// <summary>
        /// 用户登陆
        /// </summary>
        /// <returns></returns>
        public ActionResult UserLogOn()
        {
            return View(new UserLogOnModel("邮箱", "密码"));
        }
        [HttpPost]
        public ActionResult UserLogOn(UserLogOnModel entity)
        {
            if (ModelState.IsValid)
            {
                VM = user_InfoManager.UserLogOn(new User_Info { Email = entity.Email, Password = entity.Password });
                if (VM.IsComplete)
                {
                    return RedirectToAction("Index", "Home");
                }
                else
                {
                    VM.ToList().ForEach(i => ModelState.AddModelError("", i));
                }
            }

            return View();
        }

放一下对应的model实体

/// <summary>
    /// 用户登陆
    /// </summary>
    public class UserLogOnModel
    {
        public UserLogOnModel()
        {
            this.Email = "登陆名";
            this.Password = "密码";
        }
        [Required]
        [DataType(DataType.EmailAddress)]
        [Display(Name = "邮箱")]
        public string Email { get; set; }
        [Required]
        [DataType(DataType.Password)]
        [Display(Name = "密码")]
        public string Password { get; set; }
    }

表单提交后，页面效果如下：

需要注意的是，表单中的按钮在异步表单中也是Submit类型，如果是异步表单，引入的ＪＳ文件需要有jquery.unobtrusive-ajax.min.js，在这项目的scripts目录已经存在。