web-dev-qa-db-ja.com

複数のJSONオブジェクトをMVC3アクションメソッドに渡す

JQueryコード：

 
 //これは、 "CategoryID"、 "CategoryName"、 "ProductID"、 "ProductName" 
 $（ "＃btnPost"）。click（function（）{ 
 var CategoryModel = {
 CategoryID：1、
 CategoryName： "Beverage" 
}; 
 var ProductModel = {
 ProductID ：1、
 ProductName： "Chai" 
}; 
 var data1 = {}; 
 
 data1 ["cat"] = CategoryModel; 
 data1 ["prd"] = ProductModel; 
 
 var jsonData = JSON.stringify（data1）; 
 
 $ .ajax（{
 url：url + '/ Complex/ModelTwo'、//これは機能しますが、プロパティ値はnullです
タイプ： 'post'、
 dataType： 'json'、
 data：{"cat"：CategoryModel、 "prd"：ProductModel}、//jsonData,
 cache：false、
成功：関数（結果）{
 alert（result）; 
}、
エラー：関数（xhr、ajaxOptions、thrownError）{
 alert（thrownError）; 
} 
}）; 
}）;

MVCコード（C＃）：

     public class ComplexController : Controller
    {
        public string ModelOne(Category cat)
        {
            return "this took single model...";
        }

        public string ModelTwo(Category cat, Product prd)
        {
            return "this took multiple model...";
        }
    }
    public class Category
    {
        public int CategoryID { get; set; }
        public string CategoryName { get; set; }
    }
    public class Product
    {
        public int ProductID { get; set; }
        public string ProductName { get; set; }
    }

ここでの問題は、「CategoryMode」、「ProductModel」を「ModelTwo」アクションメソッドに渡しても機能しないことです。 JQuery投稿はアクションメソッド「ModelTwo」を正しく識別しますが、「cat」、「prd」プロパティ値はnullです。 「CategoryID」、「CategoryName」、「ProductID」、「ProductName」は、そのメソッドを実行してもすべてnullです。

 
 //これでうまくいく... 
 
 $（ "＃btnPost"）。click（function（）{
 var CategoryModel = {
 CategoryID：1、
 CategoryName： "Beverage" 
}; 
 var ProductModel = {
 ProductID：1、
 ProductName： "Chai" 
}; 
 var data1 = {}; 
 
 data1 ["cat"] = CategoryModel; 
 data1 [ "prd"] = ProductModel; 
 
 var jsonData = JSON.stringify（data1）; 
 
 $ .ajax（{
 url：url + '/ Complex/ModelOne'、//これは機能します
タイプ： 'post'、
 dataType： 'json'、
 data：CategoryModel、
 cache： false、
成功：関数（結果）{
アラート（結果）; 
}、
エラー：関数（xhr、ajaxOptions、thrownError）{
 alert（thrownError）; 
} 
}）; 
}）;

では、「ModelTwo」アクションメソッドへの最初のJQuery呼び出しの何が問題になっていますか？

私はこれを理解するのに多くの時間を費やしましたが、何が起こっているのかわかりません。適切なアクションメソッドを選択できるので、ルーティングの問題はありません...

どんな助けでも大歓迎です。

ありがとう！

jqueryjsonasp.net-mvc-3
15
Sensbile Dude

あなたはそれらをJSONリクエストとして送ることができます：

var categoryModel = {
    categoryID: 1,
    categoryName: "Beverage"
};
var productModel = {
    productID: 1,
    productName: "Chai"
};
$.ajax({
    url: '@Url.Action("ModelTwo")',
    type: 'post',
    dataType: 'json',
    // It is important to set the content type
    // request header to application/json because
    // that's how the client will send the request
    contentType: 'application/json',
    data: JSON.stringify({ cat: categoryModel, prd: productModel }),
    cache: false,
    success: function (result) {
        alert(result);
    },
    error: function (xhr, ajaxOptions, thrownError) {
        alert(thrownError);
    }
});

JSON.stringifyこの例で使用しているメソッドは、すべての最新のブラウザーにネイティブで組み込まれていますが、レガシーブラウザーをサポートする必要がある場合は、ページに json2.js スクリプトを含めることができます。

これにより、次のアクションに正しくバインドされます。

[HttpPost]
public ActionResult ModelTwo(Category cat, Product prd)
{
    return Json(new { message = "this took multiple model..." });
}

ただし、ビューモデルを定義することをお勧めします。

public class MyViewModel
{
    public Category Cat { get; set; }
    public Product Prd { get; set; }
}

次に、コントローラーアクションで次のビューモデルを実行します。

[HttpPost]
public ActionResult ModelTwo(MyViewModel model)
{
    return Json(new { message = "this took a single view model containing multiple models ..." });
}

そしてもちろん、クライアント側のコードは同じままです。

37
Darin Dimitrov