In this article I will explain with an example, how to implement and use jQuery Tabs using the jQuery UI Tabs plugin in ASP.Net MVC Razor.
This article will also illustrate how to maintain / retain / preserve the selected tab of jQuery UI Tabs plugin across Form Submissions in ASP.Net MVC Razor.
Controller
The Controller consists of two Action methods.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
Action method for handling POST operation
Inside this Action method, the value of the Hidden Field is captured and assigned to a ViewBag object. The Hidden Field stores the Index of the selected jQuery UI Tab.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(int selectedTab)
{
ViewBag.SelectedTab = selectedTab;
return View();
}
}
View
The View consists of an HTML Form which has been created using the Html.BeginForm method with the following parameters.
ActionName – Name of the Action. In this case the name is Index.
ControllerName – Name of the Controller. In this case the name is Home.
FormMethod – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
The Form contains a jQuery UI Tab implementation and also a Hidden Field and a Submit Button.
When a jQuery Tab is selected, its Index is saved in the Hidden Field and after the Form is submitted and the page is reloaded, the value of the ViewBag object is used to set the selected jQuery UI Tab.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<body>
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<div id="tabs" style="width:300px">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-3">Tab 3</a></li>
</ul>
<div id="tabs-1">
Content 1
</div>
<div id="tabs-2">
Content 2
</div>
<div id="tabs-3">
Content 3
</div>
</div>
<br/>
<input type="hidden" id="selectedTab" name="selectedTab" value="@ViewBag.SelectedTab"/>
<input type="submit" value="Submit"/>
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
rel="stylesheet" type="text/css"/>
<script type="text/javascript">
var selected_tab = 0;
$(function () {
var tabs = $("#tabs").tabs({
select: function (e, i) {
selected_tab = i.index;
}
});
selected_tab = $("#selectedTab").val() != "" ? parseInt($("#selectedTab").val()) : 0;
tabs.tabs('select', selected_tab);
$("form").submit(function () {
$("#selectedTab").val(selected_tab);
});
});
</script>
</body>
</html>
Screenshot
![Implementing jQuery Tabs in ASP.Net MVC]()
Downloads
