爱上MVC3系列~RenderAction与RenderPartial及一个页面多个表单提交

回到目录

今天做项目的时候发现了个问题，是关于RenderAction和RenderPartial的，它们在MVC2的时候就出现了，不是MVC3的新东西，那为什么要拿出来说呢，其主要原因在于，我对它们的了解在MVC3时代有了更上一层的认识，呵呵。

先说一下他们的作用：

RenderAction：渲染分部视图到页面上，他要求你提供一下Action的名称和Controller的名称

RenderPartial：渲染分部视图到页面上，他要求你提代一个分部视图的名称，即它的路径，如果是当然Controller下或者Shared下的页面，直接写它的名称即可

再说一下他们的区别：

RenderAction:它是走controller下的action方法的，即走[HttpGet]特性的方法（默认下就是HttpGet）

RenderPartial:他不走controller下的action方法，即使你有这个方法，他也不会走，但一般使用RenderPartial时，都是把数据写在页面上的，它的action方法完全多余。

下面是一个表单提交的实现，它是使用分部视图完成的表单模块，它有两个action,以便去实现GET请求和POST请求，看代码：

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

 

而在页面视图上，通过视图模型UserLogOnModel进行页面元素的填充及表单验证，在默认情况下，我们把模型赋了默认值（就是表单元素input上的value）

    /// <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; }
    }

当页面上触发POST事件后，就会到HTTPOST对应的action上，进行处理，ModelState是指视图模型的状态，如果验证不通过，它的IsValid属性为false，并且它会自动绑定到表单元素

上，这一样都是基于MVC的，前台代码可能是这样：

@model TsingDa.Ask.Models.UserLogOnModel
@{Layout = "";}
@using (Html.BeginForm("UserLogOn", "Home", FormMethod.Post, new { id = "LogOn" }))
{
    @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="button" id="logOnBtn" value="登陆" />
}
<script type="text/javascript">
    $("#logOnBtn").click(function () {
        $.ajax({
            url: "/Home/UserLogOn",
            data: $("#LogOn").serialize(),
            type: "POST",
            success: function (data) {
                $("#LogOn").html(data);
            }
        });
    });
</script>

注意，如果有多个视图中的表单分别有提交动作，必须使用AJAX方法，不能使用表单自己的SUBMIT方式，否则mvc会分不清你到底提交给谁，这也很正常。

 

OK,现在就算一个页面上有多个表单，我们使用RenderAction把业务分开处理，用AJAX提交方法分别进行POST提交就可以了。

 回到目录