Click here to Skip to main content
13,139,773 members (45,661 online)
Rate this:
Please Sign up or sign in to vote.
See more:
Am new to MVC as well as Jquery and i have a requirement to finish it off in urge so am need of some help.

I have a jquery Tabbed Control and am not sure how to have Text boxes or buttons inside each Tabs and how to save the data passing onto the server.

Some sample codes or useful links will help.
Posted 4-Feb-13 19:12pm
peru j553
Rate this: bad
Please Sign up or sign in to vote.

Solution 1

Step 1 : Download jQuery API and jQueryTab API. You can download it from here[^](jqueryApi)[^](select your widget for the tab and download.)
Step2:Create a Model class named Tab and then create two property ContentOne and ContentTwo like below
public class Tab
public string ContentOne{get;set;}
public string ContentTwo{get;set;}

Step3: Create a new Mvc Application and Create a controller first(TabTestController) and then right click the controller create a view and select Tab class as a Strongly Type class(Select Empty Template).
Step4: Put both the above api in the head section like below
  <meta charset="utf-8" />
  <script src=""></script>
  <script src=""></script>

Step 5 : Create a body section in that view like below
<div id="tabs">
    <li><a href="#tabs-1">About Us</a></li>
    <li><a href="#tabs-2">Contact Us</a></li>
  <div id="tabs-1">
<input type="submit" name="button1" value="Click here">
  <div id="tabs-2">
    <p>@Model.TextBoxFor(x=>x.ContentTwo) </p>
<input type="submit" name="button2" value="clickhere!">

Step6: Create a actionResult in TabTestController like below
public ActionResult GetTabs(Tab tabClass)
string content=tabClass.ContentOne;
return View();

Get Started MVC here[^]

Hope this helps.

[Moved from 2nd answer]
peru j 5-Feb-13 2:15am
Thanks. Was helpful. Please share any useful links for mvc3 with jquery tab with post Functions
Rate this: bad
Please Sign up or sign in to vote.

Solution 4

we pass partial views to the tabs.

so each tab contain one partialview.

this help you google for more info.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy |
Web01 | 2.8.170915.1 | Last Updated 8 Oct 2013
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100