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/
Submit an article or tip