时间戳

首页 > 解决方案 > 将表单序列化为 JObject

jquery - 将表单序列化为 JObject

问题描述

我有一个页面上有两个表单的 ASP.NET Core 视图。

<form id="form1">
  <input name="FirstName" />
  <input name="LastName" />
</form>
<form id="form2">
     <input name="Address1" />
     <input name="Address2" />
</form>

我试图绑定这两种形式的模型是

public class MyModel
{
    public string FirstName {get;set;}
    public string LastName {get;set;}
    public JObject ExtraFields {get;set;}
}

请注意，这ExtraFields是一种 JObject。是否可以使用 jQuery 提交这些表单，以便将第二个表单form2设置为ExtraFields？

标签： jqueryasp.net-coreasp.net-core-mvcasp.net-core-2.1

解决方案

您可以使用 serialize() 方法序列化表单，然后通过 name 属性接收值。

示例代码如下：

    <form asp-action="AddAddress" class="form2">
        <div class="form-group">
            <label class="control-label">Address1</label>
            <input class="form-control" name="Address1" />
        </div>
        <div class="form-group">
            <label class="control-label">Address2</label>
            <input class="form-control" name="Address2" />
        </div>
        <div class="form-group">
            <input type="submit" value="Submit" class="btn btn-primary btn-submit" />
        </div>
    </form>

jQuery 脚本：

  jQuery(document).ready(function () {
 
        $(".btn-submit").click(function () {
            event.preventDefault(); 
            $.ajax({
                type: "POST",
                url: "/Home/AddAddress",  //remember change the controller to your owns.
                data: $("form.form2").serialize(),  //serialize the form
                success: function (data) {
                    console.log(data)
                },
                failure: function (response) {
                    console.log(response.responseText);
                },
                error: function (response) {
                    console.log(response.responseText);
                }
            });
        });
    });

控制器方法中的代码：

    [HttpPost]
    public IActionResult AddAddress(string Address1, string Address2)
    {
        return View();
    }

此外，您还可以使用 JQuery 提取地址，并发送到 action 方法，如下所示：

   jQuery(document).ready(function () {   
        $(".btn-submit").click(function () {
            event.preventDefault(); 
            //using an array to store the JOject values.
            var stringArray = new Array();
            stringArray.push($("input[name='Address1']").val());
            stringArray.push($("input[name='Address2']").val());
            var postData = { extraFields: stringArray };
            $.ajax({
                type: "POST",
                url: "/Home/AddAddress",  //remember change the controller to your owns.
                data: postData, 
                success: function (data) {
                    console.log(data)
                }, 
                error: function (response) {
                    console.log(response.responseText);
                }
            });
        });
    });

Action 方法中的代码：

    [HttpPost]
    public IActionResult AddAddress(List<string> extraFields)
    {
        return View();
    }

推荐阅读