Input field set as 'Value=' instead of 'value='

Question

I have a project written in C# MVC using Razor templates. On one of my pages I have several input fields that contain numeric values. The Razor code that sets the values of these input fields looks like this:

@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
    }
})

The above code works fine using FireFox and Chrome and generates an input field that looks like this:

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

But the same Razor code, identical @Model values viewed with IE generates this:

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

As you can see, there is a difference between the value= attribute generated for IE in that the value attribute that gets my actual value begins with an uppercase 'V' and the lowercase value is an empty string. I'm stumped on this...

Can anyone tell me why this is happening and possibly how to handle it?

This difference effects jQuery's ability to return the input's value with:

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

Maybe .val() will retrieve the input field value, but this is going to require a rewrite of core jQuery code that supports this page and others, so I wanted to ask if anyone can tell me why this 'Value=' gets created for IE only and if there is a way of overcoming the problem.

Update:

Changing @Value to @value (or just value) results in an empty value attribute in Firefox and IE:

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

Answer 1

As StuartLC points out, you are trying to get Html.Editor to do something it wasn't designed to do.

What happens when you pass a @value or @Value key to the htmlAttributes is that the rendering engine produces an attribute with that name in addition to the value attribute it's already generating:

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

or

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

In both cases, you're giving the browser something bogus, so it can't be expected to exhibit predictable behavior.

As alluded above, Html.Editor has functionality to generate the value attribute based on the expression argument you pass to it. The problem is that you are using that incorrectly as well. The first argument to Html.Editor() needs to be an expression indicating the model property that the editor should be bound to. (e.g. the string value "DesignParams[0].ParamId") Nowadays, the preferred practice is to use the more modern EditorFor that takes a lambda function, as StuartLC showed in his post:

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