4

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?

yoozer8
  • 7,361
  • 7
  • 58
  • 93
RPM1984
  • 72,246
  • 58
  • 225
  • 350

1 Answers1

13

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

automagic
  • 1,067
  • 8
  • 10
  • And specifically, 'action' in the jQuery snippet is a path to a controller action (using the ui.item.id). – automagic Oct 21 '10 at 23:35
  • BTW - what's the last parameter to `$.get`? ('html'). I left that out. – RPM1984 Oct 21 '10 at 23:46
  • 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. – automagic Oct 21 '10 at 23:48
  • 3
    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 – automagic Oct 21 '10 at 23:59