How to pass a parameter to top navbar in ASP.NET Core Layout?
Question
Inside of my Views/Shared/_Layout.cshtml , the following navbar is in the <body> :
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-controller="Client" asp-action="ClientList">Client List</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Client" asp-action="Import">Import</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Client" asp-action="Processing">Processing</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Client" asp-action="PostProcessing">Post Processing</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
As you can see I have 4 views: ClientList, Import, Processing and PostProcessing. Inside each of those views I have buttons to navigate to the next or previous view (it's a sequential process for the most part) and as such the controller actions take in the Client's ID.
When I'm in, say, the PostProcessing view and attempt to view the Import view by clicking the navbar item, I get an exception because no ID is passed.
As a fallback I was considering just taking the top navbar out of the layout and making it a Partial View or View Component and rendering that on every page but as that seems counter-intuitive while having a layout, I'm wondering if there's a way to be able to just use my existing _Layout and also use the ID of the current view to be sent when I click the link.
2 answers
solution1
1 ACCPTED 2019-06-18 14:11:26
solution2
0 2019-06-18 14:40:34
Your _NavbarPartial view should be as follows where each action link tag helper contain a asp-route-id="@Model" attribute.
@model int // <-- Must contain this
<a class="navbar-brand" asp-area="" asp-controller="Client" asp-action="ClientList" asp-route-id="@Model">Client List</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Client" asp-action="Import" asp-route-id="@Model">Import</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Client" asp-action="Processing" asp-route-id="@Model">Processing</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Client" asp-action="PostProcessing" asp-route-id="@Model">Post Processing</a>
</li>
</ul>
</div>
Then in the _Layout should be as follows:
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<partial name="_NavbarPartial" model="1" /> // <-- Pass your id value as model
</div>
</nav>
</header>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.