DropDownList的MVC2 EditorTemplate

时间:2010-04-29 19:50:24

标签: asp.net templates asp.net-mvc-2 drop-down-menu

过去一周的大部分时间都花在了MVC2的新模板功能上。我很难尝试使用DropDownList模板。我一直在努力解决的最大问题是如何将下拉列表的源数据提供给模板。我看了很多例子,你可以将源数据放在ViewData字典中(ViewData [“DropDownSourceValuesKey”])然后在模板本身中检索它们(var sourceValues = ViewData [“DropDownSourceValuesKey”];)这样可行,但我做了不喜欢有一个愚蠢的字符串作为使这项工作的lynch引脚。

以下是我提出的一种方法,希望对此方法有所了解:

这是我的设计目标:

  • 视图模型应包含下拉列表的源数据
  • 限制傻字符串
  • 不使用ViewData词典
  • Controller负责使用下拉列表的源数据填充属性

这是我的视图模型:

   public class CustomerViewModel
    {
        [ScaffoldColumn(false)]
        public String CustomerCode{ get; set; }

        [UIHint("DropDownList")]
        [DropDownList(DropDownListTargetProperty = "CustomerCode"]
        [DisplayName("Customer Code")]
        public IEnumerable<SelectListItem> CustomerCodeList { get; set; }

        public String FirstName { get; set; }
        public String LastName { get; set; }
        public String PhoneNumber { get; set; }
        public String Address1 { get; set; }
        public String Address2 { get; set; }
        public String City { get; set; }
        public String State { get; set; }
        public String Zip { get; set; }
    }

My View Model具有CustomerCode属性,该属性是用户从值列表中选择的值。我有一个CustomerCodeList属性,它是可能的CustomerCode值的列表,是下拉列表的源。我用DropDownListTargetProperty创建了一个DropDownList属性。 DropDownListTargetProperty指向将根据生成的下拉列表中的用户选择填充的属性(在本例中为CustomerCode属性)。

注意,CustomerCode属性有[ScaffoldColumn(false)],它强制生成器跳过生成的输出中的字段。

我的DropDownList.ascx文件将生成一个下拉列表表单元素,其中包含来自CustomerCodeList属性的源数据。生成的下拉列表将使用DropDownList属性中的DropDownListTargetProperty的值作为Select表单元素的Id和Name属性。因此生成的代码将如下所示:

<select id="CustomerCode" name="CustomerCode">
  <option>...
</select>

这很好用,因为在提交表单时,MVC将使用下拉列表中的选定值填充目标属性,因为生成的下拉列表的名称 IS 是目标属性。我有点想象它,因为CustomerCodeList属性是各种CustomerCode属性的扩展。我已将源数据与属性相关联。

这是我的控制器代码:

public ActionResult Create()
{
    //retrieve CustomerCodes from a datasource of your choosing
    List<CustomerCode> customerCodeList = modelService.GetCustomerCodeList();

    CustomerViewModel viewModel= new CustomerViewModel();
    viewModel.CustomerCodeList = customerCodeList.Select(s => new SelectListItem() { Text = s.CustomerCode, Value = s.CustomerCode, Selected = (s.CustomerCode == viewModel.CustomerCode) }).AsEnumerable();

    return View(viewModel);
}

这是DropDownListAttribute的代码:

namespace AutoForm.Attributes
{
    public class DropDownListAttribute : Attribute
    {
        public String DropDownListTargetProperty { get; set; }
    }
}

这是我的模板代码(DropDownList.ascx):

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<SelectListItem>>" %>
<%@ Import Namespace="AutoForm.Attributes"%>

<script runat="server">
    DropDownListAttribute GetDropDownListAttribute()
    {
        var dropDownListAttribute = new DropDownListAttribute();

        if (ViewData.ModelMetadata.AdditionalValues.ContainsKey("DropDownListAttribute"))
        {
            dropDownListAttribute = (DropDownListAttribute)ViewData.ModelMetadata.AdditionalValues["DropDownListAttribute"];
        }

        return dropDownListAttribute;        
    }
</script>    

<% DropDownListAttribute attribute = GetDropDownListAttribute();%>

<select id="<%= attribute.DropDownListTargetProperty %>" name="<%= attribute.DropDownListTargetProperty %>">
    <% foreach(SelectListItem item in ViewData.Model) 
       {%>
        <% if (item.Selected == true) {%>
            <option value="<%= item.Value %>" selected="true"><%= item.Text %></option>
        <% } %>
        <% else {%>
            <option value="<%= item.Value %>"><%= item.Text %></option>
        <% } %>
    <% } %>
</select>

我尝试使用Html.DropDownList帮助程序,但它不允许我更改生成的Select元素的Id和Name属性。

注意:您必须为DropDownListAttribute覆盖DataAnnotationsModelMetadataProvider的CreateMetadata方法。这是代码:

public class MetadataProvider : DataAnnotationsModelMetadataProvider
{
    protected override ModelMetadata CreateMetadata(IEnumerable<Attribute> attributes, Type containerType, Func<object> modelAccessor, Type modelType, string propertyName)
    {
        var metadata = base.CreateMetadata(attributes, containerType, modelAccessor, modelType, propertyName);
        var additionalValues = attributes.OfType<DropDownListAttribute>().FirstOrDefault();

        if (additionalValues != null)
        {
            metadata.AdditionalValues.Add("DropDownListAttribute", additionalValues);
        }

        return metadata;
    }
}

然后你必须在Global.asax.cs的Application_Start中调用新的MetadataProvider:

protected void Application_Start()
{
    RegisterRoutes(RouteTable.Routes);

    ModelMetadataProviders.Current = new MetadataProvider();
}

嗯,我希望这是有道理的,我希望这种方法可以节省你一些时间。我想请一些关于这种方法的反馈。有更好的方法吗?

3 个答案:

答案 0 :(得分:2)

我认为我找到了一个使用Html.EditorForModel()时可以使其工作的解决方案;使用EditorForModel()时,MVC使用Object.ascx循环遍历模型的所有属性,并为模型中的每个属性调用相应的模板。开箱即用的ASP.Net MVC在代码中有Object.ascx,但您可以创建自己的Object.ascx。只需在Shared View文件夹中创建一个EditorTemplates子文件夹即可。在那里创建一个Object.ascx文件。 (阅读这篇文章了解更多信息:http://bradwilson.typepad.com/blog/2009/10/aspnet-mvc-2-templates-part-3-default-templates.html

这是我的Object.ascx:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%@ Import Namespace="WebAppSolutions.Helpers" %>
<% if (ViewData.TemplateInfo.TemplateDepth > 1) { %>
<%= ViewData.ModelMetadata.SimpleDisplayText%>
<% }
else { %>    
<% foreach (var prop in ViewData.ModelMetadata.Properties.Where(pm => pm.ShowForEdit && !ViewData.TemplateInfo.Visited(pm))) { %>

    <% var htmlFieldName = Html.HtmlFieldNameFor(prop.PropertyName);%>

    <% if (prop.HideSurroundingHtml) { %>
        <%= Html.Editor(htmlFieldName)%>
    <% }
       else { %>
        <div id="<%= htmlFieldName %>Container" class="editor-field">
            <% if (!String.IsNullOrEmpty(Html.Label(prop.PropertyName).ToHtmlString())) { %>
                <%= Html.Label(prop.PropertyName, Html.HtmlDisplayName(prop.PropertyName), prop.IsRequired)%>
            <% } %>
            <%= Html.Editor(prop.PropertyName, "", htmlFieldName)%>
            <%= Html.ValidationMessage(prop.PropertyName, "*") %>
        </div>
    <% } %>
<% } %>

&lt;%}%&gt;

我的WebAppSolutions.Helpers for HtmlFieldNameFor和HtmlDisplayName中有一些自定义代码。这些帮助程序从应用于视图模型中的属性的属性中检索数据。

    public static String HtmlFieldNameFor<TModel>(this HtmlHelper<TModel> html, String propertyName)
    {
        ModelMetadata modelMetaData = GetModelMetaData(html, propertyName);
        return GetHtmlFieldName(modelMetaData, propertyName);
    }

    public static String HtmlDisplayName<TModel>(this HtmlHelper<TModel> html, String propertyName)
    {
        ModelMetadata modelMetaData = GetModelMetaData(html, propertyName);
        return modelMetaData.DisplayName ?? propertyName;
    }
    private static ModelMetadata GetModelMetaData<TModel>(HtmlHelper<TModel> html, String propertyName)
    {
        ModelMetadata modelMetaData = ModelMetadata.FromStringExpression(propertyName, html.ViewData);
        return modelMetaData;
    }

    private static String GetHtmlFieldName(ModelMetadata modelMetaData, string defaultHtmlFieldName)
    {
        PropertyExtendedMetaDataAttribute propertyExtendedMetaDataAttribute = GetPropertyExtendedMetaDataAttribute(modelMetaData);
        return propertyExtendedMetaDataAttribute.HtmlFieldName ?? defaultHtmlFieldName;
    }

使用EditorModelFor()使其工作的关键是这个(在上面的Object.ascx中应该是第20行):

<%= Html.Editor(prop.PropertyName, "", htmlFieldName)%>

prop.PropertyName是ViewModel中的属性,包含将成为DropDownList的数据列表。 htmlFieldName是DropDownList属性正在替换的隐藏属性的名称。有意义吗?

我希望这会对你有所帮助。

答案 1 :(得分:1)

完美。这就是我要找的东西。谢谢!

但是你的示例模型是简单的模型。像

这样复杂的视图模型怎么样?
public class MaintainServicePackageViewModel
{
    public IEnumerable<ServicePackageWithOwnerName> ServicePackageWithOwnerName { get; set; }
    public ServicePackageWithOwnerName CurrentServicePackage { get; set; }
    public IEnumerable<ServiceWithPackageName> ServiceInPackage { get; set; }
}

public class ServicePackageWithOwnerName : ServicePackage
{
    [UIHint("DropDownList")]
    [DropDownList(DropDownListTargetProperty = "Owner")]
    [DisplayNameLocalized(typeof(Resources.Globalization), "OwnerName")]
    public IEnumerable<SelectListItem> OwnerName { get; set; }
}

OwnerName设置为下拉列表,但它不是viewmodel的直接元素,而是ServicePackageWithOwnerName的子元素,它是viewmodel的元素。在这种情况下,无法在控制器中设置OwnerName值,如何解决这个问题?欣赏!

此致

杰克

答案 2 :(得分:0)

这是我在Code Project中的这篇文章的方法:

One Editor Template for all DropDownLists in ASP.Net MVC