Html Attributes breaks Editor Template, rendering it readonly

Question

I am currently working on a ASP.NET MVC 3 project. I made a custom editor template to display percentages. Here is the code I have so far.

public class MyClass
{
   // The datatype can be decimal or double
   [Percentage]
   public double MyPercentage { get; set; }
}

The [Percentage] attribue is a normal UI Hint attribute that uses the following code:

    @model Object
    @{
        string fieldName = ViewData.TemplateInfo.HtmlFieldPrefix;
    }

    <div style="height: 24px;">
        <div style="float: left;">
          @Html.TextBox("", String.Format("{0:0.00}", Model), new
          {
              id = "txt" + fieldName,
              @Class = "magnaNumericTextBox",
              type = "magnaNumericType",
              style = "width:230px"
          })
          &nbsp;%
        </div>
        <div style="float: left;">
            <ul style="height: 24px; list-style: none; padding: 0px; margin: 0px; line-height: none;">
                <li style="line-height: normal"><a id="btn@(fieldName)Up" class="magnaNumericButton button small">
                    ˄</a> </li>
                <li style="line-height: normal"><a id="btn@(fieldName)Down" class="magnaNumericButton button small">
                    ˅</a> </li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">

        $("#btn@(fieldName)Up").click(function ()
        {
            ChangeNumericUpDownValue($('#txt@(fieldName)'), 1);
            return false;
        });

        $("#btn@(fieldName)Down").click(function ()
        {
            ChangeNumericUpDownValue($('#txt@(fieldName)'), -1);
            return false;
        });

        $('#txt@(fieldName)').keypress(function (e)
        {
            NumericUpDownKeyPress($(this), e);
            return false;
        });

    </script>

This editor template makes use of an numeric up down roller, that the user can use if he/she pleases. The user could also just type the number themselves without using the numeric up down functionality. The javascript functionality and everything worked perfectly for a while until yesterday.

The problem is now that the textbox in the editor template does not allow the user to type his/her own value (making it readonly - although there is no readonly attribute in the rendered html), only via the numeric up down buttons. I have determined that if i remove the html attributes from the text box helper like so:

  @Html.TextBox("", String.Format("{0:0.00}", Model))

That the user can once again add the value by typing it into the textbox. What can this possible be? Any help or advise would be appreciated.

Thanks

Answer 1

The reason this happens is because you are returning false from the keypress javascript event that you subscribed to:

$('#txt@(fieldName)').keypress(function (e) {
    NumericUpDownKeyPress($(this), e);
    return false; // <- here you are blocking all keys
});

This means that no matter which key the user types when inside the textbox, you are canceling it. And the reason why this works when you remove the attributes is because no your textbox no longer has the correct id, and your jquery selector doesn't match any elements and so it does nothing at allows for the user to type anything he likes in the textbox. So if you want to allow he typing, you should no return false from the .keypress() handler. Or at least not systematically -> you could return true for example if he types a number which should be the only allowed character in this textbox.