如何自定义CSS EditorFor剃刀与

Question

我有这个类

public class Contact 
{ 
    public int Id { get; set; } 
    public string ContaSurname { get; set; } 
    public string ContaFirstname { get; set; } 
    // and other properties... 
} 

我想创建异体我编辑所有这些领域的一种形式。所以我用这个代码

<h2>Contact Record</h2> 

@Html.EditorFor(c => Model.Contact) 

这工作正常，但我想定制如何显示元素。例如，我希望每个字段都显示在与其标签相同的行中。因为现在，生成的HTML是这样的：

<div class="editor-label"> 
    <label for="Contact_ContaId">ContaId</label> 
</div> 
<div class="editor-field"> 
    <input id="Contact_ContaId" class="text-box single-line" type="text" value="108" name="Contact.ContaId"> 
</div> 

Answer 1

创建一个名为Contact.cshtml与Views/Shared/EditorTemplates您的自定义标记的局部视图。这将覆盖默认编辑器。

正如@smartcavemen所述，请参阅Brad Wilson's blog了解模板的介绍。

Answer 2

我同意jrummell以上的解决方案： 当您使用EditorFor -extension，你必须编写自定义 编辑模板来描述可视化组件。

在某些情况下，我认为使用具有相同数据类型的 几个模型属性的编辑器模板有点僵硬。在我的情况下，我想在我的模型中使用应显示为格式化字符串的十进制货币值。我想在我的视图中使用相应的CSS类来设置这些属性的样式。

我已经看到其他的实现，其中的HTML参数已被附加到使用模型中的注释属性。这在我看来是不好的，因为像CSS定义这样的视图信息应该在视图中而不是在数据模型中设置。

所以我工作的另一种解决方案：

我的模型包含decimal?属性，我想作为一个货币领域使用。 问题是，我想在模型中使用数据类型decimal?，但在视图中使用格式掩码（例如“42,13€”）将格式化字符串中的十进制值显示为 。

这里是我的模型定义：

[DataType(DataType.Currency), DisplayFormat(DataFormatString = "{0:C2}", ApplyFormatInEditMode = true)] 
public decimal? Price { get; set; } 

格式掩码0:C2格式化decimal有2位小数。 ApplyFormatInEditMode很重要， 如果您要使用此属性填充视图中的可编辑文本字段。所以我把它设置为true，因为在我的情况下我想把它放到一个文本框中。

通常你必须在这样的视图使用EditorFor -extension：

<%: Html.EditorFor(x => x.Price) %> 

问题：

我不能在这里添加CSS类，因为我可以用Html.TextBoxFor例如做。

要提供自己的CSS类（或其他HTML属性，如tabindex，或readonly）与EditorFor -extension是写一个自定义的HTML-助手， 像Html.CurrencyEditorFor。下面是执行：

public static MvcHtmlString CurrencyEditorFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression, Object htmlAttributes) 
{ 
    TagBuilder tb = new TagBuilder("input"); 

    // We invoke the original EditorFor-Helper 
    MvcHtmlString baseHtml = EditorExtensions.EditorFor<TModel, TValue>(html, expression); 

    // Parse the HTML base string, to refurbish the CSS classes 
    string basestring = baseHtml.ToHtmlString(); 

    HtmlDocument document = new HtmlDocument(); 
    document.LoadHtml(basestring); 
    HtmlAttributeCollection originalAttributes = document.DocumentNode.FirstChild.Attributes; 

    foreach(HtmlAttribute attr in originalAttributes) { 
    if(attr.Name != "class") { 
     tb.MergeAttribute(attr.Name, attr.Value); 
    } 
    } 

    // Add the HTML attributes and CSS class from the View 
    IDictionary<string, object> additionalAttributes = (IDictionary<string, object>) HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes); 

    foreach(KeyValuePair<string, object> attribute in additionalAttributes) { 
    if(attribute.Key == "class") { 
     tb.AddCssClass(attribute.Value.ToString()); 
    } else { 
     tb.MergeAttribute(attribute.Key, attribute.Value.ToString()); 
    } 
    } 

    return MvcHtmlString.Create(HttpUtility.HtmlDecode(tb.ToString(TagRenderMode.SelfClosing))); 
} 

的想法是使用原始EditorFor -extension产生的HTML代码，并解析这个HTML输出字符串用我们自己的CSS类来代替创建 CSS的HTML属性和追加其他额外的HTML属性。对于HTML解析，我使用HtmlAgilityPack（使用谷歌）。

在视图中，您可以使用这个助手是这样的（不要忘记把相应的命名空间到你的视图目录web.config！）：

<%: Html.CurrencyEditorFor(x => x.Price, new { @class = "mypricestyles", @readonly = "readonly", @tabindex = "-1" }) %> 

使用这个帮手，您的货币价值应在视图中显示得很好。

如果你想发布你的视图（表单），那么通常所有的模型属性将被发送到你的控制器的操作方法。 在我们的例子中，将会提交一个字符串格式的十进制值，这个值将由ASP.NET MVC内部模型绑定类来处理。

由于此模型联编程序期望decimal?值，但获取字符串格式化的值，将引发异常。所以我们必须 将格式化的字符串转换回decimal? - 表示。因此自己的ModelBinder - 实施是必要的，其中 将货币十进制值转换回默认的十进制值（“42,13€”=>“42.13”）。

这里就是这样一个模型绑定的实现：

public class DecimalModelBinder : IModelBinder 
{ 

    public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext) 
    { 
     object o = null; 
     decimal value; 

     var valueResult = bindingContext.ValueProvider.GetValue(bindingContext.ModelName); 
     var modelState = new ModelState { Value = valueResult }; 

     try { 

     if(bindingContext.ModelMetadata.DataTypeName == DataType.Currency.ToString()) { 
      if(decimal.TryParse(valueResult.AttemptedValue, NumberStyles.Currency, null, out value)) { 
      o = value; 
      } 
     } else { 
      o = Convert.ToDecimal(valueResult.AttemptedValue, CultureInfo.CurrentCulture); 
     } 

     } catch(FormatException e) { 
     modelState.Errors.Add(e); 
     } 

     bindingContext.ModelState.Add(bindingContext.ModelName, modelState); 
     return o; 
    } 
} 

粘合剂已在global.asax文件应用程序的登记：

protected void Application_Start() 
{ 
    ... 

    ModelBinders.Binders.Add(typeof(decimal), new DecimalModelBinder()); 
    ModelBinders.Binders.Add(typeof(decimal?), new DecimalModelBinder()); 

    ... 
} 

也许解决方案将帮助别人。