扩展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

数据注解走在上面属性的视图模型：

[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" }) 

Answer 2

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

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(""); 
} 

您可以使用默认显示属性来指定显示名称。无需定制attributes.And你可以使用这个扩展这样的：

@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 3

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

所以：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; } 
} 

注意这里，我用显示屏元数据的Prompt属性，我通过ViewData.ModelMetadata.Watermark在EmailAddress.cshtml链接到占位符。 Html.LabelFor将始终从Display中获取属性名称，并且需要DataType以在EditorTemplates和model属性之间进行链接。

，并通过使用

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

页面上，在您使用SomeMode模型调用所有这“神奇”。

我希望这是有道理的。

Answer 4

无需重新发明轮子。退房TwitterBootstrapMVC。

的代码你会写作将类似于下面：

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

---

免责声明： 我TwitterBootstrapMVC的authot。

用于Bootstrap 3的TwitterBootstrapMVC不是免费的。在网站上查看详情。