ASP.Net MVC模型绑定到javascript

ASP.Net MVC model binding to javascript

本文关键字：javascript 绑定 模型 Net MVC ASP      更新时间：2023-09-26

问题很简单：我使用@Html.EditorForModel()为我的模型生成字段。然后用户填写所有这些字段，我想通过AJAX发送这个字段，因为我应该在不重新加载页面的情况下完成几个服务器的服务。

我在谷歌上搜索了几种方法，但似乎没有标准的方法来做这些事情。我的意思是，我在客户端并没有一个表示模型的对象。我发现一个单独的库调用JSModel（链接），但它似乎不起作用。我现在的代码是：

@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);
    }
}

有没有什么简单的方法可以在JSON中序列化模型对象并将其发送到服务器，而无需手动构建具有数百万document.getElementById的对象？

查看

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

Java脚本

var formdata = $("#form1").serializeArray();
$.ajax({
                url: url,
                type: 'POST',
                data: formdata,
                success: function (data) {
}

控制器

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

您可以使用jQuery:将表单序列化为JSON对象

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

（当然，这意味着将表单元素包装在form中，这无论如何都应该发生。）

然后在POST请求中将data对象传递给服务器。简单如：

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

而无需手动构建具有数百万文档的对象。getElementById

请注意，如果您的对象具有数百万的字段，那么您很可能会在此处遇到其他问题。

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

为什么不使用Ajax.BeginForm()呢。我相信模型绑定是自动工作的。

相关文章：