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.

`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` - It will already visible in every page as it is in Layout view. Would you make it more clear what you are actually wanting? — TanvirArjel, Jun 18 '19 at 14:17
Possible duplicate of [Pass parameter to Partial View in ASP.NET Core](https://stackoverflow.com/questions/46100200/pass-parameter-to-partial-view-in-asp-net-core) — ste-fu, Jun 18 '19 at 14:26
@ste-fu This is not a duplicate of that question. I know how to pass parameters to partial views. That is not what this question is asking. The reason I mention partial views is because I know how to do that, and will use that if I can't get a parameter to the Layout, but I'd rather just send a parameter to the layout rather than make a partial for something I already have. — Mkalafut, Jun 18 '19 at 14:29
Have you tried the answer from there? Is not a layout page just another sort of View? — ste-fu, Jun 18 '19 at 14:30
@TanvirArjel Sorry if I wasn't clear. Creating a partial view to accomplish this would be a fallback strategy if I couldn't figure out how to get this to dynamically pass ID through the layout. The question is asking how to use the Layout to be able to store an ID to be sent to those links (where the actions for those links are in the controller but the actual links are in the Layout, where I don't have access to a model to fetch the ID). It seems Viewbag / ViewData or Tempdata may be my solution — Mkalafut, Jun 18 '19 at 14:30
@ste-fu I am trying it now, as it's also what Reyan Chougle answered below. Sometimes I swear the searching on this site doesn't even work because if I found that question it would have helped me get to my answer as well. — Mkalafut, Jun 18 '19 at 14:31
@Mkalafut I see your action link does not contain in `asp-route-id`. Please updated the question with this. Then I am giving you the solution. — TanvirArjel, Jun 18 '19 at 14:34
@TanvirArjel Correct. It previously didn't contain that. Until Reyan answered, I wasn't using Viewbag or ViewData to achieve this. — Mkalafut, Jun 18 '19 at 14:37

score 1 · Accepted Answer · edited Jun 18 '19 at 15:36

1

You will have to explicitly pass the id parameter to your anchor tag may be using ViewBag or TempData.

<a class="nav-link text-dark" asp-area="" asp-controller="Client" asp-action="Import" asp-route-id="@ViewBag.Id">Import</a>

More on ViewBag and TempData.

edited Jun 18 '19 at 15:36

Mkalafut

729
2
13
34

answered Jun 18 '19 at 14:11

Reyan Chougle

4,917
2
30
57

Aren't there such a thing as HTML actionlinks for ASP.NET views? (Something that looks among the lines of: `@Html.ActionLink("link text", "someaction", "somecontroller", new { id = "123" }, null)`, I thought you could simply pass your ID like this to your controller.) – Barrosy Jun 18 '19 at 14:17
2

@Barrosy If you are using Aspnet Core then it is recommended to use Tag Helpers which is one of a major feature of Aspnet Core – Reyan Chougle Jun 18 '19 at 14:18
1

Perfect solution. Accepted answer. – Mkalafut Jun 18 '19 at 14:52

score 0 · Answer 2 · answered Jun 18 '19 at 14:40

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>

How to pass a parameter to top navbar in ASP.NET Core Layout?

2 Answers2