There appears to be an issue with the LogOff function in the NavBar within the MVC5

Question

There appears to be an issue with the LogOff function in the NavBar within the MVC5

I've encountered an issue while implementing a Bootwatch template with my MVC 5 project. Specifically, my NavBar Menu seems to be malfunctioning.

1.- My "LogOff" button isn't working as expected. When calling the script in my _LoginPartial, it doesn't execute and the button remains non-responsive.

Below is my _LoginPartial.cshtml:

//code snippet here

Here is my _Layout.cshtml:

//code snippet here

My AccountController.cs:

//code snippet here

2.- Additionally, I've noticed a discrepancy in the color of my NavBar. The elements on the right side have a different color compared to those on the left side. When inspecting my console, I found that changing the color of one element affects others unintentionally.

Is there a way to specifically target the NavBar element for color modification?

https://i.sstatic.net/Hna1d.png

This is my second time working with MVC 5 and my first time implementing a template. Any insights on what might be causing these issues?

html css asp.net-mvc bootstrap-4 navbar

Answer 1

Answer №1

ASP.NET is unable to render nested forms. Only the parent form will be rendered, so to include a form in a partial page:

replace

<form class="form-inline my-2 my-lg-0">
@Html.Partial("My_LoginPartial")
</form>

with

@using Microsoft.AspNet.Identity

    @if (Request.IsAuthenticated)
        {


            using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right form-inline my-2 my-lg-0" }))
            {
            @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()">Log off</a></li>
            </ul>
            }
        }
        else
        {
        <form class ="form-inline my-2 my-lg-0"
            <ul class="nav navbar-nav navbar-right">
                <li>@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
            </ul>
        </form>
        }

Answer 2

ASP.NET is unable to render nested forms. Only the parent form will be rendered, so to include a form in a partial page:

replace

<form class="form-inline my-2 my-lg-0">
@Html.Partial("My_LoginPartial")
</form>

with

@using Microsoft.AspNet.Identity

    @if (Request.IsAuthenticated)
        {


            using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right form-inline my-2 my-lg-0" }))
            {
            @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()">Log off</a></li>
            </ul>
            }
        }
        else
        {
        <form class ="form-inline my-2 my-lg-0"
            <ul class="nav navbar-nav navbar-right">
                <li>@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
            </ul>
        </form>
        }

There appears to be an issue with the LogOff function in the NavBar within the MVC5

Answer №1

Similar questions

The jQuery toggle functionality seems to be malfunctioning

Insert a triangle shape at the bottom of the material design tab with the class mat-ink-bar

Using plain JavaScript (without any additional libraries like jQuery), you can eliminate a class from an element

What is the best way to implement individual fade-ins for each image in my project?

Load link dynamically using the rel attribute

What causes scope to be undefined in Angular?

Is there a problem with the Drag and Drop API?

When I hover over the navigation bar, a submenu pops up. However, as I try to navigate to the submenu, I often end up accidentally selecting a different item on the navigation bar

Display the dropdown selection

Issue with uppercase letters within a text input field

How can I ensure my card div is responsive in Bootstrap?

Issues are arising with CSS .not(selector) functionality when applied to a span element

Having trouble aligning my slider in the center

Initial Blazor Navbar Display Issue

Is Firefox the only browser where the webpage is displayed off-center?

Save mathematical equations written in HTML text boxes to a MySQL database

Steps to shorten HTML content while maintaining consistent column width

Display information retrieved from database query in HTML

Displaying incorrect text format on a TextView using Html.fromHtml()

Tips on utilizing jquery slideDown alongside appendTo