Here is a simple sample.
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(int selectedTab)
{
ViewBag.SelectedTab = selectedTab;
return View();
}
}
View
@{
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="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://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
