CSHARP

asp net bootstrap 5 navigation bar

//If your bootstrap navbar breaks in ASP.NET when updating to bootstrap 5.

//So I first exported my navbar into a partial view and modified the code as follows
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        @Html.ActionLink( "Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" } )
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    @Html.ActionLink( "Home", "Index", "Home", null, new { @class = "nav-link" } )
                </li>
                
                <li class="nav-item">
                    @Html.ActionLink( "About", "About", "Home", null, new { @class = "nav-link" } )
                </li>
                
                <li class="nav-item">
                    @Html.ActionLink( "Contact", "Contact", "Home", null, new { @class = "nav-link" } )
                </li>
            </ul>
           
            //these are the register and login links, I have individual user atuh enabled
            @Html.Partial( "_LoginPartial" )
        </div>
    </div>
</nav>


//If you have the register and login buttons on the navbar,
//Then navigate to ~/views/shared/_LoginPartial.cshtml and modify the code:
@using Microsoft.AspNet.Identity
@if ( Request.IsAuthenticated )
{
    using ( Html.BeginForm( "LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right nav-link" } ) )
    {
        @Html.AntiForgeryToken()

        <ul class="nav navbar-nav navbar-right">
            <li>
                @Html.ActionLink( "Hello " + User.Identity.GetUserName() + "!", "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Manage" } )
            </li>
            <li><a href="javascript:document.getElementById('logoutForm').submit()" class="nav-link">Log off</a></li>
        </ul>
    }
}
else
{
    <ul class="nav navbar-nav navbar-right">
        <li class="nav-item">
            @Html.ActionLink( "Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink", @class = "nav-link" } )
        </li>
        <li class="nav-item">
            @Html.ActionLink( "Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink", @class = "nav-link" } )
        </li>
    </ul>
}


//Now, call the navbar partial view in the _Layout.cshtml. Otherwise you can just replace
//the navbar in layout.cshtml with the first batch of code above.

//-------------------------------------------------------------------------------

//Sometimes after the BS5 update, when running your app you'll get an error on the bootstrap script section in _Layout.cshtml.
//To fix this, in ~/App_Start/BundleConfig.cs, locate this code.

bundles.Add( new ScriptBundle( "~/bundles/bootstrap" ).Include(
                      "~/Scripts/bootstrap.js" ) );

//Modify it so it looks like this (change new ScriptBundle to new Bundle):

bundles.Add( new Bundle( "~/bundles/bootstrap" ).Include(
                      "~/Scripts/bootstrap.js" ) );


//Hope this helps!