Question

我有一个HTML表单，有两个DIV，一个DIV是固定区域，这意味着输入不是动态的，第二个DIV是动态的，这意味着我有一个可以克隆DIV的按钮多次我想要的。

这是用于克隆新DIV的jquery clode：

 $('#btn-addsection').click(function (e) {
                var me = $(this);
                e.preventDefault();

                var lastRepeatingGroup = $('.repeating-section').last();
                var cloned = lastRepeatingGroup.clone(false)
                cloned.insertAfter(lastRepeatingGroup);

                var attrs = ['for', 'id', 'name'];

                var tags = section.find('input, label'),
                    idx = section.index();

                tags.each(function () {
                    var $this = $(this);
                    if ($this.is('input')) {
                        $this.val('');
                    }
                    $.each(attrs, function (i, attr) {
                        var attr_val = $this.attr(attr);
                        if (attr_val) {
                            $this.attr(attr, attr_val.replace(/_\d+$/, '_' + (idx)))
                        }
                    })
                })


            });

上面的代码将克隆DIV并将下划线“_”加上字段的下一个索引，这样我就可以将其识别为第二个或第三个字段，等等.DIV克隆。

当我发布到服务器时，我使用：

 var formData = $('#form-newquote :input').serializeArray();

这是我在服务器上的Save方法：

public JsonResult SaveQuote(QuoteModel model)
        {

            var response = this.JsonResponse;

            response = new JsonResponse
            {
                data = null,
                message = string.Empty,
                num = 0,
                success = true,
                code = null
            };

            return Json(response, JsonRequestBehavior.AllowGet);
        }

这是我的QuoteModel：

红色标记是我将获得许多克隆物品的地方。我的问题是如何从jquery发送到服务器我的所有动态字段，所以在服务器上我可以将它们映射到我的QuoteSelectionMode对象。

有任何线索吗？

Answer 1

您应该使用$('form').serialize()代替。我从未亲自使用serializeArray。但是看一下文档，它会创建一个objects数组name和value属性，我认为ModelBinder无法映射到QuoteModel 1}}。

由于您处理serialize()属性的方式，将其更改为Sections仍然无法绑定您的name媒体资源。

每当您处理name个对象的属性时，正确设置Collcetions属性至关重要。在您的情况下，您的输入应该是：

<input type="text" name="Sections[0].PropertName" />
<input type="text" name="Sections[0].PropertName2" />
<select name="Sections[0].PropertName3" />

克隆时，你应该产生这个：

<input type="text" name="Sections[1].PropertName" />
<input type="text" name="Sections[1].PropertName2" />
<select name="Sections[1].PropertName3" />

除此之外，请确保在您的ajax中，您的控制器具有相同的参数名称：

$.ajax({
    url: "/ControllerName/SaveQuote",
    data: { model: formData },
    ...........

另外，请考虑将knockout用于此类重复模板。使用jquery进行克隆很容易出错，而且你必须编写大量的垃圾代码。在KO，observalbleArray.push(new viewModel())并且您已经设置了。

ASP.NET MVC Jquery发布动态表单

1 个答案: