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

时间:2016-10-31 11:35:27

标签: c# asp.net asp.net-mvc razor .net-core

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

我想将这两个视图/控制器放在一个标签视图中,以便在Customer选项卡下显示客户索引,并在User选项卡下显示用户索引。我希望它与以下内容类似:

@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>

Tab View

这可能在.Net Core中吗?

EDIT1:

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

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

模型

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

查看

{{1}}

控制器

{{1}}

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

2 个答案:

答案 0 :(得分:3)

早期版本的ASP.NET MVC 中,您可以使用@Html.Action(请查看How can I use 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(而不是选定的答案)进行操作

问候。

答案 1 :(得分:1)

我一直在使用标签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>

活动值在视图中的代码中设置

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

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