Envoi de plusieurs éléments au contrôleur MVC via jQuery.Ajax

Question

Si vous sérialisez un formulaire à l'aide de quelque chose comme jQuery, il associera souvent les clés et les valeurs JSON aux propriétés d'un objet de l'action du contrôleur sur laquelle vous écrivez. Donc:

jQuery:

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

En supposant que les détails principaux contiennent des éléments dont le nom du paramètre est la clé, ils doivent mapper directement sur l'objet:

Action:

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

POST:

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

Quelqu'un sait-il comment cela fonctionne? Chaque fois que je passe le formulaire et toute donnée supplémentaire au contrôleur.

Je souhaite envoyer le contenu des données ainsi qu’une chaîne QueryString pouvant contenir n’importe quel nombre et types de paires clé / valeur au contrôleur. Je peux extraire ces paires clé / valeur sur le serveur car je ne peux pas créer d'objet pour elles sur la signature de la méthode. Toutefois, cela ne fonctionne pas comme prévu.

jQuery:

function PostForm() {

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

Action:

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

Message:

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

Je pense que c'est parce que j'ai créé un objet JSON en tant que données et que j'ai défini les propriétés avec le nom de l'objet.

Il existe une différence dans les valeurs POST qui apparaissent dans Firebug. Lorsque je poste l'objet seul, les valeurs POST sont toutes les clés de l'objet / du formulaire avec leurs valeurs correspondantes. Dans le deuxième exemple, il existe deux propriétés simples, le nom que je leur ai donné, chacune contenant une chaîne QueryString ( Foo = 1 & Bar = 2 ) et MVC ne peut pas mapper une chaîne QueryString sur les membres d'un objet (ou il semblerait donc).

Y a-t-il un moyen de se mettre au travail comme au début, mais aussi d'envoyer des données supplémentaires à un deuxième argument de l'action? J'imagine que c'est pour ajouter une propriété supplémentaire à toutes les propriétés existantes créées lorsque jquery effectue la sérialisation du formulaire.

Le post que je souhaite réellement est:

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

Answer 1

Le paramètre

dataType de la méthode $ .ajax est le type de réponse (le type de données que vous attendez du serveur), et non une requête. Essayez ceci à la place:

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

ou:

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

MISE À JOUR:

Essayez ceci:

Contrôleur:

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

Client:

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

mais côté client, vos paramètres supplémentaires doivent être au format suivant:

<*>

so $ ('. additionalParams') Les éléments doivent avoir " id " et / ou "nom" des attributs tels que: TheWeirdQueryString [1], TheWeirdQueryString [2] ... TheWeirdQueryString [N]

J'espère que cela vous aidera

Answer 2

Données est un objet

...
data: { 
    x :$('#form').serialize(), 
    y:'something else'
}
...

Answer 3

Une autre solution si vous souhaitez un dictionnaire de paires clé / valeur:

public void TestMVC(MyObject obj, IDictionary<string, object> TheWeirdQueryString)
{
}

Client:

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

$ ('. additionalParams'). serialize () format:

TheWeirdQueryString[0].Key=param0&TheWeirdQueryString[0].Value=value0&TheWeirdQueryString[1].Key=param1&TheWeirdQueryString[1].Value=value1&...&TheWeirdQueryString[n].Key=paramN&TheWeirdQueryString[n].Value=valueN

MISE À JOUR:

Vous avez besoin de quelque chose comme ça:

<input class="additionalParams" type="text" name="TheWeirdQueryString[0].Key" value="param0" />
<input class="additionalParams"type="text" name="TheWeirdQueryString[0].Value" value="value0" />
<!-- ... -->
<input class="additionalParams"type="text" name="TheWeirdQueryString[n].Key" value="paramN" />
<input class="additionalParams"type="text" name="TheWeirdQueryString[n].Value" value="valueN" />