Click here to Skip to main content
Rate this: bad
good
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 http://jqueryui.com/tabs/ 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 j458
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Step 1 : Download jQuery API and jQueryTab API. You can download it from here http://jquery.com/[^](jqueryApi)
http://jqueryui.com/download/[^](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
<head>
  <meta charset="utf-8" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
 
</head>
Step 5 : Create a body section in that view like below
<body>
@using(Html.BeginForm("TabTest","GetTabs",FormMethod.Post)){
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">About Us</a></li>
    <li><a href="#tabs-2">Contact Us</a></li>
  </ul>
  <div id="tabs-1">
    <p>@Model.TextBoxFor(x=>x.ContentOne)</p>
<input type="submit" name="button1" value="Click here">
  </div>
  <div id="tabs-2">
    <p>@Model.TextBoxFor(x=>x.ContentTwo) </p>
<input type="submit" name="button2" value="clickhere!">
  </div>
 
</div>
 }
 
</body></body>
 
Step6: Create a actionResult in TabTestController like below
public ActionResult GetTabs(Tab tabClass)
{
string content=tabClass.ContentOne;
return View();
}
 
Get Started MVC here
http://www.asp.net/mvc[^]
 
Hope this helps.
 
[Moved from 2nd answer]
http://www.c-sharpcorner.com/UploadFile/krishnasarala/tabs-using-j-query-for-an-Asp-Net-mvc-application/
  Permalink  
v5
Comments
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
good
Please Sign up or sign in to vote.

Solution 4

usually,
we pass partial views to the tabs.
 
so each tab contain one partialview.
 
this help you google for more info.
  Permalink  

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

  Print Answers RSS
0 OriginalGriff 520
1 Maciej Los 290
2 Richard MacCutchan 265
3 BillWoodruff 265
4 Suraj Sahoo | Coding Passion 155
0 OriginalGriff 8,764
1 Sergey Alexandrovich Kryukov 7,437
2 DamithSL 5,639
3 Maciej Los 5,279
4 Manas Bhardwaj 4,986


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