Implementing Tabs in MVC using jQuery

In the previous article, we have also learned about how to

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 Implementing Tabs in MVC using jQuery Reviewed by NEERAJ SRIVASTAVA on 10:45:00 PM Rating: 5

No comments:

Powered by Blogger.