How to bind input field to editfor model MVC

Question

I have the following javascript and input fields within my model.

script type="text/javascript">

        function sum() {
            var txtFirstNumberValue = document.getElementById('money1').value;
            var txtSecondNumberValue = document.getElementById('money2').value;
            var txtThirdNumberValue = document.getElementById('money3').value;
            var result = parseFloat(txtFirstNumberValue) + parseFloat(txtSecondNumberValue) + parseFloat(txtThirdNumberValue);
            if (!isNaN(result)) {
                document.getElementById('Total').value = result;
            }
        }
    </script>

<div class="form-group">
                            @Html.LabelFor(model => model.Total, "Total", new { @class = "control-label col-md-5" })
                            <div class="col-md-offset-0">
                                <input type="text" id="Total" name="Total" />
                                @*@Html.EditorFor(model => model.Total)*@
                                @Html.ValidationMessageFor(model => model.Total)
                            </div>
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(model => model.money1, "money1", new { @class = "control-label col-md-5" })
                            <div class="col-md-offset-0">
                                @*@Html.EditorFor(model => model.money1)*@
                                <input type="text" id="money1" onkeyup="sum();" name="money1" />
                                @Html.ValidationMessageFor(model => model.money1)
                            </div>
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(model => model.money2, "money2", new { @class = "control-label col-md-5" })
                            <div class="col-md-offset-0">
                                @*@Html.EditorFor(model => model.money2)*@
                                <input type="text" id="money2" onkeyup="sum();" name="money2" />
                                @Html.ValidationMessageFor(model => model.money2)
                            </div>
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(model => model.money3, "money3", new { @class = "control-label col-md-5" })
                            <div class="col-md-offset-0">
                                @*@Html.EditorFor(model => model.money3)*@
                                <input type="text" id="money3" onkeyup="sum();" name="money3" />
                                @Html.ValidationMessageFor(model => model.money3)
                            </div>
                        </div>

This all works fine. When I type a value into the 3 money fields the resulting value appears in the Total field. Within MVC if I click on the details view it shows all four values, however if I click on the edit view all four fields are blank. Question is how do I get the values to appear and remain in edit mode?

David · Accepted Answer · 2014-12-31 13:42:40Z

7

Well, for starters your model-bound input fields are commented out:

@*@Html.EditorFor(model => model.money1)*@

In order to get those to work you'd need to un-comment them.

You could just manually populate your markup with the model values, something like this:

<input type="text" id="money1" onkeyup="sum();" name="money1" value="@model.money1" />

That should pre-populate that input with the model's money1 value. Though you're assuming the responsibility of manually implementing anything else that the built-in HTML helpers would provide for you. Unless there's a compelling reason not to use Html.EditorFor() I imagine that would be the better option.

answered Dec 31, 2014 at 13:42

David

221k42 gold badges245 silver badges337 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Scanner Over a year ago

Thanks David, your recommendation worked great for money1,2,3! Although the Total value isn't redisplayed like the other three values. The reasoning behind the commenting out of @*@Html.EditorFor(model => model.money1)*@ was because I couldn't get the JavaScript to work with it but it worked fine by using <input>.

David Over a year ago

@Scanner: Does the model have a total value field? I imagine it should, and you'd display its value exactly the same way. (Though I wouldn't bind an editor to it, since it's a calculated value. It probably shouldn't be in a form element, just displayed in the markup.) As for the JavaScript "not working" with the editors, that sounds like something for a different question entirely. There's nothing special about the markup emitted by those editors, JavaScript can interact with it like any other markup.

Scanner Over a year ago

I added a value attribute into the Total field (<input type="text" id="ContractualWeekly" name="WeeklyRatesPayable" value="@Model.ContractualWeekly" />) just the same as money 1, 2, 3 and the value displays as it should but when I click on edit again its value has disappeared. I'm pretty new to this so thats why I was having a hard time getting the editors and Javascript to co-operate but as you say thats for a different time.

David Over a year ago

@Scanner: Well where does that value come from? Does the model even have it at all? If it's being calculated by JavaScript and not by server-side code then you can always re-calculate it by just executing that JavaScript. I really don't see why the total value needs to be an input field, it shouldn't be an editable value on the model. If anything it would be a read-only property (only a getter, no setter) which just returns the total of the other fields.

Scanner Over a year ago

The client who I'm working for requested the application to be create, edit, details format and wants control over editting to the extent that when the click edit all 4 fields are populated. Is it that because money 1, 2, 3 are added so that Total achieves its value that that is the reason why no value displays for Total when edit is clicked?

|

Collectives™ on Stack Overflow

How to bind input field to editfor model MVC

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related