MVC 5：jQuery 嵌套选项卡无法正确显示

Posted 2023-05-09

【中文标题】MVC 5：jQuery 嵌套选项卡无法正确显示

【英文标题】：MVC 5: jQuery nested tabs are not displaying properly

【发布时间】：2018-08-27 15:05:18

【问题描述】：

注意：我是 jQuery 和标签的新手。

我正在尝试在 MVC 5 Web 应用程序中使用 jQuery 选项卡实现嵌套选项卡。出于某种原因，实现无法正常工作，我认为存在基于网站行为的错误，我怀疑它与活动选项卡的设置方式有关。

当用户登录时，他们会被带到MainAppTabs 的页面。顶部的两个选项卡是Client 和Account。 Client 标签有嵌套标签Client Info、Billing Selections 和About，而Account 标签目前只有一个嵌套标签Account，它应该只显示一个帐户列表。

在下面的当前实现中，帐户选项卡是第一个显示的选项卡，与 Client 选项卡相反，还有嵌套的 Account 选项卡。当我单击Client 选项卡时，它的嵌套选项卡将正常显示。但是，当我再次单击 Account 选项卡时，页面会清除，我必须刷新页面 (F5) 才能显示 Account 选项卡及其嵌套选项卡。此外，嵌套选项卡似乎显示了两次，它向右偏移并具有重复的边框，但嵌套选项卡边框和数据溢出到父选项卡边框之外。

<div id="MainAppTabs">
    <ul>
        <li>@html.ActionLink("Client", "ClientTabs", "ClientSetup")</li>
        <li>@Html.ActionLink("Account", "AccountTabs", "AccountSetup")</li>
    </ul>
</div>

<script>
    $(function () 
        $("#MainAppTabs").tabs( active: 1 );
    );
</script>

客户端标签：

<div id="ClientSetupTabs">
    <ul>
        <li>@Html.ActionLink("Client Info", "Edit", "ClientSetup")</li>
        <li>@Html.ActionLink("Billing Selections", "BillingSelections", "ClientSetup")</li>     
    </ul>
</div>

<script>
    $(function ()
    
        $("#ClientSetupTabs").tabs( active: 1 );
    );
</script>

帐户标签：

<div id="AccountSetupTabs">
    <ul>
        <li class="active">@Html.ActionLink("Accounts", "Index", "AccountSetup")</li>
    </ul>
</div>

<script>
    $(function ()
    
        $("#AccountSetupTabs").tabs( active: 1 );
    );
</script>

【问题讨论】：

这不是为标签定义 html 的正常方式。通常，您有一个带有<li><a href="#xx">Client</a></li> 的链接，然后是一个<div id="xx">@Html.Partial(...)</div>（或@Html.Action(...)）作为内容的占位符。

a 元素的 href 属性和 div 的 id 必须相等才能正确显示标签。

@Stephen，仅嵌套选项卡或所有选项卡都需要部分视图吗？您是否有任何关于该主题的示例或文档可供我阅读？

@Monkey，我不确定我理解你的意思。你能提供一个代码示例吗？是否可以使用 Razor Views 引擎执行此操作？

请参阅this fiddle，了解您需要设置的查看方式。只需用@Html.Partial() 或@Html.Action() 替换“...的内容”即可呈现内容。

【参考方案1】：

这似乎是嵌套选项卡的问题，可能是因为进行 ajax 调用的方式以及您的部分中的脚本（脚本不应在部分中）。为此，您可以为每个选项卡的内容提供占位符元素，并让链接使用id 属性引用这些元素。

html 是

<div id="main"> // main (parent) tabs
  <ul>
    <li><a href="#client">Client</a></li>
    <li><a href="#account">Account</a></li>
  </ul>
  <div id="client"> // client tabs
    <ul>
      <li><a href="#client-info">Client Info</a></li>
      <li><a href="#billing-selections">Billing Selections</a></li>
    </ul>
    <div id="client-info">
      // content for client information
    </div>
    <div id="billing-selections">
      // content for billing selections
    </div>
  </div>
  <div id="account"> // account tabs
    <ul>
      <li><a href="#accounts">Accounts</a></li>
    </ul>
    <div id="accounts">
      // content for accounts
    </div>
  </div>
</div>

并初始化选项卡

$('#main').tabs( ... ); // set options as required
$('#client').tabs( ... );
$('#account').tabs( ... );

要显示内容，如果视图中的模型包含需要生成部分的数据，请使用@Html.Partial()，如果要调用返回部分的服务器方法，请使用@Html.Action()。例如，如果ClientSetupController 的Edit() 方法返回部分视图以显示在您的Client Info 选项卡中，那么

<div id="client-info">
    @ Html.RenderAction("Edit", "ClientSetup");  // or @Html.Action("Edit", "ClientSetup")
</div>

控制器方法在哪里

[ChildActionOnly]
public PartialViewResult Edit

    var model = ... // initialize you model for the view
    return PartialView("_Edit", model);

而_Edit.cshtml 是一个局部视图，包含你想在标签中显示的html

【讨论】：

您想要什么选项 :) - 例如， active: 1 根据您最初问题中的代码，但您还可以设置其他选项（请参阅 docs）。

@Html.Action() 和 @ Html.RenderAction(); 生成相同的输出。请参阅 this answer 了解它们的工作原理

我已经用一个方法应该是什么样子的例子更新了答案（重点是你应该返回一个部分视图，而不是一个视图（并防止用户通过地址栏，你应该添加[ChildActionOnly]属性

这取决于。如果您使用Html.RenderPartial，它不会调用服务器方法。它只是将主视图中的模型传递给局部并渲染它。在这种情况下，用法为Html.RenderPartial("_Edit");，其中部分为_Edit.cshtml。或者您可以使用Html.RenderPartial("_Edit", Model.SomeProperty); 将模型的特定属性传递给视图，或使用Html.RenderPartial("_Edit", new SomeModel()); 将模型的新实例传递给部分

但我怀疑这不是你想要的。如果您想调用服务器方法以便可以初始化特定模型并在部分中使用它，那么您需要RenderAction()，正如我在答案中指出的那样