mvc Html.Editor 自定义模板

在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。
代码：
@model MvcEditorTemplateDemo.Models.Address

<div style="float:left;margin-right:20px;background-color: #b2c5e6;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框架会自




对于使用下拉列表的字段，需要在