Implementing Tabs in MVC using jQuery
In the previous article, we have also learned about how to
Expand or collapse accordion panel using Bootstrap and Multiple Div Layer of Expand/Collapse using Java Script and CSS.
Controller:-
The value of the Hidden Field is store and assigned to a ViewBag object. The Hidden Field stores the Index of the selected jQuery UI Tab.
using System;
using System.Collections.Generic;
using System.Drawing;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MVCCODESOLUTIONS.Controllers
{
public class HomeController : Controller
{
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">
<ul>
<li><a href="#tabs-1">DMD Solutions</a></li>
<li><a href="#tabs-2">Bitto Properties</a></li>
<li><a href="#tabs-3">Home Maintenance Company</a></li>
</ul>
<div id="tabs-1">
DMD Solutions is a complete IT solutions company, providing software development and IT services.
We are an entity that is focused to provide 100% satisfaction to our clients.
We provide the latest technology and most innovative solutions.
We offer the most comprehensive list of business software solution on the web so that you are guaranteed to find your best match.
</div>
<div id="tabs-2">
Bittoproperties.com made it easy for you. Start selling, buying and renting
without the hassle of intermediates. Exclusive property database as verified,
latest and genuine information only with bittoproperties.com!
</div>
<div id="tabs-3">
Home Maintenance Company is a young organization offering a unique service to
residents of India from which he can get complete home maintenance solution in the
single roof by developing the reputation as a qualified, reasonably priced and
trusted service provider.
</div>
</div>
<br />
<input type="hidden" id="selectedTab" name="selectedTab" value="@ViewBag.SelectedTab" />
<input type="submit" value="Click Here" />
}
<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>
OUT-PUT:-
Implementing Tabs in MVC using jQuery
Reviewed by NEERAJ SRIVASTAVA
on
10:45:00 PM
Rating:
Reviewed by NEERAJ SRIVASTAVA
on
10:45:00 PM
Rating:
No comments: