Question

在razor视图中我使用了html helper

 @Html.TextBoxFor(model => model.YearsInService, new { @class = "col-lg-1" })

呈现以下html

<input id="YearsInService" class="col-lg-1" type="text" value="" name="YearsInService" 
       data-val-required="The YearsInService field is required." 
       data-val-number="The field YearsInService must be a number." 
       data-val="true" disabled="disabled">

因为我想用工具提示消息like this实现验证我需要解决方案输入元素像这样呈现

<input 
  data-msg-number="The field YearsInService must be a number."       
  data-rule-number="true"    
  data-rule-required="true"   
  id="YearsInService" name="YearsInService" type="text" value="" />

问题是：如何构建自定义mvc帮助器来渲染第二个html 剃刀视图中的代码？

Answer 1

您可以创建一个HtmlHelper扩展方法来输出您的html。

public static MvcHtmlString ToolTipTextBoxFor<TModel, TValue>(this HtmlHelper<TModel> helper, 
    Expression<Func<TModel, TValue>> expression, object htmlAttributes)
{
    IDictionary<string, object> attributes = HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
    attributes.Add("data-msg-number", "The field YearsInService must be a number.");
    attributes.Add("data-rule-number", true);
    ... other 'fixed' attributes as required
    return InputExtensions.TextBoxFor(helper, expression, attributes);
}

然后在视图中

@ToolTipTextBoxFor(m => m.YearsInService, new { @class = "col-lg-1" })

当然你可以创建其他重载以匹配TextBoxFor()方法重载。

修改

根据您的评论，您还希望根据属性验证属性生成data-rule-属性。为此，您可以获得ModelMetatdata

ModelMetadata metaData = ModelMetadata.FromLambdaExpression(expression, helper.ViewData);

然后检查其属性

例如

if (metaData.IsRequired) { attributes.Add("data-rule-required", true); }

Answer 2

如果我正确理解了您的需求，我相信您需要Editor Template

Answer 3

您可以使用TextBoxFor重载之一添加自定义html属性：

@Html.TextBoxFor(x => x.YearsInService, new { data_msg_number = "The field YearsInService must be a number.", data_rule_number="true" })

如果您可以使用EditorFor代替TextBoxFor，那么我建议您创建编辑器模板。 There is nice article describing the basics

如果您想创建新的Html.MySuperTextBoxFor扩展方法，请查看this。

用于呈现自定义文本框的mvc助手

3 个答案: