[ASP NET MVC] 表单 Partial View / Editor Template 使用抉择

表单 Partial View / Editor Template 使用抉择

前言

最近有不少同事都会问到“为什么在这边要使用Editor Tamplate? 怎么不用Partial View来做?”，其实如果想要知道各自适用的时机，首先就必须了解两者差异为何。从以下表格不难发现，两者都是从VIEW中将ViewModel之Boo属性对象传入Partial View / Editor Template，并且都是使用@Html.EditorFor() 方法来产出Html 元素，但最终产出Html Input元素名称prefix却不相同。因此以下将针对各自特性来思考适用情境。

适用情境

使用Partial View或Editor Tempalte除共用考量因素外，就是避免页面过于庞大造成维护不易，因此在拆解复杂数据输入页面区块时，我们需要考量表单数据被送出的方式，是否所有数据都隶属于同一个表单中，亦或者会有分散在各表单的情况，需要有各自被送出的需求。以下提供两种使用情境供读者参考。

Editor Template

单一表单情况下，我们若想将各子属性类拆解成独自的检视，让复杂表单不会这么庞大时，就可以使用Editor Template来实现。简略示意图如下，在Editor Template中若是透过@Html.EditorFor()产出Html元素时，元素名称会以传入对象属性名称(VMA/VMB)作为 prefix，因此在按下Submit送出表单数据到后端时，便可依照名称将数据完整地Binding至ViewModel中。

Partial View

在多表单情况下，可考虑依照各表单Model来拆解成各自Partial View使用。简略示意图如下，在Partial View中若是透过@Html.EditorFor()产出Html元素时，元素名称并不会以传入对象属性名称(VMA/VMB)作为 prefix，因此可利用此特性，让各表单送出属于自己的Model数据至Controller中。

实践演练

假设目前有个新增使用者功能需要实践，由于画面可能会很复杂(身家调查之类)，因此可能会存在许多不同种类的资讯，所以希望将表单页面稍微分割一下，把表单中连络资讯(Contact)及教育资讯(Education)给分割出来，预期界面如下所示。虽然知道此时应使用EditorTemplate来实做会比较合适，但抱持着实验的精神，我们就姑且先使用Partial View来实做，看看会发生什么问题。

首先定义检视Model(UserCreateViewModel)、连络资讯(Contact)及教育资讯(Education)相关类。

public class UserCreateViewModel
{
    public string UserName { get; set; }
    public Contact Contact { get; set; }
    public Education Education { get; set; }

}

 public class Contact
{
    public string Phone { get; set; }
    public string Email { get; set; }
}


public class Education
{
    public string HightSchool { get; set; }
    public string University { get; set; }
}

接着设计输入连络资讯(Contact)及教育资讯(Education)的Partial View页面

为了让结果更加清晰，直接透过@Html.NameFor()把输入框元素名称印出，方便后续比较使用。

_ContactPartialView.cshtml

@model PartialViewWebApp.ViewModel.Contact
@{Layout = null;}



  

 

_EducationPartialView.cshtml

@model PartialViewWebApp.ViewModel.Education
@{Layout = null;}



  

 

主页面(View)如下，使用Partial View来呈现连络资讯(Contact)及教育资讯(Education)输入界面。

@model PartialViewWebApp.ViewModel.UserCreateViewModel
@{ ViewBag.Title = "Create"; }

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true,new { @class = "text-danger" })

    
  

 

  
  @Html.LabelFor(model => model.UserName,htmlAttributes: new { @class = "control-label col-md-3" }) 
 
  

    @Html.EditorFor(model => model.UserName,new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.UserName,new { @class = "text-danger" }) name: @Html.NameFor(model => model.UserName) 
  
 

 

    
  

 
    @Html.Partial("_ContactPartialView",Model.Contact)

    
  

 
    @Html.Partial("_EducationPartialView",Model.Education)

    
  

 
 
 
  
 
   
 

 
}

产生画面如下，我们可以看到元素名称并没有依照对象属性阶层来命名，因此将数据POST到后端时，除了UserName可以正确绑定至UserCreateViewModel外，其他透过Partial View产出输入框中的数据并无法正确Binding至UserCreateViewModel。

最终会造成部分数据的遗失

接着使用EditorTemplate来实做。首先建立EditorTemplates数据夹，并且在刚目录中建立Contact.cshtml及Education.cshtml来对应Contact及Education类，而各类对应的EditorTemplate内容其实与先前设计的Partial View完全相同，因此不再此赘述了。

然后调整一下主页面，改使用EditorTemplate来呈现连络资讯(Contact)及教育资讯(Education)

@model PartialViewWebApp.ViewModel.UserCreateViewModel
@{ ViewBag.Title = "Create"; }

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true,new { @class = "text-danger" }) name: @Html.NameFor(model => model.UserName)