CODEWITHSUNDEEP
jquerycssasp.net-mvcmodel-view-controller
Harsha
Harsha

Reputation: 61

Tab Controls in ASP.net MVC

I am trying to visualize tab pages in ASP.net MVC. I have tried many solutions, but I am unable to figure out right way to get the result.

My requirement is to get the following view:

However, I am getting the following view:

Controller:

public ActionResult CorporationRegistrationPg1()
        {
            return View(_db.SUPRTesting);
        }

        public ActionResult CorporationRegistrationPg2()
        {
            return View();
        }

        [HttpPost]
        public ActionResult CorporationRegistrationPg2(int selectedTab)
        {
            ViewBag.SelectedTab = selectedTab;
            return View();
        }

View:

@{
    ViewBag.Title = "CorporationRegistrationPg2";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<body>
    <div id="tabs" style="height: 1475px; width: 80%; text-align: left; margin-left: 10%; margin-right: 10%; margin-top: 10%; margin-bottom: 46px; background-color: #FFFFFF; border-color:black; border-style:solid">
        <ul>
            <li class="active"><a href="#tab1">Corporation Details</a></li>
            <li class="active"><a href="#tab2">Contact Information</a></li>
            <li class="active"><a href="#tab3">Documents</a></li>
        </ul>
<div id="tab1">
Content 1
</div>
<div id="tab2">
Content 2
</div>
<div id="tab3">
Content 3
</div>
</div>
    <input type="hidden" id="selectedTab" name="selectedTab" value="@ViewBag.SelectedTab" />
 <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>

Can someone help me with this. If you want me to try a whole new way, I am ready to take that too.

Upvotes: 0

Views: 8427

Answers (1)

Jerdine Sabio
Jerdine Sabio

Reputation: 6185

Here you go, you will need to scratch your current tabs and copy the whole markup(css,js,html) below.

I started from styling the li with display:inline so that they will be vertically displayed.

Run demo below;

$(document).ready(function() {
  $(".tab-nav-wrapper li.active").click();
  $($(".tab-nav-wrapper li.active a").attr("href")).show();

  $(".tab-nav-wrapper li").click(function(e) {
    e.preventDefault();
    e.stopPropagation();

    $(".tab-nav-wrapper li").removeClass("active");
    $(this).addClass("active");

    var target = $(this).find("a").attr("href");
    $(".tab-content-wrapper").find(".tab-content").hide();
    $(".tab-content-wrapper").find(target).show();
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<style>
  .tabs {
    height: 1475px;
    width: 100%;
    text-align: left;
  }
  
  .tab-nav-wrapper {
    width: 100%;
    overflow-x: auto;
    position: relative !important;
    z-index: 999 !important;
    top: 3px;
  }
  
  .tabs ul {
    display: block;
    /*width: max-content;*/
    overflow-y: hidden;
    margin: 0px;
    padding-inline-start: 5px;
  }
  
  .tabs ul li {
    display: inline-block;
    border: 1px solid grey;
    border-bottom: 3px solid blue;
    background-color: white;
  }
  
  .tabs ul li.active {
    border: 1px solid black;
    border-bottom: 3px solid white;
  }
  
  .tabs ul li a {
    text-decoration: none;
    color: blue;
    padding: 10px;
    line-height: 25px;
    position: relative;
    font-weight: bold;
  }
  
  .tab-content-wrapper {
    position: relative !important;
    z-index: 1 !important;
    border: 3px solid blue;
    padding: 20px;
    min-height: 40px;
  }
</style>

<div class="tabs">
  <div class="tab-nav-wrapper">
    <ul>
      <li class="active"><a href="#tab1">Corporation Details</a></li>
      <li><a href="#tab2">Contact Information</a></li>
      <li><a href="#tab3">Documents</a></li>
    </ul>
  </div>
  <div class="tab-content-wrapper">
    <div id="tab1" class="tab-content" style="display:none;">
      Content 1
    </div>
    <div id="tab2" class="tab-content" style="display:none;">
      Content 2
    </div>
    <div id="tab3" class="tab-content" style="display:none;">
      Content 3
    </div>
  </div>
</div>

Upvotes: 3

Related Questions