How Can I Render a Partial View via AJAX?

Question

This should be relatively simple for the MVC experts out there, but I'm still learning the ropes.

• I have a View which is not strongly-typed, simply ViewPage<dynamic>.
• On this View, I have a single textbox, which is extended using jQuery's AutoComplete
• When the user types something into the textbox, the AutoComplete does an AJAX call to a Controller, which calls a stored procedure, returning a JSON collection of records, with 2 properties:
  • ID (Identifer for the item)
  • Name (Name for the item)

Now, with the jQuery AutoComplete UI Plugin, when a user clicks one of the items that is shown in the autocomplete, a client-side event is called, passing through the JSON object:

// .. snip heaps of jQuery
select: function (event, ui) {
   // ui is a JSON object:
   //    ui.item.id
   //    ui.item.name
}

Now my question is - from this client-side event, I need to display on the same page (below the texbox), extended information about this item. (obviously will require another AJAX call to the server).

How can I do that? The only thing I can think of is simply make the jQuery call another controller which returns a single JsonResult, and manually parse this JSON, displaying the HTML I want.

Is that the only way? Is there a helper I can use? The reason my View is not strongly-typed is because when the page loads, there is no information displayed about the model, simply a textbox.

I was really hoping I could create a partial view that is strongly-typed, and somehow call RenderPartial on this partial view, passing through the id of the item I want to display. Is this possible from client-side/AJAX?

Answer 1

You can use jQuery to request html as well as Json from the controller. So your jQuery could look like this:

$.get(action, null, function(data){
  $('#someDiv').html(data);
}, 'html');

and you controller could return:

return PartialView("SomePartial", Model)

And the html would be rendered to the screen