你的位置:首页 > ASP.net教程

[ASP.net教程]爱上MVC~为Html.EditorForModel自定义模版


回到目录

挺有意思的一件事

对于MVC视图渲染来说,大家应该不会陌生,但对于模型的渲染,不知道是否听说过,主要是说Model通过它属性的相关特性(DataType,UIHint)来将它们自动渲染到View上,这是一个比较不错的技术,因为使用传统的Html.EditorForModel去渲染是不能满足我们要求的,因为他只是在页面上渲染Input文本框,如果希望出现下拉列表,复杂的单选和复选,它是实现不了的,这需要我们进行定制,即自定义的模版!

模版文件夹位于shared/EditorTemplates/下面

这些模版需要通过模型属性的UIHint来指定,如[UIHint("_EnumDropdownList")],表示使用一个叫_EnumDropdownList.cshtml的模版文件来渲染这个属性,当然对于系统模版来说,你可以直接使用它们,也是使用UIHint特性来指定的.

下面代码中是我定义ViewModel的代码,有系统的UIHint,如MultilineText,Bool等,也有自定义的模版如_EnumRadio,_EnumCheckbox等

    [DisplayName("标题")]    public string Name { get; set; }    [DisplayName("年纪")]    public int Age { get; set; }    [DisplayName("Email")]    [UIHint("MultilineText")]    public string Email { get; set; }    [DisplayName("类型_EnumRadio"), EnumDataType(typeof(Type))]    [UIHint("_EnumRadio")]    public Type Type { get; set; }    [DisplayName("类型_EnumCheckbox"), EnumDataType(typeof(Type))]    [UIHint("_EnumCheckbox")]    public Type Type2 { get; set; }    [DisplayName("类型_EnumDropdownList"), EnumDataType(typeof(Type))]    [UIHint("_EnumDropdownList")]    public Type Type3 { get; set; }    [DisplayName("出生日期")]    [UIHint("_DateTime")]    public DateTime Birthday { get; set; }    [DisplayName("性别")]    [UIHint("Bool")]    public bool Sex { get; set; }

我们来看一下,如何在/shared/EditorTemplates下建立自定义的模版,下面大叔将自己的几个模版分想一下

日期时间选择器

@model DateTime@Html.TextBoxFor(m => m, new { onfocus = "WdatePicker({isShowWeek:true})", @class = "Wdate", })<script src="~/Scripts/jquery-1.4.1.min.js"></script><script src="~/Scripts/My97DatePicker4.7/WdatePicker.js"></script>

枚举-下拉列表框

@model Enum@using Lind.DDD.Utils;@Html.DropDownListFor(m => m, Enum.GetValues(Model.GetType())  .Cast<Enum>()  .Select(m =>  {    int enumVal = Convert.ToInt32(m);    return new SelectListItem()    {      Selected = (Convert.ToInt32(Model)== enumVal),      Text = m.GetDescription(),      Value = enumVal.ToString()    };  }))

枚举-单选按钮组

@model Enum@using Lind.DDD.Utils;@{  var name = Model.GetType().Name;  var list = Enum.GetValues(Model.GetType())   .Cast<Enum>()   .Select(m =>   {     int enumVal = Convert.ToInt32(m);     return new SelectListItem     {       Selected = (Convert.ToInt32(Model) == enumVal),       Text = m.GetDescription(),       Value = enumVal.ToString()     };   });}@foreach (var item in list){  string isSel = item.Value == Convert.ToInt32(Model).ToString() ? "checked='checked'" : "";  <input type="radio" name="@name" id="@(name + item.Value)" value="@item.Value" @isSel/><label for="@(name + item.Value)">@item.Text</label>}

枚举-筛选按钮组

@model Enum@using Lind.DDD.Utils;@{  string name = ViewData.TemplateInfo.HtmlFieldPrefix;  var list = Enum.GetValues(Model.GetType())  .Cast<Enum>()  .Select(m =>  {    int enumVal = Convert.ToInt32(m);    return new SelectListItem()    {      Selected = (Convert.ToInt32(Model) == enumVal),      Text = m.GetDescription(),      Value = enumVal.ToString()    };  });}@foreach (var item in list){  string isSel = item.Value == Convert.ToInt32(Model).ToString() ? "checked='checked'" : "";  <input type="checkbox" name="@name" id="@(name + item.Value)" value="@item.Value" @isSel/><label for="@(name + item.Value)">@item.Text</label>}

怎么样,这种代码挺有意思吧,以后再渲染时,直接在属性上标识即可,它的View会动态去自动渲染!

这种功能对插件模块开发,换肤开发很有效果!

回到目录