爱上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会动态去自动渲染!

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

本文转自博客园张占岭(仓储大叔)的博客,原文链接:爱上MVC~为Html.EditorForModel自定义模版,如需转载请自行联系原博主。

目录
相关文章
|
7月前
|
JavaScript
自定义全能搜索HTML源码
自定义全能搜索HTML源码
59 1
自定义全能搜索HTML源码
|
7月前
|
敏捷开发
【sgCreateTableColumn】自定义小工具:敏捷开发→自动化生成表格列html代码(表格列生成工具)[基于el-table-column]
【sgCreateTableColumn】自定义小工具:敏捷开发→自动化生成表格列html代码(表格列生成工具)[基于el-table-column]
|
1月前
利用html2canvas插件自定义生成名片信息并保存图片
这是一个利用html2canvas插件自定义生成名片信息并保存图片,自定义上传头像,自定义输入个人信息内容,自定义图片名称,并将生成的图片保存到本地
37 1
利用html2canvas插件自定义生成名片信息并保存图片
|
2月前
|
移动开发 人工智能 前端开发
介绍一些免费 的 html 5模版网站 和配色 网站
介绍一些免费 的 html 5模版网站 和配色 网站
320 3
|
3月前
|
前端开发
Twaver-HTML5基础学习(28)工具条(添加自定义按钮_自定义事件)
这篇文章介绍了如何在Twaver-HTML5中创建工具条,添加自定义按钮,并绑定自定义事件,包括放大、缩小、占满屏幕和重置画布大小的功能。
56 11
|
2月前
|
前端开发 Java 数据库
springBoot:template engine&自定义一个mvc&后端给前端传数据&增删改查 (三)
本文介绍了如何自定义一个 MVC 框架,包括后端向前端传递数据、前后端代理配置、实现增删改查功能以及分页查询。详细展示了代码示例,从配置文件到控制器、服务层和数据访问层的实现,帮助开发者快速理解和应用。
|
3月前
|
数据安全/隐私保护
自定义密码访问单页HTML源码
自定义密码访问单页HTML源码,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
55 1
|
4月前
|
数据安全/隐私保护
自定义密码访问跳转页面HTML源码
自定义密码访问跳转页面HTML源码,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
55 0
自定义密码访问跳转页面HTML源码
|
4月前
|
前端开发 程序员
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了,来制作属于我们程序员的浪漫吧!
103 0
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
|
6月前
|
Web App开发 前端开发 Java
基于Spring3 MVC实现基于HTML form表单文件上传
基于Spring3 MVC实现基于HTML form表单文件上传
47 7
基于Spring3 MVC实现基于HTML form表单文件上传