为与模型绑定一起使用的输入创建我自己的HtmlHelper扩展

Question

我对当前的DropDownList实现不满意,因为我对选项标签不能做太多(仅支持选中,支持文本和值).我想在我可以设置禁用和其他个人选项的地方.

目前我正在通过javascript改变选项,但我认为这有点像一种hacky方式,我宁愿只是渲染正确的html开始.

我知道我可以创建一个使用select和option标签的模板,并根据需要制作选项 - 但是正常的DropDownList扩展添加了val的东西以及特定的名称和ID,我想在提交表单时是正确的数据绑定:

<select data-val="true" data-val-number="The field SelectedValue must be a number." id="ParentDropDown_SelectedValue" name="ParentDropDown.SelectedValue">

如何将这些属性添加到我自己的模板中？

Answer 1

你是对的,那些属性(特别是name属性)对于模型绑定至关重要.

假设您要创建一个自定义帮助器

public static MvcHtmlString CustomHelperFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression)

首先,您可以使用var fieldName = ExpressionHelper.GetExpressionText(expression);获取字段名称.

然后使用var fullBindingName = html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(fieldName);以获取全名,处理嵌套视图.

最后,您可以使用它将其转换为id属性var fieldId = TagBuilder.CreateSanitizedId(fullBindingName);.

因此,创建文本框的简单自定义帮助程序可以写为:

public static MvcHtmlString CustomHelperFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression)
{            
    var fieldName = ExpressionHelper.GetExpressionText(expression);
    var fullBindingName = html.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(fieldName);
    var fieldId = TagBuilder.CreateSanitizedId(fullBindingName);

    var metadata = ModelMetadata.FromLambdaExpression(expression, html.ViewData);
    var value = metadata.Model;

    TagBuilder tag = new TagBuilder("input");
    tag.Attributes.Add("name", fullBindingName);
    tag.Attributes.Add("id", fieldId);
    tag.Attributes.Add("type", "text");
    tag.Attributes.Add("value", value == null ? "" : value.ToString());

    var validationAttributes = html.GetUnobtrusiveValidationAttributes(fullBindingName, metadata);
    foreach (var key in validationAttributes.Keys)
    {
        tag.Attributes.Add(key, validationAttributes[key].ToString());
    }

    return new MvcHtmlString(tag.ToString(TagRenderMode.SelfClosing));
}

您可以在以下视图中使用它:

@Html.CustomHelperFor(model => model.ParentDropDown.SelectedValue)

它会产生以下html:

<input id="ParentDropDown_SelectedValue" name="ParentDropDown.SelectedValue" type="text" value="4">

希望能帮助到你!