输入字段设置为 'Value=' 而不是 'value='

Question

我有一个使用 Razor 模板用 C# MVC 编写的项目。在我的一个页面上，我有几个包含数值的输入字段。设置这些输入字段值的 Razor 代码如下所示：

@Html.Editor(Model.DesignParams[i].ParamId,
new {
    htmlAttributes = new
    {
        @Value = Model.DesignParams[i].DefaultValue,
        @class = "form-control text-right",
        @type = "text",
        id = "_" + Model.DesignParams[i].ParamId,
        uomid = Model.DesignParams[i].UOMId,
        measureid = Model.DesignParams[i].MeasureId
    }
})

以上代码使用 FireFox 和 Chrome 可以正常工作，并生成如下所示的输入字段：

<input type="text" uomid="MBH" name="HeatOfRejection" measureid="HeatLoad"
       id="_HeatOfRejection" class="form-control text-right text-box single-line"
       value="5000.0">

但是相同的 Razor 代码，相同的 @Model 值在 IE 中查看会生成：

<input Value="5000" class="form-control text-right text-box single-line"
       id="_HeatOfRejection" measureid="HeatLoad" name="HeatOfRejection" 
       type="text" uomid="MBH" value="" />

如您所见，为 IE 生成的 value= 属性之间的区别在于，获取我的实际值的 value 属性以大写的“V”开头，而小写的值是空字符串。我被这件事难住了……

谁能告诉我为什么会发生这种情况以及如何处理它？

这种差异会影响 jQuery 返回输入值的能力：

var value = $(inputfield).attr("value");

也许.val() 将检索输入字段值，但这需要重写支持此页面和其他页面的核心 jQuery 代码，所以我想问是否有人能告诉我为什么这个 'Value=' 得到仅为 IE 创建，如果有解决问题的方法。

更新：

在 Firefox 和 IE 中将 @Value 更改为 @value（或只是 value）会导致 value 属性为空：

<input type="text" value="" uomid="MBH" name="HeatOfRejection" measureid="HeatLoad" 
       id="_HeatOfRejection" class="form-control text-right text-box single-line">

Answer 1

正如 StuartLC 指出的那样，您正试图让 Html.Editor 做一些它原本不打算做的事情。

当您将@value 或@Value 键传递给htmlAttributes 时会发生什么情况是，渲染引擎会生成一个具有该名称的属性除了 value 属性它已经生成：

<input type="text" name="n" value="something" value="somethingElse" />

或

<input type="text" name="n" value="something" Value="somethingElse" />

在这两种情况下，您都在给浏览器一些虚假的东西，因此不能期望它表现出可预测的行为。

如上所述，Html.Editor 具有根据您传递给它的expression 参数生成value 属性的功能。问题是您也错误地使用了它。 Html.Editor() 的第一个参数需要是一个表达式，指示编辑器应该绑定到的模型属性。 （例如字符串值 "DesignParams[0].ParamId"）如今，首选的做法是使用更现代的 EditorFor，它采用 lambda 函数，正如 StuartLC 在他的帖子中所展示的：

@Html.EditorFor(model => model.DesignParams[i].ParamId, ...)

Answer 2

您正在“大写”value html 属性。将其更改为小写...

 @Value = Model.DesignParams[i].DefaultValue

如下...

@value = Model.DesignParams[i].DefaultValue

IE 不是最聪明的网络浏览器，Trident（它们正在解析引擎）验证元素属性的方式肯定有问题，如这些线程中所见...

https://github.com/highslide-software/highcharts.com/issues/1978

Highcharts adds duplicate xmlns attribute to SVG element in IE

另外，正如在其他地方已经指出的那样。 Editor 扩展方法需要什么？改用TextBoxFor 不是更简单吗？

@Html.TextBoxFor(model => model.DesignParams[i].ParamId
    , new 
        { 
            @class = "form-control text-right"
            , uomid = Model.DesignParams[i].UOMId
            , measureid = Model.DesignParams[i].MeasureId 
         })

Answer 3

编辑器使用元数据。那么你需要更多关于这个， http://aspadvice.com/blogs/kiran/archive/2009/11/29/Adding-html-attributes-support-for-Templates-2D00-ASP.Net-MVC-2.0-Beta_2D00_1.aspx

但最简单的方法是使用

@model Namespace.ABCModel

@using (Html.BeginForm("Action", "Controller", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
 @Html.TextBoxFor(model => model.DesignParams[i].ParamId, new { @class = "form-control text-right",     uomid = Model.DesignParams[i].UOMId, measureid = Model.DesignParams[i].MeasureId })
}

Answer 4

您不应该以这种方式使用无效的 Html 属性。使用 Html 5 中的data- 属性。

另外，您对@Html.Editor(Model.DesignParams[i].ParamId 的使用（假设ParamId 是一个字符串）偏离了帮助程序的目的，即从模型中反映具有给定名称的属性，并将该属性的值用作Html @987654326 input 上的 @ 属性。 （无论 ParamId 的值是多少，MVC 都会在根模型上寻找一个属性，这似乎默默地失败了 FWR）

我会事先在 Controller 中或在 DesignParams 构造函数中默认 Model.DesignParams[i].ParamId = Model.DesignParams[i].DefaultValue。

@Html.EditorFor(m => m.DesignParams[0].ParamID,
   new {
      htmlAttributes = new
        {
            // Don't set value at all here - the value IS m.DesignParams[0].ParamID
            @class = "form-control text-right",
            @type = "text",
            id = "_" + Model.DesignParams[i].ParamId,
            data_uomid = Model.DesignParams[i].UOMId,
            data_measureid = Model.DesignParams[i].MeasureId
        }

请注意，这会将输入名称指定为 DesignParams[0].ParamID，如有必要，需要使用该名称将字段发回。

这是一些示例代码的Gist

（underscorewill be converted 到 dash） 在 jQuery 中使用data() 来获取这些值：

var value = $(inputfield).data("uomid");