ASP.NET MVC loading multiple partial views into a single div using JQuery

Question

I am working on a help page which is composed of a navigation tree, content box, and search box. The navigation tree has links to Frequently Asked Questions and Glossary, each of which are linked to an Action which return partial views.

To the right of the navigation tree I have a single content div that I would like to contain whichever partial view is selected in the navigation tree.

Success case (what I want to accomplish): clicking on one of the FAQ links calls the FAQ() method in my controller, then returns a partial view which is then displayed in my content div to the right of the navigation tree. Clicking on another item would cause another partial view to be loaded.

How do I go about this? I've read a ton of ASP.NET MVC JQuery loading blog posts and tutorials but can't find anyone who's done exactly this.

Many thanks!

Answer 1

You should be able to use the jQuery method .load() to load HTML into your div. http://api.jquery.com/load/

You can create an action that returns the partial view as HTML. http://stackoverflow.com/questions/767722/asp-net-mvc-returning-partial-view-as-a-full-view-page

Answer 2

jQuery: one easy way you can do is load all partial views in "Container Div" at page load in one go (if performance is not a issue) then assign each partial div with different div id inside "container", than use jquery to control show(); hide(); for each div.

MVC: however if i were you, "Glossary" and "FAQ" looks same model to me it shouldn't be put in different partial view in first place. if they did designed in separate model, in this scenario, i would recommend you to create a proxy class as a ViewModel above models you want to display, and then load it with one partial view only