Show/hide multiple partial views on same page

Question

I have a dashboard kind of page where on the left you would have menu items like:

• link 1
• link 2
• link 3

Each of them going to a different action in the same controller.

I would like to have each action render it's data in the same page (in partial views) but I have no idea what the "best" way of doing this would be.

So lets say link 1 is rendering a list of people (table), link 2 statistics (charts) and list 3 some configuration properties.

How should I define this so that on each click, the main frame (which is the menu bar on the left containing the link 1-2-3 and is defined in a shared view) stays but only the middle content (partial views) would change, keeping in mind that link 1 is a table, link 2 charts and other controls and link 3 a bunch of controls (textboxes, drop down's and so on).

Should I show/hide div's on each click? This seems/feels kind of dirty to me? All input/suggestions are very welcome!

EDIT: This is the behavior I want (accepted answer): Show/Hide Multiple Divs with Jquery

Note: I am using C# in an ASP.NET MVC project and I would prefer a C# ASP.NET MVC solution (Javascript if needed), not other script/coding languages or frameworks.

Answer 1

For now I have implemented this answer: Show/Hide Multiple Divs with Jquery since the other ones are not in my direct knowledge to implement them

Code sample:

jQuery(function() {
 jQuery('#showall').click(function() {
  jQuery('.targetDiv').show();
 });
  jQuery('.showSingle').click(function() {
   jQuery('.targetDiv').hide();
    jQuery('#div' + $(this).attr('target')).show();
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="buttons">
  <a id="showall">All</a>
  <a class="showSingle" target="1">Div 1</a>
  <a class="showSingle" target="2">Div 2</a>
  <a class="showSingle" target="3">Div 3</a>
  <a class="showSingle" target="4">Div 4</a>
</div>

<div id="div1" class="targetDiv">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>

http://jsfiddle.net/XwN2L/

I am still open to other suggestions, specially if they involve Partial views and not to much of other things. Thank you all so far!