ASP.net MVC 中的选项卡控件答案

【问题标题】：Tab Controls in ASP.net MVCASP.net MVC 中的选项卡控件
【发布时间】：2020-07-22 13:46:02
【问题描述】：

我正在尝试在 ASP.net MVC 中可视化标签页。我尝试了很多解决方案，但我无法找出正确的方法来获得结果。

我的要求是得到以下视图：

但是，我得到以下视图：

控制器：

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

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

        [HttpPost]
        public ActionResult CorporationRegistrationPg2(int selectedTab)
        {
            ViewBag.SelectedTab = selectedTab;
            return 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>

有人可以帮我解决这个问题吗？如果你想让我尝试一种全新的方式，我也准备好了。

【问题讨论】：

标签： jquery css asp.net-mvc model-view-controller

【解决方案1】：

在这里，您需要划开当前标签并复制下面的整个标记（css、js、html）。

我从使用display:inline 设置li 的样式开始，以便它们垂直显示。

在下面运行演示；

$(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>

【讨论】：

我能够水平放置标签。选项卡中的字段不可见。有什么我想念的吗？
@Harsha 你试过我上面的代码了吗？复制整个标记、样式、元素和脚本。从我的演示开始，然后将您的字段粘贴到那里。
我将我的代码和结果添加到 cmets。可以看看吗？？
嗨@Harsha，您应该将脚本代码放在脚本标签中。 <script>$(document).ready(function(){ ... })</script>
我能够可视化所需的字段。谢谢