jQuery.Ajaxを介して複数のアイテムをMVCコントローラーに送信する

Question

youaがjQueryのようなものを使用してフォームをシリアル化する場合、JSONキーと値を、投稿先のコントローラーアクションのオブジェクトのプロパティにマップすることがよくあります。だから：

jQuery：

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

主要な詳細情報には、オブジェクトに直接マップする必要があるキーとしてパラメーターの名前を持つ要素が含まれていると仮定します：

アクション：

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

POST：

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

これがどのように機能するか知っている人はいますか？フォーム およびその他のデータ をコントローラーに渡すたびに破損します。

データの内容と、任意の数とタイプのキー/値ペアを含むQueryStringをコントローラーに送信したいと思います。メソッドシグネチャでそれらのオブジェクトを作成できないため、サーバーでこれらのキー/値のペアを抽出できます。ただし、これは意図したとおりに機能しません。

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オブジェクトを実際に作成し、プロパティをオブジェクトの名前に設定したためだと思います。

Firebugに表示されるPOST値には違いがあります。オブジェクトを単独で投稿する場合、POST値はすべて、対応する値を持つオブジェクト/フォームのキーです。 2番目の例には、2つの単純なプロパティがあります。それぞれにQueryString（ Foo = 1＆amp; Bar = 2 ）が含まれ、MVCはQueryStringをオブジェクトのメンバーにマップできません（または表示されます）。

とにかく、最初のインスタンスと同じように動作するだけでなく、アクションの2番目の引数に追加のデータを送信することもできますか？ jqueryがフォームのシリアル化を行うときに作成されるすべての既存のプロパティに追加のプロパティを追加することだと思います。

実際に必要なPOSTは次のとおりです。

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

Answer 1

$ .ajaxメソッドの

dataTypeパラメーターは、リクエストではなく、応答のタイプ（サーバーから返されるデータのタイプ）です。代わりにこれを試してください：

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)
{
}

クライアント：

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

ただし、クライアント側では、追加のパラメータは次の形式である必要があります。

<*>

so $（ '。additionalParams'）要素には＆quot; id＆quot;が必要ですおよび/または＆quot; name＆quot;次のような属性：TheWeirdQueryString [1]、TheWeirdQueryString [2] ... TheWeirdQueryString [N]

これが役立つことを願って

Answer 2

データはオブジェクトです

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

Answer 3

キー/値ペアの辞書が必要な場合の別の解決策：

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

クライアント：

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

$（ '。additionalParams'）。serialize（）形式：

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

更新：

次のようなものが必要です：

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