ASP.Net MVC model binding to javascript

Question

The question is pretty straightforward: I use @Html.EditorForModel() to generate fields for my model. Then user fills all these fields and I want to send this field via AJAX, becuase I should do several server's services without page reload.

I googled several approaches, but it seems that there is no standard way to do such things. I mean I do not have an object on client-side that represent model. I found one single library calls JSModel (link) but it seems to be not working. My code for now is:

@model Student

<script src="@Url.Content("~/scripts/jquery-1.12.2.min.js")" type="text/javascript" async="async"></script>
<script src="@Url.Content("~/scripts/Requester.js")" type="text/javascript" async="async"></script>
<script src="@Url.Content("~/scripts/jsmodel.js")" type="text/javascript"></script>

<script type="text/javascript">
    var requester = new Requester(@Html.Raw(Json.Encode(new Student())));

    function SendSignupRequest() {
        requester.SendSignupRequest();
    }
</script>

<h2>Student</h2>
<div>
    @Html.EditorForModel()
</div>
<input type="button" value="Send" onclick="SendSignupRequest()"/>

Requester.js:

function Requester(rawModel) {
    this.modelObj = new JSModel(rawModel);

    this.SendSignupRequest = function() {
        var model = modelObj.refresh();
        var val = model.prop("Name");
        alert(val);
    }
}

Is there any easy way to serialize a model object in JSON and send it to server, without manually constructing an object with millions of document.getElementById?

See this SO question: http://stackoverflow.com/questions/16717715/model-binding-with-jquery-ajax-serialize-not-working — cl3m, Mar 28 '16 at 12:44

score 4 · Accepted Answer · answered Mar 28 '16 at 12:48

4

View

 @using (Html.BeginForm("action", "controller", FormMethod.Post, new { @class = "form-horizontal form-compact ", role = "form", id = "form1" }))
    {

    }

Java Script

var formdata = $("#form1").serializeArray();

$.ajax({
                url: url,
                type: 'POST',
                data: formdata,
                success: function (data) {
}

Controller

public ActionResult action(Model model)
{
//access data here 
}

answered Mar 28 '16 at 12:48

REDEVI_

684
8
18

Thanks for an answer, it is most suitable in my case. Enchanced code could be found in this [url](http://stackoverflow.com/questions/5410055/using-ajax-beginform-with-asp-net-mvc-3-razor). – Alex Zhukovskiy Mar 28 '16 at 14:18

score 3 · Answer 2 · answered Mar 28 '16 at 12:47

You can serialize your form to a JSON object with jQuery:

var data = $('form').serialize();

(This would, of course, mean wrapping your form elements in a form, which really should be happening anyway.)

Then just pass that data object to the server in the POST request. Something as simple as:

$.post('some/url', data, function(response) {
    // success callback
});

without manually constructing an object with millions of document.getElementById

Note that if your object has millions of fields then you may very well encounter other problems here.

score 1 · Answer 3 · answered Mar 28 '16 at 12:43

Yes you can use form serialize using Jquery

 var formData = $('#form').serializeObject();
  $.extend(formData, { Contacts : myContacts});
  $.extend(formData, { Address : myAddress});
  var result = JSON.stringify(formData);

  $('#formHiddenField').val(result);

  then submit form using:
      $.ajax(
     url: @Url.Action("post url")
     data: myForm.serialize(),
     dataType: 'json',
     type: 'POST',
     success: function(){
    })

score 1 · Answer 4 · answered Mar 28 '16 at 12:55

1

Why not Ajax.BeginForm() for your purposes. I believe model binding works automatically.

answered Mar 28 '16 at 12:55

ManojAnavatti

604
1
7
18

ASP.Net MVC model binding to javascript

4 Answers4