2016-10-31 3 views
0

.Net Core를 사용하여 웹 페이지를 만들고 있는데 지금은 꽤 복잡한 프로그램이 있습니다. 나는 서로 다른 속성을 가진 두 개의 서로 다른 모델 (고객과 사용자)을 가지고 있으며 각각 컨트롤러와 뷰를 가지고있다..Net Core -보기를 탭에 넣기

이 두보기/컨트롤러를 탭보기에 함께 넣어 고객 탭 아래에 고객 인덱스가 표시되고 사용자 탭 아래에 사용자 인덱스가 표시되도록하려고합니다. 나는 다음 생성 것과 유사 할 것을 권장합니다

<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

닷넷 핵심이 가능합니까?

EDIT1 :

내가 그러나 나는이를 사용하는 방법에 대한 전문가가 아니다, 부분 뷰를 사용하는 나는이 방법이있을 수있다 생각하는 방법을 알고있다. 나는 모델의 세부 정보 페이지가 표시되는 방식을 재구성하는 데 사용했습니다. 그러나 이미 두 개의 완전한 컨트롤러와 해당 뷰를 구현 했으므로 더 쉬운 방법이 있는지 궁금해하고 있었습니까?

viewModel (고객 및 사용자 목록 포함)을 만들어 그 중 하나를 표시 할 수 있습니까? (두보기에서 PaginatedList를 사용하여 페이지에 표시된 항목의 수를 제한하고 제한합니다.) 아래 컨트롤러에서 DB에서 고객과 사용자를 가져 와서 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); 
} 

사람이이 문제를 해결하는 방법을 알고 있나요? ASP.NET MVC의 이전 버전의

답변

2

당신은 (How can I use Html.Action? 살펴 보도록) @Html.Action를 사용할 수 있습니다. 그것은 @Html.Partial(...)과 유사하지만, PartialView를 반환하는 대신 모델을 전달하는 대신 Action을 실행합니다 (그리고 Action 처리 후에 PartialView 만 반환하면됩니다). 이렇게하면 고객 및 사용자 책임을 분리 할 수 ​​있습니다.

그러나 ASP.NET 코어이 기능을 사용하면 아직도 당신이 직접 구현하여 그것을 할 수 @Html.Action를 사용하는 want's 경우 ViewComponents https://docs.asp.net/en/latest/mvc/views/view-components.html

에 의해 대체되었습니다, 수행하는 방법에 대해 살펴 그것에서 @Html.Action in Asp.Net Core (선택한 대답이 아닌)

감사합니다.

+0

각보기에서 온다, 그러나 나는'@ Html.Action' 비주얼 스튜디오를 사용하려고하면 불평. 내가 사용할 수있는 유일한 방법은'@ 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 구성 요소는 필자가 필요로하는 것일 수 있습니다. 그 이유는 그들이 지금 계획하고있는 것입니다. P – Zeliax

1

저는 MVC에서 수년간 탭을 사용해 왔습니다. 아래 제공된 예제에는 9 개의 탭이 있습니다.활성 값

{ 문자열 currentCntrlr = (문자열) ViewContext.RouteData.Values ​​[ "제어기"] @

하여보기 코드에 설정된다

@{ 
    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 userName = (User.Claims의 c에서 c.Type == "name"을 선택하면 c.Value 선택) .FirstOrDefault(); 문자열 id = (User.Claims의 c에서 c.Type == "sub"는 c.Value를 선택합니다.) .FirstOrDefault(); }

이 모든이 _Layout.cshtml에 있으며 @RenderBody이 컨트롤러 이것은 내가 원하는 같은 소리

+0

이것이 _Layout.cshtml 외부에서 수행 될 수 있는지 알고 있습니까? 그리고'currentCntrlr'은 무엇입니까? 그것은 클래스인가 모델인가? – Zeliax

+0

위의 코드 샘플에 currentCntrlr의 정의를 추가했습니다. 이것은 _Layout.cshtml에 직접있을 필요는 없지만, 그것이 모든 페이지 요청에 표시되는 방식입니다. 이는 내 흐름이 작동하는 방식이며 탭은 항상 표시됩니다. 흐름을 스위트로 변경할 수 있습니다. –

+0

이것은 내가 원하는 접근법처럼 보이지만, 페이지의 하위 집합 만 보여주고 싶습니다. 예를 들어 특정 페이지 (탭 페이지라고 함)로 이동한다고 가정 해 보겠습니다. 이 페이지에서는 사용자 탭과 고객 탭을 보여줍니다. 어느 쪽의 탭에서도 각각의보기가 각각의 컨트롤러에 연결된 것을 보여주고 싶습니다. 어떻게 할 수 있습니까? 내가 읽은 것에서는 "레이아웃"유형의 페이지를 사용해야하지만 이에 대한 자습서를 찾을 수 없었습니다. – Zeliax

관련 문제