current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

In a page that has a grid/list dynamically loaded via AJAX, an efficient way to populate that list would be to call a controller action to that returns a JSON result.

With ASP.net MVC, you could call a controller action that returns a partial page, but that doesn't seem efficient since it returns chunks of HTML. Using JSON would result in returning data that is much more compact in size. What is the best way to render the page using just JSON results and jquery, using some sort of loop to parse and format the results? Most of the examples I've found online simply suggest returning a partial list, which may be suitable for trivial uses, but all the big sites I've seen use pure JSON to populate their AJAX lists.

Partial HTML Result (seems inefficient to return such a large result):

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

JSON Result:

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

That said, currently I have :

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

And the following client side jquery to load the list with a loading image

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

I assume it would be better to have:

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

With the matching client side iterate and format the JSON results:

$.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>
 });

Is there a standard way of achieving this?

share|improve this question

2 Answers 2

up vote 1 down vote accepted

Standard? No, I don't know of a standard way to do this, but yes, that's what some of the Javascript MVC frameworks do (like Backbone.js). I haven't tried any of the others I've heard about ( JavascriptMVC, Knockout.js, etc.) Or maybe you're not interested in the full MVC but just Javascript Templating? Backbone does have that through Underscore.js, but it's certainly not the only one (jQuery apparently has it's own), and then there's also Mustashe.js

That enough for you? :-D

share|improve this answer
    
Thanks for the links @JayC. Since there's so many templating frameworks built, it looks like that's a good start to implement client side list rendering. –  Ruz Mar 6 '12 at 1:21
up vote 0 down vote

There's a class called JsonResult (System.Web.Mvc), can't you just use that?

you would get a controller method like 

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

and a call like

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

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

Note: JsonResult answers only to Post by default

share|improve this answer
    
I did get to this point, but wanted to know if there were better ways of rendering a layout, and was pointed towards templating libraries. Thank you though, your answer may help someone else in a different spot. –  Ruz Mar 6 '12 at 1:24

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.