扩展 HTML 助手

Question

我希望生成的代码类似于：

<div class="form-group">
    <label for="email">Email address</label>
    <input type="email" class="form-control" id="email" placeholder="Enter email">
</div>

使用这样的东西：

@Html.LabelledTextBoxFor(model => model.EmailAddress)

标签文本从 model.EmailAddress 派生的位置

这将使用数据注释来完成，例如

[Displayname("Email Address]

最好的方法是什么？

这会影响使用 jquery val 自动生成的客户端 JS 验证吗？

Answer 1

我写了一个扩展方法，也许这会有所帮助：

public static MvcHtmlString LabelledTextBoxFor<TModel, TResult>(this HtmlHelper<TModel> html, Expression<Func<TModel, TResult>> expression)
{
    ExpressionType type = expression.Body.NodeType;
    if (type == ExpressionType.MemberAccess)
    {
       MemberExpression memberExpression = (MemberExpression) expression.Body;
       var propName = memberExpression.Member.Name;

       var member = memberExpression.Member as PropertyInfo;

       var attributes = member.GetCustomAttributes();

       StringBuilder sb = new StringBuilder();
       foreach (var attribute in attributes)
       {
           if (attribute is DisplayAttribute)
           {
               DisplayAttribute d = attribute as DisplayAttribute;
               var displayName = d.Name;
               sb.Append("<div class=\"form-group\">");
               sb.AppendFormat("<label for=\"{0}\">{1}</label>", propName, displayName);
               sb.AppendFormat(
                        "<input type=\"email\" class=\"form-control\" id=\"{0}\" placeholder=\"Enter email\">",
                        propName);
               sb.Append("</div>");
               return MvcHtmlString.Create(sb.ToString());
             }
         }

     }
       return MvcHtmlString.Create("");
 }

您可以使用默认显示属性来指定显示名称。不需要自定义属性。您可以像这样使用此扩展：

@Html.LabelledTextBoxFor(model => model.EmailAddress)

注意：我自己试过了，它工作正常。

更新：更简单的版本

public static MvcHtmlString LabelledTextBoxFor2<TModel, TResult>(this HtmlHelper<TModel> html, Expression<Func<TModel, TResult>> expression)
    {
        ExpressionType type = expression.Body.NodeType;
        if (type == ExpressionType.MemberAccess)
        {
            var metadata = ModelMetadata.FromLambdaExpression(expression, html.ViewData);
            var displayName = metadata.DisplayName;
            var propName = metadata.PropertyName;

            StringBuilder sb = new StringBuilder();

            sb.Append("<div class=\"form-group\">");
            sb.AppendFormat("<label for=\"{0}\">{1}</label>", propName, displayName);
            sb.AppendFormat(
                        "<input type=\"email\" class=\"form-control\" id=\"{0}\" placeholder=\"Enter email\">",
                        propName);
             sb.Append("</div>");
             return MvcHtmlString.Create(sb.ToString());
        }

        return MvcHtmlString.Create("");
    }

Answer 2

我会使用@Html.EditorFor 模板。因此，在您的 MVC 项目的 Views/Shared 中创建 EditorTemplates 文件夹，名称为 EmailAddress.cshtml - 它会为模型中定义的每个 [DataType(DataType.EmailAddress)] 显示此模板。 p>

所以：EmailAddress.cshtml 应该看起来像这样：

<div class="form-group">
<label for="email">@Html.LabelFor(x => x)</label>
@Html.TextBoxFor(x => x, new { @class = "form-control", placeholder = ViewData.ModelMetadata.Watermark })
</div>

模型应如下所示：

public class SomeModel {

    [DataType(DataType.EmailAddress)]
    [Display(Name="Some string for LabelFor", Prompt = "Placeholder in input"]
    public string SomeEmail { get; set; }
}

请注意，我使用了 Display metadata 的 Prompt 属性，我通过 EmailAddress.cshtml 中的 ViewData.ModelMetadata.Watermark 链接到占位符。 Html.LabelFor 将始终从 Display 中获取属性 Name，并且需要 DataType 用于 EditorTemplates 和模型属性之间的链接。

并通过使用来调用所有这些“魔法”

@Html.EditorFor(m=>m.SomeEmail)

在您使用SomeMode 模型的页面上。

我希望这确实有意义。

Answer 3

无需重新发明轮子。查看TwitterBootstrapMVC。

您要编写的代码类似于以下内容：

@Html.Bootstrap().FormGroup().TextBoxFor(model => model.EmailAddress).Placeholder("Enter email")

---

免责声明： 我是 TwitterBootstrapMVC 的作者。

用于 Bootstrap 3 的 TwitterBootstrapMVC 不是免费的。请参阅网站上的详细信息。

Answer 4

数据注释进入属性上方的视图模型中：

[DisplayName("Email Address")]
public string EmailAddress { get; set; }

那么，在你看来，你会有这样的东西：

@Html.LabelFor(m => m.EmailAddress)
@Html.TextBoxFor(m => m.EmailAddress, new { @placeholder="Enter email", @class="form-control", @id="email" })