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
– TanvirArjel, Commented Jun 18, 2019 at 14:17
Possible duplicate of Pass parameter to Partial View in ASP.NET Core — ste-fu
– ste-fu, Commented Jun 18, 2019 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
– Mkalafut, Commented Jun 18, 2019 at 14:29
Have you tried the answer from there? Is not a layout page just another sort of View? — ste-fu
– ste-fu, Commented Jun 18, 2019 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
– Mkalafut, Commented Jun 18, 2019 at 14:30

Mkalafut · Accepted Answer · 2019-06-18 15:36:41Z

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>

3 Comments

Barrosy Over a year ago

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.)

Reyan Chougle Over a year ago

@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

Mkalafut Over a year ago

Perfect solution. Accepted answer.

TanvirArjel · Accepted Answer · 2019-06-18 14:40:34Z

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>

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related