ASP.Net MVC model binding to javascript - Stack Overflow

admin管理员组

文章数量:1327969

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

Share Improve this question Follow asked Mar 28, 2016 at 12:38 Alex ZhukovskiyAlex Zhukovskiy 10.1k1212 gold badges8686 silver badges155155 bronze badges 1

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

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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.

本文标签： ASPNet MVC model binding to javascriptStack Overflow