愛上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提交就可以了。

 回到目錄