2016-10-31 57 views
0

我使用.Net Core創建了一個網頁,而且我現在有一個非常複雜的程序。我有兩個不同的模型(客戶和用戶)具有不同的屬性,他們每個都有一個控制器和一個視圖。.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> 

Tab View

這是可能在.net中的核心?

EDIT1:

我知道如何使用部分的意見,我想這可能是這樣,但我不是如何使用這些專家。我只是用它們來重構我的模型的詳細信息頁面的顯示方式。但是,因爲我已經實施了兩個完整的控制器及其相應的視圖,我想知道是否有更簡單的方法?

我可以創建一個viewModel(包含客戶和用戶列表)並使用它來顯示? (我在兩個視圖上都使用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); 
} 

有誰知道如何解決這個問題?

回答

2

早期版本的ASP.NET MVC您可以使用@Html.Action(看看How can I use Html.Action?)。它和@Html.Partial(...)類似,但不是通過傳遞一個模型來返回一個PartialView,而是執行Action(並且你只需要在Action處理之後返回PartialView)。這樣您可以分離客戶和用戶的責任。

然而,在ASP.NET核心這個功能已經由ViewComponents https://docs.asp.net/en/latest/mvc/views/view-components.html

取代如果仍然want's使用@Html.Action你可以通過自己實現做,需要如何做一下它在@Html.Action in Asp.Net Core(不是選定的答案)

問候。

+0

這聽起來像我想要的東西,但是當我嘗試使用'@ Html.Action'的Visual Studio抱怨。我唯一可用的方法似乎是'@ Html.ActionLink' .. – Zeliax

+0

是的,你是對的。看起來'@ Html.Action'已經從.Net Core中移除,你應該使用[ViewComponents](https://docs.asp.net/en/latest/mvc/views/view-components.html) 。但是你可以實現你自己的'@ Html.Action' [看看這裏](http://stackoverflow.com/questions/26916664/html-action-in-asp-net-core) – dime2lo

+0

是的。我也對此非常感興趣,並且一旦閱讀了View Components的文檔,就會發布它。 View Components可能是我需要的,因爲這是他們現在計劃進行的工作,因此可能不是一個好主意:P – Zeliax

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> 

活性值在上視圖中的代碼由

@ { 串currentCntrlr =(字符串)ViewContext.RouteData.Values [ 「控制器」]中設置; string userName =(從User.Claims中的c開始,其中c.Type ==「name」選擇c.Value).FirstOrDefault(); string id =(從User.Claims中的c開始,其中c.Type ==「sub」選擇c.Value).FirstOrDefault(); }

所有這一切都是在_Layout.cshtml和@RenderBody來自各信息查看您的控制器

+0

你知道這是否可以在_Layout.cshtml之外完成嗎?什麼是你的'currentCntrlr'?這是一個班級還是一個模型? – Zeliax

+0

我已經將currentCntrlr的定義添加到上面的代碼示例中。這並不需要直接放在_Layout.cshtml中,但它是如何顯示在每個頁面請求上的,這就是我的流程的工作方式 - 標籤始終可見。你可以改變它以適應你的流程。 –

+0

這看起來像我想要的方法,但是我希望它只顯示2個頁面子集。假設我例如導航到某個頁面(稱爲tab頁面)。在這個頁面中,我想顯示一個用戶標籤和一個客戶標籤。在任何一個選項卡中,我想顯示連接到各自控制器的相應視圖。如何才能做到這一點?從我讀過的東西我需要使用「佈局」類型的頁面,但我一直沒有找到任何教程。 – Zeliax