1

I've got a tab menu that I want to use to show different partial views depending on the menu item selection. This is how it looks like:

page

Something like: if the selected item is 1, then render view "whatever"...

I want to click on the 1st menu item and render the partial view for Tab1, the 2nd menu item and render the partial view for Tab2, etc...

EDIT - what I have been trying

The view:

<div class="tabs"> <ul> <li><a class="tab" id="tab1" href="#">Personal Data</a></li> <li><a class="tab" id="tab2" href="#">User Image</a></li> <li><a class="tab" id="tab3" href="#">Regional Definitions</a></li> <li><a class="tab" id="tab4" href="#">Colors and Themes</a></li> <li><a class="tab" id="tab5" href='#'>Personal Area</a></li> </ul> </div> <div id="div-for-partial"> </div> ... <script type="text/javascript"> $(function () { $('.tab').click(function () { var id = this.id; $.ajax({ type: 'POST', url: '@Url.Action("GetPartialView", "ConfigController")', data: { 'id': id }, dataType: "html", success: function (data) { $('#div-for-partial').html(data); } }); }); }); </script>

The controller:

public ActionResult Index() { return View(); } [HttpPost] public ActionResult GetPartialView(string id) { switch (id) { case "tab1": return PartialView("_PersonalData"); case "tab2": return PartialView("_UserImage"); } return RedirectToAction("Index"); }
Improve this question
3
  • Do you want to render Ajax loaded views when the tabs are clicked? (Tabs normally expect all partials, for all tabs, to be rendered with the page). Commented Jun 19, 2014 at 16:25
  • Ajaxing partial views is definitely the way to go and is quite simple once you get into it. Commented Jun 19, 2014 at 16:43
  • Just a thought, but will data: 'id': id map to the controller action? I thought id was only implied in the routing, so needs to be in the path. Commented Jun 20, 2014 at 16:09

1 Answer 1

Reset to default
2

Implementing Ajax is not that complicated. First assign each of your tabs a unique ID and a common class. 

<div class="tabs"> <ul> <li><a href="#" class="tab" id="tab1">Tab 1</a></li> <li><a href="#" class="tab" id="tab2">Tab 2</a></li> <li><a href="#" class="tab" id="tab3">Tab 3</a></li> </ul> </div>

Then, create a controller action to post to.

public ActionResult GetPartialView(string id) { switch(id) { case "tab1": return PartialView("_PartialForTab1"); case "tab2": return PartialView("_PartialForTab2"); case "tab3": return PartialView("_PartialForTab3"); } return RedirectToAction("YourHomePage"); }

Add a click event handler for your tabs:

<script type="text/javascript"> $(function () { $('.tab').click(function() { var id = this.id; $.get('@Url.Content("GetPartialView")', { 'id': id }, function (data) { $('#div-for-partial').html(data); }); }); }); </script>
Improve this answer
Sign up to request clarification or add additional context in comments.

11 Comments

I'm having trouble with last part of your answer: I've written the script you provided and adapted it to match the controller name, the div id, etc.. Now, how do I call this? Adding an onClick to each li doesn't work. Can you help me out?
Whoops, I'm sorry, mistyped the tab class selector, it's supposed to be $('.tab').click, I will update the answer.
nothing happens. No view is displayed: I placed a breakpoint on the controller but after clicking the tab it doesn't get hit
@chiapa: Did you wrap the JQuery code shown in a DOM ready handler (or place it at the very end of the body tag)?
Do you mean this? @Scripts.Render("~/bundles/jquery") I have this in the header of the _Layout page. If it's not this, help me please, I'm new to both Ajax and JQuery
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.