1. 程式人生 > >為Html.EditorForModel自定義模版

為Html.EditorForModel自定義模版

cte cfg 下拉列表框 ref tle lis date mode 自定義模版

對於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會動態去自動渲染!

這種功能對插件模塊開發,換膚開發很有效果!

為Html.EditorForModel自定義模版