通过 jQuery.Ajax 向 MVC 控制器发送多个项目 [英] Sending Multiple Items to MVC Controller via jQuery.Ajax

问题描述

如果您使用 jQuery 之类的东西序列化表单，它通常会将 JSON 键和值映射到您要发布到的控制器操作上的对象的属性.所以:

If youa are serializing a form using something like jQuery, it will often map the JSON keys and values to the properties of a object on the Controller Action you are posting to. So:

jQuery:

function PostForm() {
    $.ajax({
        url: "/Home/TestMVC",
        type: "POST",
        dataType: "application/JSON",
        data:  $('#form').serialize(),
        complete: callFunction
        }
    });

假设主要细节包含将参数名称作为键的元素，它们应该直接映射到对象:

Presuming main details contains elements which will have the name of the parameter as a key they should map to the object directly:

操作:

public void TestMVC(MyObject obj)
{
//Obj should now contain the data from the serialised form
}

发布:

Name: "Bob"
Age: "999"
Sex: "Unknown"

有人知道这是怎么工作的吗?每次我将表单和任何其他数据传递给控制器​​时，它都会中断.

Does anyone know how this works? It's breaking every time I pass the form and any additional data to the controller.

我想将数据的内容以及可以包含任意数量和类型的键/值对的 QueryString 发送到控制器.我可以在服务器上提取这些键/值对，因为我无法在方法签名上为它们创建对象.但是，这无法按预期工作.

I would like to send the contents of the data as well as a QueryString which could contain any number and types of key/value pairs to the controller. I can extract these key/value pairs on the server since I cannot create an object for them on the method signature. However, this fails to work as intended.

jQuery:

function PostForm() {

    $.ajax({
        url: "/Home/TestMVC",
        type: "POST",
        dataType: "application/JSON",
        data: 
        { 
           Obj: $('#form').serialize(),
           TheWeirdQueryString: $('.additionalParams').serialize(),
        }
    });
};

操作:

public void TestMVC(MyObject obj, String TheWeirdQueryString)
{
//Obj now does NOT contain the element, it is NULL. Whereas TheWeirdQueryString works fine. 
}

发布:

Obj: name=bob&age=999&sex="unknown"
TheWeirdQueryString: param1=1&param2=2

我认为这是因为我实际上创建了一个 JSON 对象作为数据并将属性设置为对象的名称.

I think this is because I have actually created a JSON object as the Data and set the properties to the name of the object.

Firebug 中出现的 POST 值有所不同.当我单独发布对象时，POST 值是对象/表单的所有键及其对应的值.在第二个示例中，有两个简单的属性，我给它们取的名字，每个属性都包含一个 QueryString (Foo=1&Bar=2) 并且 MVC 无法将 QueryString 映射到对象的成员(或所以它会出现).

There is a difference in the POST values which appear in Firebug. When I post the object alone, the POST values are all the keys of the object/form with their corresponding values. In the second example there are two simple properties, The name I gave them, each containing a QueryString (Foo=1&Bar=2) and MVC cannot map a QueryString to the members of an object (or so it would appear).

无论如何都可以像在第一个实例中那样工作，而且还要向 Action 的第二个参数发送额外的数据?我猜这是在 jquery 对表单进行序列化时创建的所有现有属性中添加一个额外的属性.

Is there anyway at all to get to work like it does in the first instance, but also to send extra data to a 2nd argument on the Action? I am guessing it's to add an extra property to all the existing ones created when jquery does the serialisation of the form.

我真正想要的帖子是:

Name: "Bob"
Age: "999"
Sex: "Unknown"
TheWeirdQueryString: param1=1&param2=2

推荐答案

$.ajax 方法中的dataType 参数是响应的类型(您期望从服务器返回的数据类型)，而不是请求.试试这个:

dataType parameter in $.ajax method is the type of response (the type of data that you're expecting back from the server), not request. Try this instead:

function PostForm() {
    $.ajax({
        url: "/Home/TestMVC",
        type: "POST",
        dataType: "application/JSON",
        data: $('#form').serialize() + "&" + $('.additionalParams').serialize()
    });
};

或:

function PostForm() {
    $.ajax({
        url: "/Home/TestMVC" + "?" + $('.additionalParams').serialize(),
        type: "POST",
        dataType: "application/JSON",
        data: $('#form').serialize()
    });
};

更新:

试试这个:

控制器:

public void TestMVC(MyObject obj, String[] TheWeirdQueryString)
{
}

客户:

function PostForm() {
    $.ajax({
        url: "/Home/TestMVC",
        type: "POST",
        dataType: "application/JSON",
        data: $('#form').serialize() + "&" + $('.additionalParams').serialize()
    });
};

但在客户端，您的附加参数必须采用以下格式:

but on client side your additional params must be in the following format:

TheWeirdQueryString[0]=param1&TheWeirdQueryString[1]=param2&...&TheWeirdQueryString[n]=paramN

因此 $('.additionalParams') 元素必须具有id"和/或name"属性，例如:TheWeirdQueryString[1]、TheWeirdQueryString[2] ... TheWeirdQueryString[N]

so $('.additionalParams') elements must have "id" and/or "name" attributes like: TheWeirdQueryString[1], TheWeirdQueryString[2] ... TheWeirdQueryString[N]

希望能帮到你

这篇关于通过 jQuery.Ajax 向 MVC 控制器发送多个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！