whats the best way to show a partialview on the results of a jquery json call

Question

i have an asp.net mvc view where the top of the page is a table. What i want is to click on a row in the table which will go to the server and get back details on that table. This is working fine and i am returning the details in Json.

The issue is i know want to show a details panel below. Right now i have the details pane all complete in a partial view.

How would i "hook this up" using jquery so when i click on the row, the details pane shows up with the correct model data filled out.

1. Do i ditch the json and simply generate html in my controller action and return html to the view to display the details pane ?
2. Other best practices or suggestions here ?

Answer 1

I'm assuming your using the MVC Ajax helpers to call your controller to get your JSon result?

An alternative to that would be using JQuery to call your JSon controller. So on a link or button click you could call some javascript which finds the id you need to pass to the controller from a hidden tag. When you receive your JSon results back you just set the properties of the html tag and show/hide your detail pane. Something like this:

function ShowPartial() {
  var ID = $("#hiddenValue").attr("value");
    $.getJSON("YourUrl" + ID, function(result) {
        $.each(result, function(item) {
          // Set you html properties using this["JSonPropertyName"]
        });
    });
}

An alternative is to simply use the MVC Ajax helpers and update a div tag with your partial details view and not use JSon.

Answer 2

I would go for a client side template engine like jtemplates (jquery plugin) to handle this client side. You can simply return a partialview from the controller action and render that html where you want it on the page. But I consider it bad practice to return html from a ajax request and I would much rather return a json object.