使EditorFor将十进制值呈现为type ="text".不是type ="number" [英] Make EditorFor render decimal value as type="text" not type="number"

问题描述

我在模型类中有两个属性:

I have two properties in a model class:

public int? IntTest { get; set; }
public decimal? DecimalTest { get; set; }

然后我用哪个进行渲染:

Which I then render with:

@Html.EditorFor(model => model.IntTest, new { htmlAttributes = new { @class = "form-control"} })
@Html.EditorFor(model => model.DecimalTest, new { htmlAttributes = new { @class = "form-control"} })

我希望它们都可以呈现为数字类型的html输入，但是十进制不是，我得到:

I'd expected both of them to render as html inputs of type number, but the decimal one doesn't, I get:

<input class="form-control text-box single-line" data-val="true" data-val-number="The field IntTest must be a number." id="IntTest" name="IntTest" type="number" value="" />
<input class="form-control text-box single-line" data-val="true" data-val-number="The field IntTest must be a number." id="DecimalTest" name="DecimalTest" type="text" value="" />

十进制值呈现为type="text"，而int注册为type="number".

The decimal value is rendered as type="text" whereas the int is registered as type="number".

此问题暗示这不是预期的行为，所以我做错了吗?

This question implies that isn't the expected behaviour so am I doing something wrong?

如果这是预期的行为，是否有任何方法可以更改EditorFor以将所有小数呈现为type="number"，而不必在每个小数域的htmlAttributes中添加type = "number"?

If that is the expected behaviour, is there any way of changing EditorFor to render all decimals as type="number", rather than having to add type = "number" in the htmlAttributes of every decimal field?

推荐答案

您看到的html是默认行为. EditorFor()方法使用默认模板(除非您为该类型创建了自定义EditorTemplate)，如

The html you are seeing is the default behavior. The EditorFor() methods use the default templates (unless you have created a custom EditorTemplate for the type) as defined in TemplateHelpers.cs.

对于typeof int(以及byte和long)，它使用NumberInputTemplate，对于typeof decimal，它使用DecimalTemplate.这些模板在 DefaultEditorTemplates.cs中定义用于decimal

For typeof int (and byte and long), it uses the NumberInputTemplate, and for typeof decimal it uses the DecimalTemplate. These templates are defined in DefaultEditorTemplates.cs which are for decimal

internal static string DecimalTemplate(HtmlHelper html)
{
    if (html.ViewContext.ViewData.TemplateInfo.FormattedModelValue == html.ViewContext.ViewData.ModelMetadata.Model)
    {
        html.ViewContext.ViewData.TemplateInfo.FormattedModelValue = String.Format(CultureInfo.CurrentCulture, "{0:0.00}", html.ViewContext.ViewData.ModelMetadata.Model);
    }
    return StringTemplate(html);
}

依次调用

internal static string StringTemplate(HtmlHelper html)
{
    return HtmlInputTemplateHelper(html);
}

和int

internal static string NumberInputTemplate(HtmlHelper html)
{
    return HtmlInputTemplateHelper(html, inputType: "number");
}

请注意，NumberInputTemplate将inputType定义为"number"，这会添加type="number"属性，而StringTemplate使用默认的inputType会生成type="text".

Note that the NumberInputTemplate defines the inputType as "number" which adds the type="number" attribute, where as StringTemplate uses the default inputType which generates type="text".

要为decimal添加type="number"，则需要使用任一方法手动添加属性

To add type="number" for a decimal, then you need to manually add the attribute, using either

@Html.EditorFor(m => m.DecimalTest, new { htmlAttributes = new { type = "number", @class = "form-control"} })

或

@Html.TextBoxFor(m => m.DecimalTest, new { type = "number", @class = "form-control"})

例如，另一种方法是在/Views/Shared/EditorTemplates/Decimal.cshtml中为typeof decimal创建自定义EditorTemplate

An alternative would be to create a custom EditorTemplate in the /Views/Shared/EditorTemplates/Decimal.cshtml for typeof decimal, for example

@model decimal?
@{
    var attributes = HtmlHelper.AnonymousObjectToHtmlAttributes(ViewData["htmlAttributes"]);
    if (!attributes.ContainsKey("type"))
    {
         attributes.Add("type", "number");
    }
    string formatString = ViewData.ModelMetadata.DisplayFormatString ?? "{0:N2}";
}
@Html.TextBoxFor(m => m, formatString , attributes)

并在主视图中使用

@Html.EditorFor(model => model.DecimalTest, new { htmlAttributes = new { @class = "form-control"} })

另一种替代方法是创建您自己的HtmlHelper扩展方法(例如@Html.DecimalFor(...))来生成html.

Another alternative would be to create you own HtmlHelper extension method (say @Html.DecimalFor(...)) to generate the html.

这篇关于使EditorFor将十进制值呈现为type ="text".不是type ="number"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！