序列化表单并将字符串列表附加到它

Question

我正在尝试连载我的表单，但出于某种原因我无法让它工作。表单的序列化正在运行。但问题是，我需要添加一个列表 afterwards，因为它不是表单的一部分，并且在执行此操作时，当它到达我的控制器端点时，我的模型为 NULL。

        var valdata = $("#CreateForm").serialize();  

        var elements = document.querySelectorAll('#productCheckbox:checked');
        var checkedElements = Array.prototype.map.call(elements, function (el, i) {
            return el.name;
        });

        if (checkedElements.length == 0) {
            alert('You must select at least one product');
            return
        }

        var data = {
            model: valdata,
            products: checkedElements
        };

        $.ajax({
            url: '/Product/Create',
            type: 'post',
            dataType: 'json',
            data: data,
            success: function (data) {
                console.log('Success: ' + JSON.stringify(data))
            },
            error: function (data) {
                console.log('Error: ' + JSON.stringify(data))
            }
        });

我打的Controller的功能：

public ActionResult Create(Model model, object products)

对象产品工作正常，但模型是 null。

有没有人有任何建议，如何解决这个问题？ :-)

请不要介意模型等对象的名称，这在我们的项目中被命名为其他名称。

Answer 1

“数据”参数只是一个 URL 编码字符串。您可以根据需要附加到它。

例如：

data: $('#myForm').serialize() + "&moredata=" + morevalue

查看下面的link了解更多详情。

Click here for more details

Answer 2

这是一个演示：

型号：

public class Model 
    {
        public int Id { get; set; }
        public string Name { get; set; }

    }

查看：

<form id="CreateForm">
    <input name="Id" />
    <input name="Name" />
    <input type="button" value="submit" onclick="postdata()" />
</form>
<input type="checkbox" id="productCheckbox" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label>
<br>
<input type="checkbox" id="productCheckbox" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label>
<br>
<input type="checkbox" id="productCheckbox" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
<br>

js（我将表单数据转换为模型）：

<script>
        function postdata(){
            var valdata = $("#CreateForm").serializeArray();
            var returnModel = {};
            for (var i = 0; i < valdata.length; i++) {
                returnModel[valdata[i]['name']] = valdata[i]['value'];
            }
            

        var elements = document.querySelectorAll('#productCheckbox:checked');
        var checkedElements = Array.prototype.map.call(elements, function (el, i) {
        return el.name;
        });

        if (checkedElements.length == 0) {
        alert('You must select at least one product');
        return
        }

        var data = {
        model: returnModel,
        products: checkedElements
        };

        $.ajax({
        url: '/Test/Create',
        type: 'post',
        dataType: 'json',
        data: data,
        success: function (data) {
        console.log('Success: ' + JSON.stringify(data))
        },
        error: function (data) {
        console.log('Error: ' + JSON.stringify(data))
        }
        });
        }
    </script>

结果：

序列化表单并将字符串列表附加到它

Serialize form and attach a list of strings to it

ajax

jquery

razor

asp.net-core

razor-pages