最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

ASP.Net MVC model binding to javascript - Stack Overflow

programmeradmin2浏览0评论

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?

Share Improve this question asked Mar 28, 2016 at 12:38 Alex ZhukovskiyAlex Zhukovskiy 10.1k12 gold badges86 silver badges155 bronze badges 1
  • See this SO question: stackoverflow./questions/16717715/… – cl3m Commented Mar 28, 2016 at 12:44
Add a ment  | 

4 Answers 4

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.

发布评论

评论列表(0)

  1. 暂无评论