Question

我将$('#myForm').serializeArray()发布到ASP.NET MVC（2.0）操作。序列化数组如下所示：

filters[0][name]    : gemcolor
filters[0][value]   : Yellow
filters[1][name]    : gemcolor
filters[1][value]   : Green
filters[2][name]    : jcOnly
filters[2][value]   : true
someOtherData       : abc

我想把它消耗在：

public ActionResult GetData(Filter filter)

class Filter {
    string someOtherData;
    bool jcOnly;
    List<string> gemcolor;
}

我可以挖掘FormCollection，但我正在寻找更优雅的解决方案（我怀疑它将涉及自定义模型绑定器）。

Answer 1

这不起作用，因为默认模型绑定器不希望数据格式如此。只需使用.serialize()代替serializeArray()即可。例如：

$.ajax({
    url: '/foo',
    type: 'post',
    data: $('#myForm').serialize(),
    success: function(result) {
        alert('ok');
    }
});

或使用优秀的jquery form plugin简化您的生活，它允许您以优雅的方式AJAX化现有的HTML表单：

$(function() {
    $('#myForm').ajaxForm(function(result) {
        alert('ok');
    });
});

更新：

在您的评论中解释之后，您将如何继续：

您可以使用this answer中的插件，该插件将表单元素转换为默认模型绑定器可理解的对象，并且可以与其他一些信息聚合：

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

然后简单地说：

data: { filters: $('#myForm').serializeObject(), someOtherData: 'foo bar'  }

Answer 2

我知道这是旧的，但是这样的事情怎么样 - 这是我在我的网页上通常用来通过ajax提交的内容：

$(function () {

    @*-- PostAll--*@

    $(".postAll").click(function () {
        var container = $(this).closest(".postGroup");
        var p = {};

        container.find("input[type='text'], input[type='radio']:checked, input:checkbox:checked, textarea").each(function (i, e) {

            p[$(e).attr("name")] = $(e).val();

        });

        container.find('select').each(function (i, e) {

            p[$(e).attr("name")] = $(e).find('option:checked').val();

        });

        $.post($(this).data("url"), p, function (data, status) {
            //Do Some Notification
        })

    });


});

我倾向于使用html结构：

包含所有表单元素的Div
div内的按钮

按钮

这样的事情：

<div class="postGroup">
    <div class="row">
        <div class="col-md-2 col-md-offset-3">
            <input type="text" name="myText" />
        </div>
        <div class="col-md-2">
            <input type="radio" name="myRad" value="A1" />
            <input type="radio" name="myRad" value="A2" />
            <input type="radio" name="myRadTwo" value="A3" />
            <input type="radio" name="myRadTwo" value="A4" />

        </div>
        <div class="col-md-2">
            <input type="checkbox" name="mycheck" value="B1" />
            <input type="checkbox" name="mycheck" value="B2" />
            <input type="checkbox" name="mycheckTwo" value="B3" />
            <input type="checkbox" name="mycheckTwo" value="B4" />
        </div>
        <div class="col-md-2">
            <select name="mySelect">
                <option value="S1">Select 1</option>
                <option value="S2">Select 2</option>
                <option value="S3">Select 3</option>
                <option value="S4">Select 4</option>
            </select>
            <select name="mySelectTwo">
                <option value="R1">Select 1</option>
                <option value="R2">Select 2</option>
                <option value="R3">Select 3</option>
                <option value="R4">Select 4</option>
            </select>
        </div>
    </div>
    <button class="postAll" data-url="/MyEndpoint">click</button>
</div>

然后你可以有一个普通的模型来捕捉你需要的东西。不确定这是否是最好的方法或者其他任何东西，但我会使用这种情况。

在ASP.NET MVC中使用jQuery.serializeArray

2 个答案: