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?
