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?

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?

• javascript
• asp
• asp-mvc
• asp-mvc-4

• See this SO question: stackoverflow./questions/16717715/… – cl3m Commented Mar 28, 2016 at 12:44

4 Answers 4

View

 @using (Html.BeginForm("action", "controller", FormMethod.Post, new { @class = "form-horizontal form-pact ", 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 
}

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.

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(){
    })

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