通过jquery将集合传递给MVC控制器

Question

我正在使用ASP.NET MVC3和Jquery。我试图使用类似以下方式将表单元素传递回控制器（请注意，为简单起见，我删除了成功和错误代码）:

var formElements = $("#myForm").serialize();
        $.ajax({
            type: "POST",
            url: ScriptResolveUrl("~/Report/SubmitChanges"),
            data: {collection: formElements},
            success: 
            error:
            dataType: "json"
        });

我的问题是控制器方法中的参数应该长什么样子： 这是我的控制器方法：

public ActionResult SubmitChanges(WHAT GOES HERE?)
{
}

那么我真正需要的是控制器方法的参数类型应该是什么？我想从控制器中检索表单元素的值。

- carlg

---

你的答案很好，如果我想将一个集合传递给服务器，我会使用json。 - Chuck Conway

Answer 1

以下是我的做法。我在表单上有大约20-30个元素，所以我不想将每个元素都转换为参数或在集合中列出它们。

在jQuery中，我进行了以下操作:

 var formElements = $("#myForm").serialize();

        $.ajax({
            type: "POST",
            url: ScriptResolveUrl("~/Report/SubmitChanges"),
            data: { parms: formElements },
            success:
            error: 
            dataType: "json"
        });

然后它以字符串形式进入我的控制器：

public ActionResult SubmitChanges(string parms)

然后我找到了一个函数来解析那个字符串（似乎正常工作）

NameValueCollection qscoll = HttpUtility.ParseQueryString(parms);

这似乎可以在不列出所有表单元素的情况下工作。

- carlg

Answer 2

假设您的表单元素都对应于您的模型（假设它是MyModel），那么它应该很简单：

public ActionResult SubmitChanges(MyModel model)
{
}

MVC默认模型绑定会处理剩下的部分 :).

确保你在jQuery ajax方法中更改了data定义，因为你已经序列化了它。只需执行：

data: formElements,

我假设你的jQuery ajax方法中的以下内容是复制粘贴错误？

success: 
error:

如果不是，那么请确保将其删除或更改为：

success: function (result) {
    //do something
},
error: function () {
    //do something on error
}

- Mathew Thompson

---

谢谢，我特意省略了成功和错误的代码以使其更易读。问题是没有与我的表单元素相对应的模型。 - carlg

除了这个答案之外，你不需要做：data: {collection: formElements}。serialize()已经没有问题了，所以你只需要使用data: formElements。 - von v.

@user1031516 那么你要么让该操作结果获取表单上的每个项目（不建议），要么重新设计页面，使用模型及其所有字段。 - Mathew Thompson

@vonv。好的建议，我也加上了。否则他就必须确保操作结果参数被称为“collection” :) - Mathew Thompson

没错，@mattytommo，我需要根据OP的新评论创建自己的答案。 - von v.

Answer 3

问题在于没有与我的表单元素相对应的模型。

然后你可以这样做：

public ActionResult SubmitChanges(int id, string name)
{
}

然后传入各个单独的项目：

var o = {
    id = $("#id_elem_id").val(),
    name = $("#name_elem_id").val()
}
$.ajax({
    type: "POST",
    url: ScriptResolveUrl("~/Report/SubmitChanges"),
    data: JSON.stringify(o),
    success: 
    error:
    dataType: "json"
});

其中id_elem_id和name_elem_id是您的HTML元素的ID。并添加您需要的任何其他参数，只需跟随即可。

- von v.

Answer 4

你已经接近成功了。只需要去掉你的data参数周围的括号即可：

var formElements = $('#myForm').serialize();
$.ajax({
    type: 'POST',
    url: ScriptResolveUrl("~/Report/SubmitChanges"),
    data: formElements,
    success: function(result) {
        // handle the success of the AJAX request
    },
    error: function() {
        // an error occurred
    }
});

- Darin Dimitrov