.Net Core-将视图放入选项卡 [英] .Net Core - Putting views into a tabs

问题描述

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

I'm creating a web page using .Net Core and I have a pretty complex program as of now. I have two different models (Customer and User) with different properties and they each have a controller and a view.

我想将这两个视图/控制器放到一个选项卡视图中，以便在客户"选项卡下显示客户索引，在用户"选项卡下显示用户索引.我希望它类似于以下内容:

I want to put these two views/controllers together in a tab view, so that under the Customer tab the customer index is shown and under the User tab the user index is show. I want it to be similar to what the following generates:

<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中有可能吗?

Is this possible in .Net Core?

我知道如何使用局部视图，我一直认为这可能是这样，但是我不是如何使用局部视图的专家.我只是使用它们来重构显示模型详细信息页面的方式.但是，由于我已经实现了两个完整的控制器及其对应的视图，所以我想知道是否有更简单的方法?

I am aware of how to use partial views and I was thinking this might be the way, however I am not an expert on how to use these. I just used them to restructure the way the details page for my models were shown. However as I have already implemented two complete controllers and their corresponding views I was wondering if there is an easier way?

我可以创建一个viewModel(包含客户和用户列表)并用它来显示吗? (我在两个视图上都使用PaginatedList来排序和限制页面上显示的项目数量.)在下面的控制器中，我尝试从数据库中获取客户和用户，并将他们传递给viewModel，然后将其传递给View.这是可以在.Net Core中完成的方法吗? (问题可以在控制器的注释代码中找到.)

Could I create a viewModel (containing a list of customers and users) and use that to display either? (I am using a PaginatedList on both views to order and limit the amount of items shown on the pages.). In the controller below I try to get the customers and users from the DB and pass them to the viewModel which is then passed to the View. Is this how it can be done in .Net Core? (Problem can be found in commented code in controller).

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

有人知道如何解决吗?

推荐答案

在早期版本的ASP.NET MVC 中，您可以使用@Html.Action(请查看

In earlier versions of ASP.NET MVC you can use @Html.Action(take a look at How can I use Html.Action?). It loooks similar to @Html.Partial(...) but instead of just returning an PartialView through passing a model it executes the Action (and you just have to return the PartialView after the Action processing). This way you can segregate Customer and Users responsabilities.

但是，在ASP.NET Core中已被ViewComponents

However, in ASP.NET Core this feature has been replace by ViewComponents https://docs.asp.net/en/latest/mvc/views/view-components.html

如果您仍然想使用@Html.Action，则可以通过自己实施来实现，请访问

If you still want´s to use @Html.Action you can do it by implementing by yourself, take a look on how to do it at @Html.Action in Asp.Net Core (not the selected answer)

致谢.

这篇关于.Net Core-将视图放入选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！