使用ASP.net MVC和jQuery來使用JSON填充AJAX列表而不是完整的部分頁面HTML

在通過AJAX動態加載網格/列表的頁面中，填充該列表的有效方法是調用控制器操作以返回一個JSON結果。使用ASP.net MVC和jQuery來使用JSON填充AJAX列表而不是完整的部分頁面HTML

使用ASP.net MVC，你可以調用一個控制器動作返回一個局部頁面，但這看起來並不高效，因爲它返回了HTML塊。使用JSON會導致返回更緊湊的數據。使用JSON結果和jQuery來呈現頁面的最佳方式是什麼，使用某種循環來解析和格式化結果？我在網上找到的大多數例子都只是建議返回一個部分列表，這可能適合用於微不足道的用途，但我見過的所有大型網站都使用純JSON來填充他們的AJAX列表。

部分HTML結果（似乎低效返回這麼大的結果）：

<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"}]

儘管如此，目前我有：

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

而下面的客戶端的jQuery的加載圖像

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

加載列表我以爲這將是更好的有：

[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> 
});

是否有一個標準的方法來實現這個目標？

來源

2012-03-03 Ruz

標準？不，我不知道標準的方式來做到這一點，但是，是的，這正是一些Javascript MVC框架所做的（如Backbone.js）。我還沒有嘗試過其他我聽說過的其他人（JavascriptMVC,Knockout.js等），或者你對MVC完全不感興趣，但只是Javascript模板？骨幹確實有，通過Underscore.js，但它當然不是唯一的（jQuery apparently has it's own），然後還有Mustashe.js

這對你而言足夠嗎？ :-D

來源

2012-03-03 21:16:52 JayC

感謝您的鏈接@JayC。由於構建瞭如此多的模板框架，看起來這是實現客戶端列表呈現的良好開端。 – Ruz 2012-03-06 01:21:21

有一個名爲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默認情況下只回答早報

來源

2012-03-03 22:06:40

我確實得到了這一點，但想知道是否有更好的渲染布局方式，並指向模板庫。不過謝謝你，你的回答可能會幫助其他地方的其他人。 – Ruz 2012-03-06 01:24:11

使用ASP.net MVC和jQuery來使用JSON填充AJAX列表而不是完整的部分頁面HTML

回答

相關問題