How to get input data from MVC ViewModel into ajax post

Question

I am fetching data from a SQL database table into an ASP.NET MVC Razor view but I have troubles getting changed input data into an Ajax post such as:

@model MyViewModel
    <div class="row">
        <div class="col-1">
            @Html.LabelFor(model => model.Id, "Id:", new {})
        </div>
        <div class="col-4">
            @Html.Label(Model.Id.ToString(), new { title = "" })
        </div>
    </div>

    <div class="row">
        <div class="col-1">
            @Html.LabelFor(model => model.Test, "Test:", new { })
        </div>
        <div class="col-9">
            @Html.TextBoxFor(model => model.Test, new { data_bind = "value: Test", @type = "text" })
        </div>
    </div>

    @section scripts {
        <script type="text/javascript">
                $("#save-click").click(function () {
                    var nr = @Model.Id;
                    var postData = @Html.Raw(Json.Encode(@Model));
                    //alert(postData.Test);

                    $.ajax({
                        type: "POST",
                        url: actions.test.createOrUpdate + "?id=" + nr,
                        dataType: "json",
                        traditional: true,
                        data: postData,
                        success: function (response) {
                            if (response.Code == 0) {
                                    else {
                                        window.location.reload(false);
                                    }
                            } else {
                                alert('err');
                            }
                        }
                    });
                });
            });
        </script>
    }

When I load the view everything is displayed correctly. The controller action is triggered correctly and the Id (which can not be altered) is passed properly too. However when input fields are changed not the changed values get passed to the controller but the original values that were fetched into the view.

The serialization seems to work, since the alert (postData.Test) returns a value - but always the unchanged one.

Any help would be appreciated.

marc_s · Accepted Answer · 2020-03-14 20:13:10Z

1

var postData = @Html.Raw(Json.Encode(@Model));

This line is the culprit. When Razor renders the script, it will assign the original/unchanged model to your postData variable.

If you use "Inspect Element" or dev tools to check the value of postData, you'll see that the values won't change because they're statically assigned.

You need to check for the new values every time you click the button by using

var postData = $("form").serialize();

And be sure to wrap your input fields inside a form tag. See code below:

<form>
   <div class="row">
        <div class="col-1">
            @Html.LabelFor(model => model.Id, "Id:", new {})
        </div>
        <div class="col-4">
            @Html.Label(Model.Id.ToString(), new { title = "" })
        </div>
    </div>

    <div class="row">
        <div class="col-1">
            @Html.LabelFor(model => model.Test, "Test:", new { })
        </div>
        <div class="col-9">
            @Html.TextBoxFor(model => model.Test, new { data_bind = "value: Test", @type = "text" })
        </div>
    </div>
</form>

@section scripts {
     <script type="text/javascript">
             $("#save-click").click(function () {
                 var nr = @Model.Id;

                 // use form.serialize or use the id/class of your form
                 var postData = $("form").serialize();

                 $.ajax({
                     type: "POST",
                     url: actions.test.createOrUpdate + "?id=" + nr,
                     dataType: "json",
                     traditional: true,
                     data: postData,
                     success: function (response) {
                         if (response.Code == 0) {
                                 else {
                                     window.location.reload(false);
                                 }
                         } else {
                             alert('err');
                         }
                     }
                 });
             });
         });
     </script>
}

edited Mar 14, 2020 at 20:13

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Mar 14, 2020 at 19:31

Jerdine Sabio

6,0052 gold badges14 silver badges27 bronze badges

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

4 Comments

Manu Over a year ago

Works perfect! However in addition, I would like to append a value pair ('__RequestVerificationToken', token) to postData. Everything I have tried (.concat, .append ...) did not work though. Any suggestions?

Jerdine Sabio Over a year ago

@Manu To add another value pair, just add +PropertyName=Value at the end of form serialize. var postData = $("form").serialize()+"&__RequestVerificationToken="+token;

Manu Over a year ago

tried it, no errors in script part but controller does not accept the token. When I add the form data directly into the data of the ajax call such as (data: {name: value, ...} everything works perfectly. However, my form has many input fields ... so I am looking for short way to serialize them.

Jerdine Sabio Over a year ago

This might help; stackoverflow.com/questions/14473597/…

Collectives™ on Stack Overflow

How to get input data from MVC ViewModel into ajax post

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related