NumericTextBox Loses Value using Html.TextBoxFor, not HTML

Question

When I use the Kendo UI Core widget with Html.TextBoxFor (for numeric textbox editing, specifically to enter a dollar amount) like so:

@Html.TextBoxFor(i => i.TotalAmount, new { @class = "currency-editor", min = "0", })

On posting back and processing the data, the value posts back as null, and thus server-side code checking done in the controller fails because nothing posts back.

When I use Raw HTML like:

<input type="text" id="@Html.IdFor(i => i.TotalAmount)" name="@Html.IdFor(i => i.TotalAmount)" value="@Model.TotalAmount"
       class="currency-editor" min="0" />

It works just fine. I don't know what the difference is? The initialization plugin (which initializes with no problems) is:

$(".currency-editor").kendoNumericTextBox({
            format: "c2",
            decimals: 2,
            spinners: false
         });

Obviously it appears something internally with the TextBoxFor plugin, maybe validation specific? MVC 5, 2015 Q3 Kendo UI Core (free version).

Answer 1

The issue has to do with input-validation-error and the widget being hidden - the one step I didn't put together was that this field was being validated and this added to the tag output. The trick was (as noted in Telerik's documentation):

@using (Html.BeginForm()) {
    //omitted for brevity
}

<script type="text/javascript">
    $(function () {
        $(".k-widget").removeClass("input-validation-error");
    });
</script>

Referenced here: http://docs.telerik.com/kendo-ui/aspnet-mvc/validation#the-widgets-are-hidden-after-a-postback-when-using-the-jquery-validation