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

You are "capitalising" the value html attribute. Change this to lower case...

 @Value = Model.DesignParams[i].DefaultValue

as below ...

@value = Model.DesignParams[i].DefaultValue

IE is not the smartest of web browsers and there's definitely something wrong in the way Trident (they're parsing engine) validates elements' attributes as seen in these threads...

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

Highcharts adds duplicate xmlns attribute to SVG element in IE

Also, as already noted somewhere else. What's the need for the Editor extension method? Isn't it simpler to just use TextBoxFor instead?

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

Answer 2

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, ...)

Answer 3

You shouldn't be using invalid Html attributes in this way. Use the data- attributes in Html 5.

Also, your use of @Html.Editor(Model.DesignParams[i].ParamId (assuming ParamId is a string) deviates from the helper's purpose, which is to reflect the property with the given name off the Model, and use the value of this property as the Html value attribute on the input. (MVC will be looking for a property on the root model with whatever the value of ParamId is, which seems to silently fail FWR)

I would do the defaulting of Model.DesignParams[i].ParamId = Model.DesignParams[i].DefaultValue in the Controller beforehand, or in the DesignParams constructor.

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

Note that this will give the input name as DesignParams[0].ParamID, which would be needed to post the field back, if necessary.

Here's a Gist of some example code

(The underscore will be converted to a dash) Use data() in jQuery to obtain these values:

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

Answer 4

Editor works with metadata. then you need to more about this, 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

But the easiest way is go with

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