Использование ASP.net MVC и jquery для заполнения списков AJAX с использованием JSON вместо полного неполного HTML страницы

Question

На странице с сеткой / списком, динамически загружаемыми через AJAX, эффективный способ заполнить этот список - вызвать действие контроллера, возвращающее результат JSON.

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

Есть ли стандартный способ достижения этого?

Answer 1

Есть класс с именем 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 по умолчанию отвечает только на публикацию сообщений

Answer 2

Стандартный? Нет, я не знаю стандартного способа сделать это, но да, это то, что делают некоторые из инфраструктур Javascript MVC (например, Backbone.js ). Я не пробовал ни одного из других, о которых слышал ( JavascriptMVC , Knockout.js и т. Д.) Или, может быть, вы не заинтересованы в полной версии MVC, а просто в Javascript шаблонирование? У Backbone есть это через Underscore.js , но это, конечно, не единственный (jQuery , очевидно, имеет свой собственный ), а также есть Mustashe.js

Этого вам достаточно? : -D