How can I get a partial view through AJAX?

Question

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

• I have a view that is not strongly typed, just ViewPage<dynamic> .
• In this view, I have one text field that expands with jQuery AutoComplete
• When the user enters something into the text field, autocomplete makes an AJAX call to the controller, which calls the stored procedure, returning a collection of JSON records with two properties:
  • ID (item identifier)
  • Name (Name for the item)

Now, when the JQuery AutoComplete UI Plugin, when the user clicks one of the items shown in autocomplete, an event is triggered on the client side, 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 event, I need to display extended information about this element on the same page (below texbox). (Obviously, another AJAX call to the server will be required).

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

Is this the only way? Is there an assistant that I can use? The reason my view is not very typified is that when the page loads, the model information is not displayed, just a text field.

I really hoped that I could create a partial view that is strongly typed, and somehow call RenderPartial on that partial view, going through the identifier of the element I want to display. Is this possible from the client side / AJAX?

Answer 1

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

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

and you can return the controller:

 return PartialView("SomePartial", Model) 

And html will be displayed on the screen