Question

I am trying to build a sample for myself using MVC3, Razor view engine and JQuery UI.

From the controller I return a ViewModel (which has List) and able to wrap the JQuery Accordion around the html segments. Everything works as expected.

Now, I am trying to make it little better.
1) Would like to have a pagination bar, which can refresh the Accordion depending upon the page selected and number of items per page selected (I know what needs to be done in controller etc. My javascript skills are not so good when compared to c# 🙁 )

2) I would like to be able to select the “display type” for the data. For ex, if you see Slickdeals website, we can choose, Grid or Accordion or simple list. It appears it just applies a template over the data and refreshes the html.

I am wondering how best this can be achieved. (one thought that came to my mind is, send an AJAX request to controller with the desired display type and controller can render the view and return the string as response which can then be applied as html for the element. Is there a better way, I mean data is already in the browser so can we just apply some template and just re-render the same data?)

For both (1) and (2), I would like to avoid full page post back.

(I will try to add more details)

Thanks in advance

Answer 1

Re (2): I think it’s a bad idea to generate the HTML inside the controller — separation of concerns suggests that the View should be solely responsible for the HTML.

However, you can have a property in your View Model that tells the view which version to generate: e.g.

public class XyzModel
{
    public string displayType { get; set; }
    // ... other properties
}

Then in the View, you can test this variable:

@if (Model.displayType == "grid")
{
   // html for grid
}
else if (Model.displayType == "accordian")
{
   // html for accordian
}

etc., all html blocks using the same data.

If you want to use Ajax to populate this, you can isolate this code inside a partial view, and populate it using jQuery, something like:

$.post(
    form.attr("action"),
    form.serialize(),
    function (data) {
          $("#dataDisplay").html(data);
    });

where the dataDisplay section might be like:

<div id="dataDisplay">
@Html.Partial("DataDisplayPartial", Model)
</div>

and the DataDisplayPartial view would contain the above code … something like that.