.Net Core - 将视图放入选项卡中
[英] .Net Core - Putting views into a tabs
本文介绍了.Net Core - 将视图放入选项卡中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 .Net Core 创建一个网页，目前我有一个非常复杂的程序.我有两个具有不同属性的不同模型(客户和用户)，它们每个都有一个控制器和一个视图.
我想将这两个视图/控制器放在一个选项卡视图中，以便在 Customer 选项卡下显示客户索引，在 User 选项卡下显示用户索引.我希望它类似于以下生成的内容:
<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 role="演示文稿"><a href="#second" aria-controls="second" role="tab" data-toggle="tab">Second</a><div class="tab-content"><div role="tabpanel" class="tab-pane active" id="first">顾客
<div role="tabpanel" class="tab-pane" id="second">用户
这在 .Net Core 中可行吗?
编辑 1:
我知道如何使用部分视图，我认为这可能是方法，但是我不是如何使用这些的专家.我只是用它们来重组模型的详细信息页面的显示方式.但是，由于我已经实现了两个完整的控制器及其相应的视图，我想知道是否有更简单的方法?
我可以创建一个视图模型(包含客户和用户列表)并使用它来显示吗?(我在两个视图上都使用了 PaginatedList 来订购和限制页面上显示的项目数量.).在下面的控制器中，我尝试从数据库中获取客户和用户并将它们传递给 viewModel，然后传递给 View.这是如何在 .Net Core 中完成的?(问题可以在控制器的注释代码中找到).
型号
公共类 CustomerUserViewModel{公共分页列表<客户>客户{得到;放;}公共分页列表<用户>用户{得到;放;}//或者公共列表<客户>客户{得到;放;}公共列表<用户>用户{得到;放;}}
查看
@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">客户</a><li role="演示文稿"><a href="#second" aria-controls="second" role="tab" data-toggle="tab">用户</a><div class="tab-content"><div role="tabpanel" class="tab-pane active" id="first">@Html.Partial("~/Views/Customer/Index.cshtml", Model.Customers)
<div role="tabpanel" class="tab-pane" id="second">@Html.Partial("~/Views/User/Index.cshtml", Model.Users)
控制器
public IActionResult CustomerUserTabbing(){//我发现这两行实际上并没有返回任何东西//查看下面的新代码//var userlist = from u in _context.Users select u;//var customerlist = from c in _context.Customers select c;//新代码var users = _context.Users.Where(u => u.UserID != 0).OrderBy(u => u.First_Name).ToList();var 客户 = _context.Customers.Where(c => c.CustomerID != 0).OrderBy(c => c.Name).ToList();CustomerUserViewModel viewModel = new CustomerUserViewModel();viewModel.Customers = 客户；//这两行给出了错误viewModel.Users = 用户；//无法将 IQueryable 转换为 PaginatedList返回视图(视图模型)；}
有人知道如何解决这个问题吗?
解决方案
在早期版本的 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 你可以自己实现，看看如何做到的 @Html.Action in Asp.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>
Is this possible in .Net Core?
EDIT1:
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?
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).
Model
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; }
}
View
@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>
Controller
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);
}
Does anyone know how to solve this?
解决方案
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.
However, in ASP.NET Core this feature has been replace by ViewComponents https://docs.asp.net/en/latest/mvc/views/view-components.html
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)
Regards.
这篇关于.Net Core - 将视图放入选项卡中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
