ASP.NET MVC3 自定义编辑模版

在View中显示Model中的各字段，默认是使用htmlhelper的EditorFor方法，在界面上显示的文本框。而使用EditorTemplates可在View上为特定字段显示自定义的界面。比如购物网站中经常有客户的地址管理功能，客户在下订单时可从中选择。本Demo就简单演示该功能在ASP.NET MVC3中如何实现，重点是练习EditorTemplates的使用。可在Views的share文件夹，或是控件器对应View中的文件夹里建立""文件夹，新建一局部视图的View，以要自己定义显示编辑界面的类保持同名，MVC框架会自动搜索到，记得这的“约定”很关键， ASP.NET MVC倡导的是约定胜于配置。
   练习环境：Visual Studio 2010 sp1 , ASP.NET MVC 3
   1. 建立ASP.NET MVC3项目。
   使用向导来建立一个空的ASP.NET MVC3项目，视图引擎使用Razor。
   2. 建立Model
   Model共有两个类：User和Address。User的Addresses属性是Address实例的集合，这即代表用户与地址的关系是一对多的关系。
   2.1建立Address类
   代码如下：
    namespace MvcEditorTemplateDemo.Models
{
    public class Address
    {
        //发货地址
        public string Street { get; set; }
        //邮政编码
        public string PostalCode { get; set; }
        //城市
        public string City { get; set; }
    }
}
    2.2 建立User类
    代码如下：
namespace MvcEditorTemplateDemo.Models
{
    public class User
    {
        public string Name { get; set; }
        public List<Address> Addresses { get; set; }
    }
}
     2.3为了方便测试，给User类的构造函数生成一些数据，这些数据在实际应用中可从数据库中读取。
public User()
        {
            Name = "张三";
            var a1 = new Address { City = "南宁", PostalCode = "530600", Street = "广西南宁市兴宁区望州南路78号" };
            var a2 = new Address { City = "南宁", PostalCode = "530600", Street = "广西南宁市青秀区金浦路458号" };
            var a3 = new Address { City = "南宁", PostalCode = "530600", Street = "广西南宁市西乡塘区五里亭38号" };
            Addresses = new List<Address> { a1, a2, a3 };
        }
    3.建立控制器
    代码：
namespace MvcEditorTemplateDemo.Controllers
{
    public class UserWithAddressController : Controller
    {
        //
        // GET: /UserWithAddress/

public ActionResult Index()
        {
            return View(new User());
        }

}
}
    4. 建立视图
    给UserWithAddress控制器的Index方法添加视图：
@model MvcEditorTemplateDemo.Models.User
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<p>
@Html.Label("用户名")
@Html.EditorFor(model => model.Name)
</p>

<h2>送货地址</h2>
@Html.EditorFor(model=>model.Addresses)
     5.测试
     User的Addresses属性默认的编辑模板只是把Address的Street属性给编历了出来。如图：
     

6.创建自定义模板
     6.1建立模版文件夹
        在View的share文件夹下新建“EditorTemplates”文件夹，一定要命名为“EditorTemplates”。
     6.2建立自定义的视图
        在view/share/EditorTemplates文件夹下新建视图：Address（与类名要保持一致）。Model类为Address，勾选Create as a partial view。

//@Html.EditorFor(model=>model.Addresses)这里=>model.Addresses为Address类型。所以视图名称要叫Address.

代码：
@model MvcEditorTemplateDemo.Models.Address

<div style="float:left;margin-right:20px;padding:5px;">
    <h3>
        送货地址</h3>
    <p>
        @Html.Label("城市")
        @Html.TextBoxFor(x => x.City)
    </p>
    <p>
        @Html.Label("地址")
        @Html.TextBoxFor(x => x.Street)
    </p>
    <p>
        @Html.Label("邮政编码")
        @Html.TextBoxFor(x => x.PostalCode)
    </p>   
</div>
     7.测试
     MVC框架会自
     

编辑模板（Editor Template）指的是在ASP.NET MVC应用程序中，基于对象属性的数据类型通过Razor视图渲染后，自动产生表单Input元素。ASP.NET MVC包含了若干的编辑模板，当然我们也可以实现扩展。编辑模板类似于局部视图，不同的是，局部视图通过name来渲染，而编辑模板通过类型来渲染。

举个栗子，@Html.EditorFor(model => model.Property)，如果Property类型为string，那么@Html.Editor 会创建一个Type=Text的Input元素；如果Property类型为Password，那么会创建一个Type=Password的Input元素。所以EditorFor helper是基于model 属性的数据类型来渲染生成HTML。

不过美中不足的是，默认产生的HTML如下所示：

可以看到class=”text-box single-line”，但先前提到过，Bootstrap Form元素class必须是 form-control。

所以，为了让Editor helper生成class为form-control的表单元素，我们需要创建一个自定义的编辑模板来重写旧的模板。你需要如下操作：

• 在Shared文件夹中创建名为EditorTemplates（注意要一样的名称）的文件夹
• 添加名为string.cshtml（注意要一样的名称）文件，并添加如下代码：//model => model.Property)，这里Property类型为string。所以视图要命名为string

@model string
@Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, new
{
    @class = "form-control"
})

在上述代码中，我们调用 @Html.TextBox方法，并且传递了一个空的字符串作为textbox的name。这将会让model的属性名作为生成的textbox的name，并且textbox显示的内容是model的值，最后追加了名为class的attribute，而且其值为”form-control”。

重新生成项目，发现新生成的input元素它的class已经改为”form-control“了。如下所示：

• 非基元类型

ASP.NET MVC能让开发者创建根据自定义DataType的编辑模板，比如自动生成多行文本框并且规定行数为3行，也是同样的操作：

• 添加MultilineText. Cshtml（注意名称相同）文件到EditorTemplates中
• 添加如下代码：

@model string
@Html.TextArea("", ViewData.TemplateInfo.FormattedModelValue.
ToString(), new { @class = "form-control", rows = 3 })

• 为了让我们的Model的属性在渲染时采用MultilineText.cshtml编辑模板，我们需要为属性指定DataType attribute为MultilineText:

 [DataType(DataType.MultilineText)]
  public string Description { get; set; } 

最终显示如下所示：