ASP.net MVCとjqueryを使用して、部分ページ全体の代わりにJSONを使用してAJAXリストを生成するHTML

Question

AJAXを介してグリッド/リストを動的にロードするページで、そのリストを作成する効率的な方法は、 toはJSON結果を返します。

ASP.net MVCを使用すると、はが部分ページを返すコントローラアクションを呼び出すことができますが、HTMLのチャンクを返すので効率的ではありません。 JSONを使用すると、はるかにコンパクトなデータが返されます。 JSON結果とjqueryを使用してページをレンダリングし、結果を解析してフォーマットするために何らかのループを使用してページをレンダリングする最良の方法は何ですか？私がオンラインで見つけた例のほとんどは、単純な使い方に適した部分リストを返すよう提案していますが、私が見たすべての大きなサイトでは純粋なJSONを使ってAJAXリストを作成しています。

<div> 
    <img src="myimage.jpg"> 
    Category Description 
</div> 
<div> 
    <img src="myimage2.jpg"> 
    Category Description 2 
</div> 
etc... 

JSON結果：言っ

[{"image" : "myimage.jpg", "category" : "Category Description"}] 

---

、現在私が持っている：

を

部分的なHTMLの結果は、（このような大規模な結果を返すために非効率です）

public PartialViewResult CategoryListPartial(string category) { var filteredCategories = DB.Categories.OrderBy(c => c.Name) .Where(c => c.Category.Name == category); return PartialView("CategoryListPartial", filteredCategories); } 

私はそれを持っている方が良いだろうと仮定し

と読み込み画像

$.get('@Url.Action("CategoryListPartial","Categories", new {category="Toys"})', 
    function (data) { 
    $('.ajaxResponse').empty().html('<img src="/contents/images/loader.gif"'); 
    $('.ajaxResponse').replaceWith(data); 
}); 

でリストをロードするには、次のクライアント側のjQuery：

[HttpPost] 
public PartialViewResult CategoryListPartial(string category) 
{ 
     var filteredCategories = DB.Categories.OrderBy(c => c.Name). 
           Where(c => c.Category.Name == category); 
     return Json(results); 
} 

一致するクライアント側の反復処理ではとフォーマットJSONの結果：

$.get('@Url.Action("CategoryListPartial","Categories", new { category = "Toys" })', function (data) { 
    // <pseudocode begin> 
    for each item in data 
    render <div><table><tr>... 
      category.Image = item.Image 
      category.Name = item.Name 
    end render 
    // <pseudocode end> 
}); 

標準的な方法はありますか？

Answer 1

標準？いいえ、標準の方法はわかりませんが、それはJavascript MVCフレームワークのいくつか（Backbone.jsなど）です。私は聞いたことがある他のものを試していない（JavascriptMVC、Knockout.jsなど）、あるいはあなたは完全なMVCに興味はないが、ちょうどJavascriptテンプレート？バックボーンにはUnderscore.jsまでありますが、確かに唯一のものではありません（jQuery apparently has it's own）、さらにはMustashe.js

これで十分でしょうか？ :-D

Answer 2

JsonResult（System.Web.Mvc）というクラスがあります。使用できませんか？

あなたは

public JsonResult getData() 
{ 
    var myData = new {foo= "foo", bar= "bar"}; 
    return Json(myData); 
} 

などのコントローラメソッドと

var url = '@Url.Action("getData", "Home")'; 

$.post(url, 
    function (data) { 
     alert(data.foo); 
     alert(data.bar); 
    } 
); 

ノートのようなコールになるだろう：化するJsonResultは、デフォルトでは唯一のポストへのリンクのための