ASP.NET MVC Loading a page content into a div using JQuery

Question

I'm using ASP.NET MVC in a project and I have a requirement like this..

It has one main View(Main.aspx) and a Action methods to render the main view. And I have another View (SearchResult.aspx) and Action to render the search results content. I need to load the SearchResult page asynchronously in to a DIV in the main View. Is there a way to achieve this?

Thanks /BB

Answer 1

Yeah that's pretty simple. Assuming your controller is say "admin" and the action is "users", your default route for that page is /admin/users. So you can just use the .load method in jQuery to do it like so:

$('#searchResults').load('/admin/users');

This assumes that the main page has a div with the ID of "searchResults":

<div id="searchResults"></div>

The action just needs to return a partialviewresult. Of course if you set up a custom route or anything in global.asax switch that out for the example URL I provided.

Answer 2

.NET MVC uses jQuery, which provides a .load() function. You can use this function to load any content into a target DIV. See this for reference: http://docs.jquery.com/Ajax/load