Click here to Skip to main content
11,411,922 members (60,473 online)
Rate this: bad
Please Sign up or sign in to vote.
See more: jQuery MVC3
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 20:12pm
peru j483
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 at 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
0 OriginalGriff 268
1 Sergey Alexandrovich Kryukov 200
2 Sascha Lefévre 170
3 ProgramFOX 130
4 Maciej Los 110
0 Sergey Alexandrovich Kryukov 8,955
1 OriginalGriff 7,158
2 Maciej Los 3,480
3 Abhinav S 3,248
4 Peter Leow 3,059

Advertise | Privacy | Mobile
Web01 | 2.8.150414.5 | Last Updated 8 Oct 2013
Copyright © CodeProject, 1999-2015
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