views:

50

answers:

1

Hi Guys,

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?

BTW i'm using ASP.NET MVC2.

Cheers!

+5  A: 

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

James Connell
And specifically, 'action' in the jQuery snippet is a path to a controller action (using the ui.item.id).
James Connell
Trying this out right now, stay tuned...
RPM1984
RPM1984
BTW - what's the last parameter to `$.get`? ('html'). I left that out.
RPM1984
the last parameter tells jquery what sort of response to expect- valid arguements are 'json', 'html', 'xml' (maybe others). Although in practice it seems you can leave it off an it will work fine.
James Connell
Cool, thanks again.
RPM1984
One more thing i should point out- IE will tend to cache $.get ajax requests so if you have partials that change a lot, use $.post (same syntax) to get around this limitation
James Connell
Didn't know that, thanks for the tip.
RPM1984