在ASP.NET MVC中使用jQuery.serializeArray

我将

$（'#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（过滤器过滤器）

类过滤器{
字符串someOtherData；
仅布尔；
列表颜色；
}

---

我可以深入研究

FormCollection

，但我正在寻找一个更优雅的解决方案（我怀疑它会涉及一个自定义模型绑定器）。

这不起作用，因为默认模型绑定器不希望数据像这样格式化。只需使用而不是

serializeArray（）

。例如：

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

或者通过使用优秀的工具简化您的生活，它允许您以优雅的方式对现有HTML表单进行AJAXify处理：

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

---

更新：

在您的评论中解释之后，以下是您可以继续的方式：

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

$.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'  }

---

这将不起作用，因为默认的模型绑定器不希望数据的格式是这样的。只需使用而不是

serializeArray（）

。例如：

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

或者通过使用优秀的工具简化您的生活，它允许您以优雅的方式对现有HTML表单进行AJAXify处理：

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

---

更新：

在您的评论中解释之后，以下是您可以继续的方式：

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

$.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'  }

---

我知道这很旧，但类似这样的东西怎么样？这是我在页面上通常使用的通过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中有一个按钮

按钮，该按钮具有url的url属性

大概是这样的：

<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>

选择1
选择2
选择3
选择4
选择1
选择2
选择3
选择4
点击

---

然后你可以有一个普通的模型来捕捉你需要的东西。不确定这是不是最好的方式，但我使用过很多次。

我知道这已经很旧了，但是像这样的东西怎么样？这是我通常在页面上通过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中有一个按钮

按钮，该按钮具有url的url属性

大概是这样的：

<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>

选择1
选择2
选择3
选择4
选择1
选择2
选择3
选择4
点击

---

然后你可以有一个普通的模型来捕捉你需要的东西。不确定这是不是最好的方法，但我经常使用它。

使用JSON怎么样？我不知道jQuery的序列化数据是否很容易被ASP.NET MVC使用，但JSON肯定会被使用。我找不到一个行程序来执行表单->JSON。我错过什么了吗？我仍然想知道我的问题的答案，justFMI.jQuery+JSON=是否有一行表单->JSON？JSON插件编码器不做表单->JSON，它做JS对象->JSON。我找不到用一行代码将表单转换为JSON的方法。虽然使用JSON可能比自定义模型绑定器更容易。但是使用JSON呢？我不知道jQuery的序列化数据是否很容易被ASP.NET MVC使用，但JSON肯定会被使用。我找不到一个行程序来执行表单->JSON。我错过什么了吗？我仍然想知道我的问题的答案，justFMI.jQuery+JSON=是否有一行表单->JSON？JSON插件编码器不做表单->JSON，它做JS对象->JSON。我找不到用一行代码将表单转换为JSON的方法。虽然使用JSON可能比自定义模型绑定器更容易。我预计解决方案将需要自定义模型绑定器。在这种情况下，我不能使用ajaxForm，因为提交的数据不是表单提交帖子。这是一篇AJAX文章（由DataTables.Net完成）@user93422，所以你是说你不能修改请求字符串？如果是这种情况，只有自定义模型绑定器可以帮助您。Ajax数据看起来像：

数据：{JSON.stringify（aoData），过滤器：$（'#myForm'）.serializeArray（）}

将

serializeArray

替换为

serialize

不会有帮助，因为我仍然需要像字符串一样解析查询。@user93422，您上次评论中的信息应作为问题的一部分提供。请参阅我的更新，了解如何编写AJAX请求，其中部分数据来自表单，其他部分来自其他地方。我预计该解决方案将需要自定义模型绑定器。在这种情况下，我不能使用ajaxForm，因为提交的数据不是表单提交帖子。这是一篇AJAX文章（由DataTables.Net完成）@user93422，所以你是说你不能修改请求字符串？如果是这种情况，只有自定义模型绑定器可以帮助您。Ajax数据看起来像：

数据：{JSON.stringify（aoData），过滤器：$（'#myForm'）.serializeArray（）}

替换

serializeArray

将没有帮助，因为我仍然需要像字符串一样解析查询。@user93422