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

Question

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

我想将这两个视图/控制器放在一个选项卡视图中，以便在 Customer 选项卡下显示客户索引，在 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>

这在 .Net Core 中可能吗？

编辑1：

我知道如何使用部分视图，我认为这可能是方法，但是我不是如何使用这些的专家。我只是用它们来重组模型的详细信息页面的显示方式。但是，由于我已经实现了两个完整的控制器及其相应的视图，我想知道是否有更简单的方法？

我可以创建一个视图模型（包含客户和用户列表）并使用它来显示吗？（我在两个视图上都使用了 PaginatedList 来订购和限制页面上显示的项目数量。）。在下面的控制器中，我尝试从数据库中获取客户和用户，并将它们传递给 viewModel，然后传递给 View。这是如何在 .Net Core 中完成的？（问题可以在控制器的注释代码中找到）。

模型

public class CustomerUserViewModel
{
    public PaginatedList<Customer> Customers { get; set; }
    public PaginatedList<User> Users { get; set; }

    //OR

    public List<Customer> Customers { get; set; }
    public List<User> Users { get; set; }
}

看法

@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);
}

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

Answer 1

在ASP.NET MVC 的早期版本中，您可以使用@Html.Action（查看如何使用 Html.Action？）。它看起来类似于@Html.Partial(...)但不只是通过传递模型返回 PartialView，它执行 Action（并且您只需要在 Action 处理后返回 PartialView）。通过这种方式，您可以分离客户和用户的责任。

但是，在 ASP.NET Core 中，此功能已被 ViewComponents 取代https://docs.asp.net/en/latest/mvc/views/view-components.html

如果您仍然想要使用，@Html.Action您可以通过自己实现来完成，请查看如何在 Asp.Net Core中的@Html.Action 中执行此操作（不是选定的答案）

问候。