C# .Net Core-将视图放入选项卡中

我正在使用.NETCore创建一个网页，目前我有一个相当复杂的程序。我有两个不同的模型（客户和用户），它们具有不同的属性，每个模型都有一个控制器和一个视图

我想将这两个视图/控制器放在一个选项卡视图中，以便在Customer选项卡下显示Customer索引，在User选项卡下显示User索引。我希望它与以下生成的内容类似：

<div>
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active">
            <a href="#first" aria-controls="first" role="tab" data-toggle="tab">First</a>
        </li>
        <li role="presentation">
            <a href="#second" aria-controls="second" role="tab" data-toggle="tab">Second</a>
        </li>
    </ul>

    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="first">
            Customer
        </div>
        <div role="tabpanel" class="tab-pane" id="second">
            User
        </div>
    </div>
</div>

---

有人知道如何解决这个问题吗？

在ASP.NET MVC的早期版本中，您可以使用

@Html.Action

（查看）。它看起来类似于

@Html.Partial（…）

，但是它不是通过传递一个模型来返回PartialView，而是执行动作（并且在动作处理之后您只需要返回PartialView）。通过这种方式，您可以分离客户和用户的责任

但是，在ASP.NET核心中此功能已被ViewComponents取代

如果您仍然想使用

@Html.Action

您可以自己实现，请查看如何使用（而不是选择的答案）

---

问候。

多年来，我一直在MVC中使用标签。下面提供的示例有9个选项卡。每个都有自己的控制器

@{ 
    string currentCntrlr = (string)ViewContext.RouteData.Values["controller"]; }

<nav class="container">
    <ul id="tabbedMenu">
        @if (string.IsNullOrEmpty(id)) {
            <li class="@(currentCntrlr == "Home" ? "active" : "")">@Html.ActionLink("Cover Page", "Index", "Home")</li>
        } else {
            <li class="@(currentCntrlr == "Home" ? "active" : "")">@Html.ActionLink("Cover Page", "Index2", "Home")</li>
        }
        <li class="@(currentCntrlr == "JournalIndex" ? "active" : "")">@Html.ActionLink("Index", "Index", "JournalIndex")</li>
        <li class="@(currentCntrlr == "JournalFuture" ? "active" : "")">@Html.ActionLink("Future Log", "Index", "JournalFuture")</li>
        <li class="@(currentCntrlr == "JournalMonthly" ? "active" : "")">@Html.ActionLink("Monthly Log", "Index", "JournalMonthly")</li>
        <li class="@(currentCntrlr == "JournalDaily" ? "active" : "")">@Html.ActionLink("Daily Log", "Index", "JournalDaily")</li>
        <li class="@(currentCntrlr == "JournalUser" ? "active" : "")">@Html.ActionLink("User Page", "Index", "JournalUser")</li>
        <li class="@(currentCntrlr == "JournalCalendar" ? "active" : "")">@Html.ActionLink("Calendar", "Index", "JournalCalendar")</li>
        <li class="@(currentCntrlr == "Search" ? "active" : "")">@Html.ActionLink("Search", "Index", "Search")</li>
        <li class="@(currentCntrlr == "Export" ? "active" : "")">@Html.ActionLink("Export", "Index", "Export")</li>
    </ul>
</nav>
<div class="container body-content">
    @RenderBody()
    <hr />
    <footer>
        <span class="pull-left">&copy; 2016 - LynxJournal (@ViewBag.Application)</span><span class="pull-right"><a asp-controller="Home" asp-action="Contact" title="LynxJournal Support">LynxJournal Support</a></span>
    </footer>
</div>

---

所有这些都在_Layout.cshtml中，@RenderBody来自控制器的每个视图

这听起来像是我想要的，但是当我尝试使用

@Html时。Action

Visual Studio抱怨道。我唯一可用的方法似乎是

@Html.ActionLink

。是的，你说得对。似乎

@Html.Action

已从.NETCore中删除，您应该改为使用。但是，您可以实现自己的

@Html.Action

是的。我也在这个问题上苦苦思索，一旦我阅读了视图组件的文档，我将尝试一下。可能视图组件正是我所需要的，因为这正是他们目前计划使用的组件，所以考虑到以下两个因素，这可能不是一个坏主意：对答案进行修改，以便同时考虑ASP.NET MVC（

@Html.Action（…）

）和ASP.NET核心（ViewComponents）。您知道这是否可以在_Layout.cshtml之外完成吗？您当前的

是什么？这是一个类还是一个模型？我已经在上面的代码示例中添加了currentCntrlr的定义。这不需要直接出现在_Layout.cshtml中，但这就是它在每个页面请求上的显示方式，这就是我的流程的工作方式-选项卡始终可见。你可以改变它来适应你的流程。这似乎是我想要的方法，但是我希望它只显示页面的2个子集。比如说，我导航到某个页面（称为tab页面）。在这个页面中，我想显示一个用户选项卡和一个客户选项卡。在任一选项卡中，我想显示连接到各自控制器的各自视图。如何做到这一点？从我所读到的内容来看，我需要使用“布局”类型的页面，但我找不到任何关于该页面的教程。@Zeliax如果您只想显示2个选项卡，那么您只需要2行，而不是我上面的8行。然后，您需要为每个视图创建一个控制器。然后，您可能需要控制器中每个命令的视图。中显示了一种更简单的方法
@model CustomerUserViewModel

<h2>CustomerUserTabbing</h2>
<div>
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active">
            <a href="#first" aria-controls="first" role="tab" data-toggle="tab">Customer</a>
        </li>
        <li role="presentation">
            <a href="#second" aria-controls="second" role="tab" data-toggle="tab">User</a>
        </li>
    </ul>

    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="first">
            @Html.Partial("~/Views/Customer/Index.cshtml", Model.Customers)
        </div>
        <div role="tabpanel" class="tab-pane" id="second">
            @Html.Partial("~/Views/User/Index.cshtml", Model.Users)
        </div>
    </div>
</div>

public IActionResult CustomerUserTabbing()
{
    //I found that these two lines don't actually return anything
    //See new code below this
    //var userlist = from u in _context.Users select u;
    //var customerlist = from c in _context.Customers select c;

    //New Code
    var users = _context.Users
       .Where(u => u.UserID != 0)
       .OrderBy(u => u.First_Name)
       .ToList();
    var customers = _context.Customers
       .Where(c => c.CustomerID != 0)
       .OrderBy(c => c.Name)
       .ToList();

    CustomerUserViewModel viewModel = new CustomerUserViewModel();
    viewModel.Customers = customers; //these two lines gives errors
    viewModel.Users = users; //cannot convert IQueryable to PaginatedList

    return View(viewModel);
}

@{ 
    string currentCntrlr = (string)ViewContext.RouteData.Values["controller"]; }

<nav class="container">
    <ul id="tabbedMenu">
        @if (string.IsNullOrEmpty(id)) {
            <li class="@(currentCntrlr == "Home" ? "active" : "")">@Html.ActionLink("Cover Page", "Index", "Home")</li>
        } else {
            <li class="@(currentCntrlr == "Home" ? "active" : "")">@Html.ActionLink("Cover Page", "Index2", "Home")</li>
        }
        <li class="@(currentCntrlr == "JournalIndex" ? "active" : "")">@Html.ActionLink("Index", "Index", "JournalIndex")</li>
        <li class="@(currentCntrlr == "JournalFuture" ? "active" : "")">@Html.ActionLink("Future Log", "Index", "JournalFuture")</li>
        <li class="@(currentCntrlr == "JournalMonthly" ? "active" : "")">@Html.ActionLink("Monthly Log", "Index", "JournalMonthly")</li>
        <li class="@(currentCntrlr == "JournalDaily" ? "active" : "")">@Html.ActionLink("Daily Log", "Index", "JournalDaily")</li>
        <li class="@(currentCntrlr == "JournalUser" ? "active" : "")">@Html.ActionLink("User Page", "Index", "JournalUser")</li>
        <li class="@(currentCntrlr == "JournalCalendar" ? "active" : "")">@Html.ActionLink("Calendar", "Index", "JournalCalendar")</li>
        <li class="@(currentCntrlr == "Search" ? "active" : "")">@Html.ActionLink("Search", "Index", "Search")</li>
        <li class="@(currentCntrlr == "Export" ? "active" : "")">@Html.ActionLink("Export", "Index", "Export")</li>
    </ul>
</nav>
<div class="container body-content">
    @RenderBody()
    <hr />
    <footer>
        <span class="pull-left">&copy; 2016 - LynxJournal (@ViewBag.Application)</span><span class="pull-right"><a asp-controller="Home" asp-action="Contact" title="LynxJournal Support">LynxJournal Support</a></span>
    </footer>
</div>

@{
    string currentCntrlr = (string)ViewContext.RouteData.Values["controller"];
    string userName = (from c in User.Claims where c.Type == "name" select c.Value).FirstOrDefault();
    string id = (from c in User.Claims where c.Type == "sub" select c.Value).FirstOrDefault();
}