爱上MVC~为Html.EditorForModel自定义模版

回到目录

挺有意思的一件事

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

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

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQsAAACXCAIAAACN5OmJAAAJ4ElEQVR4nO2dP24bORSHfYd0KtzFhdMlN/ApklPkCkGwUJmt0xgG7CBnSAoXcaXGzarZ3Wplp06yBdvdYoABzff44yPnHzn6fSAEakQ+vpH5zYysoX3iCCFxTpZOgJCqWcCQ7XZ78ZT5cyDEyNyGbLfb9+9/+/njV19oCKmZyQ0JThe9Ht1TGkIqJ8+Q/X6fO0CnASgxQ049+qe5owNGD0hWSYYhd3d35+fnuQOUGeLP3b4++oSmISSJ1ZC7u7vnz58XTKnhhuCNQ6AhJInJkF6PrCl1kcJylSW3qBuDetDMGIoQSdoQX4+sKfX27VtsyNcvX5Of1PHlllqRMiQrhMRIGBLokTWlPn/+jA358OF3y++y8MwOEpMZyuRpCLGDDNnv9+fn56dPsYfe7/fYkNevX5d9Us86LYAtNIQkmfb7kDdv3mBJ/vrz75gh8sCvfsw41YhFA/EJUZnWEHmDScD19XXyKouQBZnWkNvbW2xIx6Q5EDIE3ttLCIKGEIKgIYQgaAghCBpCCKIZQ7gykSxCG4ZwZSJZikoNCU4XXJlIlmIOQ2ZbmQjuPZF3nRTsiHGssjgD8yETMbkhc65MdJm3MNpfjbX3H4dgiUCLFmFaQ2ZemejglB3XkCG9yuLQkEWY0JAFVyaql1jB7cDGXkE9ebUme+EtljiWDEFwMoSpDFlqZaI8h6jXXclrMNlL3RHcS70Ss+RT1oZiTMEkhiy4MhFM4uGGJIcLdrnYED+UcSx/o8yTFDO+IQuuTHTm5YfTGSKfTn0OSWZFhlDj9yGjrEyUR1b/0K56C47HapfkxpghamScM8hQDRV/d0keNRqy7pWJnL5tUaMhK16ZyGN8c9RoCCH1QEMIQZy8+vgfCwtLrNAQFhZUaAgLCyo0hIUFFRrCwoLKGgzJ/e3E4gmzNFTaM0ROd+fdM99tlF8s+k+TQ/gMSTXA3z7DG1WW/yg7vqbSmCHOuU/3h7Obw+bqcHZz+HR/6AXonbm4uNjtdl19t9sFLxnPIf0UwXPF8qr/OHNRB7VkQkP60p4hm6vDu28PX/745923h81VaEivR3/S8CWZ2RB7m4kKDRle2jNEJXDg4ulSxLEMkRdL8oJE3QIaxK7oLJc6QUcZSr3Aw13UnI+5tGfI5urgl9kMiTmDe8k26qv+YyyOPUN7PuroeNxjK60a8vPHL2BId2XVX2L1H0tGOYdgQ5JtZMxXmiHqoT0WJEgguRd49Fjw4yxrMyT4aK5ejFkGGngOwRvt5xBLhlnJW0Y3JnAkpVVD5FVW/8vc/gQy+m97Y6cI+VSeDUCDV5E5KpvF8lTTk3WZs/oY2/3jLO0ZMpzF94KlodKYIVMUyeIpsdRTaAgLCyo0hIUFFRrCwoIK16kTgqAhhCBoCCEIGkIIgoYQgliJIVlrDJOM9SeiR48jtw8JmzV6Wa8V/P3Vhg15uL78/uzk4frSZa4xtHCq/X+CAkaPM1vHZBBLZBqyJI8vNo8vNl09a42hBRqSDEJDqsY/gbjMFVQWgpnt/0uQ2D/0iP3Hj6Aie8lHEEcNEkvAeKkT6wXiJLvE0m6O9gzpTh3+CcRNb4iLzMjhFfmIK2oC9jagARgr5nlQD/bCMnr9tGdId/bwTyAuc42hhbJ5U1yJnTGyDOlD4TbJIDIODWmM4ATiMtcYWpjZEBeZWHhqxuZf1hwFDYxpOBpSP1lrDJPIq2r1IrvfLjvG4sR6uaezsG9wGkFNyTKcOmVx2rIuI6uPsXzaYiWGVELTU4Go0BDlOD0wzrjpkWWhIYQgaAghCBpCCIKGEIKgIYQgaAghCBpCCIKGEIJoz5D+D1rH/rK1G3WNYe43gAXtY7eKlMXJ6lVG2UCNfqPaniEdvRsdS60xtPy8k22MY1mYbf7F7u8q61gzazNk3DWG9sk9pA0NqZkVGuJGWkHlXxKo10KxLZY4fmNpCIjj97VcmyVHL9v95Lthz7ByaIjOqTiHyHnsIjMSb1F9SEYGYS298FjJyAWj+28gfscqZ52GjLjGUG4ZxZAy94p7BY3xNFVfzR2dhixMzJAZ1hgONMSVzvWCfGJtCgzJHZ2GLIw0ZKI1hv3POKgHjYOOakD/qTqW3AiaxZ5aOga5gXdADWJ5N9RHNcPKac8Q9fuQthhlfhQHaWh21kB7hozOqWDqscaKkxuqrYN3JdAQQhA0hBAEDSEEQUMIQdAQQhA0hBAEDSEEQUMIQazEkHrWGIJQrvQ7O9lrzu/+huS8gi8o12OIX6/k/xgGNywNCSh7zTn51LEsCdCQxXj58aX/dKk1hpYglo0FoWjIPKzQEDfLGkN54aS2SUYOooEEgo3JOPZLO+POBqdE3AW8A23RniEvP770S7dxkTWGcvqqj2rkskpWPjgNSxzQRq2DJNulPUM68DlknjWGIxqinjGCXvIonqzEcsB72g8HxlLrNKQiYobMucYwyxDjhE5uGXjmAXsKXqIhzbPUGkO1pXs6pdT2sTgyh1gv2UWNKTeC/ZU7BXIOhpCPQZxGWYkhhEwEDQmPdk0f8Mjo0BBCEDSEEAQNIQRBQwhB0BBCEDSEEAQNIQRBQwhBrMSQOtcYjv4t5Fj5yO3D8soYvazXgl/jrscQv17JGsMR48iAM3cfJf/YXWHzjF5Gq4Y0scbQ0RBDEBoyCU2sMXTajehBJYgWiyNTkr3kI8hHDYJ3NjlNjW+a3AXLvuOhp6M9QxpaYxirxH78Qyr20WM7G3sKNhr3ArRR6+DNn5/2DOloYo0hrtgj2yvyCJ0cPZZS7lE8Fhnno9ZpyAg0scYQV4aMlUzDMjrWJtY4BmhgTMNF3kPL6NPRqiEBda4xDF4K4sgRZQKxrGK93NNZKPPHuxYbSA4nd0GGAgOpI8p3T32HZ2YlhqyMRaYCUaEhyvG1knyWTYN00BBCEDSEEAQNIQRBQwhB0BBCEDSEEAQNIQRBQwhBrMSQFawxlDdiFI9rHCKr19F+g9mwIQ/Xl9+fnTxcX7q1rDGcYRbG7qcq63gMNGzI44vN44tNV1/HGkMaUiGtGuKfQFzdawzlJUpsiwyOexWnDTJU98LRkIboTh3+CcRVv8YwK46sx9qoOePGybHUvcDjrpv2DOnOHv4JxDW1xtBph221DR7dknM/Fo5DQwDtGeKefgLpaHGN4TyG5I5FQwKaNERS+RpD0EvdErzqt/GfgsyTYWU0NX91H4+KlRhCyETQkPAYeYSHSQKgIYQgaAghCBpCCIKGEIKgIYQg5jDkQrDdbmcYl5DhLGMIJSGtMJ8h3a2E/Q2FlIQ0wZKGAEnkvQ9qm6m/3ZM3cUw6HKmQcQz5dH84uzlsrg5nN4dP94fg1d1ud3t7++vnv74kvSdqQIsh+KXh0AfinPsfdAuP4lBYPVsAAAAASUVORK5CYII=" alt="" />

这些模版需要通过模型属性的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会动态去自动渲染！

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

回到目录