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

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

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

我见过其他实现，其中HTML-Parameters已使用模型中的注释附加到属性。这在我看来是不好的，因为视图信息，如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 - 扩展名，如下所示：

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

问题：

我不能在这里附加CSS类，因为我可以使用Html.TextBoxFor作为例子。

使用tabindex提供自己的CSS类（或其他HTML属性，如readonly或EditorFor） - 扩展是编写自定义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 - 扩展来生成HTML代码并解析此HTML输出字符串以替换创建的 CSS Html-Attribute包含我们自己的CSS类，并附加其他HTML属性。对于HTML解析，我使用HtmlAgilityPack（使用谷歌）。

在View中，您可以像这样使用此帮助程序（不要忘记将相应的命名空间放入视图目录中的web.config中）：

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

使用此助手，您的货币值应在视图中良好显示。

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

由于此模型绑定器需要decimal? - 值，但获取字符串格式化值，因此将引发异常。所以我们必须这样做将格式化的字符串转换回它的decimal? - 表示。因此，有必要实施自己的ModelBinder - 实施将货币十进制值转换回默认十进制值（“42,13€”=＆gt;“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());

    ...
}

也许解决方案可以帮助别人。

Answer 2

使用Contact.cshtml中的自定义标记创建名为Views/Shared/EditorTemplates的部分视图。这将覆盖默认编辑器。

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

如何使用razor自定义EditorFor CSS

2 个答案: