3

我有这门课

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>
4

2 回答 2

4

我同意上面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格式化decimal2 位小数。ApplyFormatInEditMode如果您想使用此属性来填充视图中的可编辑文本字段，这一点很重要。所以我将它设置为true，因为在我的情况下，我想把它放到一个文本字段中。

通常，您必须EditorFor像这样在视图中使用 -Extension：

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

问题：

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

使用 -Extension提供自己的 CSS 类（或其他 HTML 属性，如tabindex或readonly）EditorFor就是编写自定义 HTML-Helper，如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-Attribute 并附加其他额外的 HTML 属性。对于 HTML 解析，我使用 HtmlAgilityPack（使用 google）。

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

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

使用这个助手，你的货币价值应该很好地显示在视图中。

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

因为此模型绑定器需要一个decimal?-value，但获取的是字符串格式的值，所以将引发异常。所以我们必须将格式化的字符串转换回它的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());

    ...
}

也许解决方案会帮助某人。

于 2013-02-04T13:00:00.210 回答
3

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

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

于 2012-10-01T14:54:49.747 回答