Revamping Sign-out Design in AdminLTE with ASP.NET

For my dashboard, I am utilizing the fantastic AdminLTE. However, I am facing a small styling issue with the logout functionality as it needs to be a form in ASP.NET Core MVC.

Does anyone have any suggestions on how to use a normal anchor tag instead of the button around it? I attempted using asp-controller, but it did not log me out properly; instead, it redirected me to my home page.

The desired setup should resemble the link without the button effect around it.

Here is the code I am currently using:

<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
  <div class="dropdown-divider"></div>
   <a asp-action="Setup" asp-controller="Admin" asp-route-id="1" class="dropdown-item">
        <i class="fas fa-user mr-2"></i> Setups</a>
  
    <div class="dropdown-divider"></div>


    @if (User.Identity.IsAuthenticated) {
        <a href="#" class="dropdown-item">

    
            <form asp-controller="Account" asp-action="Logout" method="post" id="logoutForm">
                <i class="fas fa fa-sign-in-alt mr-2"></i>
                <button type="submit" class="nav-link">Sign out</button>
            </form>
            </a>
    } else {
        <a asp-area="Identity" asp-page="/Account/Login" class="dropdown-item dropdown-footer fa fa-sign-in-alt">Login</a>
        <a asp-area="Identity" asp-page="/Account/Register" class="dropdown-item dropdown-footer">Register</a>

    }

</div>

Here is the current appearance:

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

Answer №1

To make the form hidden, you can utilize JavaScript on the anchor tag to mimic the form submission process.

<form class="d-none" method="post" id="logoutForm
  asp-controller="Account" asp-action="Logout"">
</form>
<a href="javascript:document.getElementById('#logoutForm').submit()" 
  class="dropdown-item">
    <i class="fas fa fa-sign-in-alt mr-2"></i>
    Sign Out
</a>

Answer №2

My approach was actually a bit different in the implementation:

@if (User.Identity.IsAuthenticated) {
    <a href="#" class="dropdown-item">
        <form asp-controller="Account" asp-action="Logout" method="post" id="logoutForm">
            <i class="fas fa fa-sign-in-alt mr-2"></i>
            <button type="submit"  class="link">Sign out</button>
        </form>
    </a>
  } else {
    <a asp-area="Identity" asp-page="/Account/Login" class="dropdown-item dropdown-footer fa fa-sign-in-alt">Login</a>
    <a asp-area="Identity" asp-page="/Account/Register" class="dropdown-item dropdown-footer">Register</a>
 }
</div>

And for my CSS styling, I simply used the following code:

button.link {
 background: none !important;
 border: none;
 padding: 0 !important;
 /*optional*/
 font-family: arial, sans-serif;
 /*input has OS specific font-family*/
 color: black;
 text-decoration: none;
 cursor: pointer;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a visual representation by converting it into an HTML table

Check out my JSFiddle here: http://jsfiddle.net/0r16e802/4/ I'm attempting to display an image as an HTML table, but I'm facing two major issues with my algorithm: Only the first image is loaded in the first row and I need to figure out how to ...

Full-screen and auto-cropping capabilities are featured in the Bootstrap 4 carousel design

Is there a way to make full-width images in the bootstrap 4 carousel cropped based on position: center, background: cover to prevent scrolling issues? I attempted to follow advice from this webpage but encountered stretching and scroll-bar problems with d ...

Create a div that can grow in size without the need to set a specific height for it

Here is an example of my HTML code: <div id="wrapper" class='common'> <div id="left" class='common'>Menu I Menu II Menu III Menu IV</div> <div id="right" class='common'>hello world..hello world ...

Display the background-image of the <body> element only when the image has finished loading

I have a webpage where I want to delay showing a large image until it has finished downloading. Instead, I would like to display a background with a fading effect while the image loads. The challenge is that the background image must be set within the bod ...

Element positioning in Material UI is fluid and responsive across all devices, with the ability to place elements at

As a novice in layout design, I am currently developing a web application for both mobile and desktop using React and Material UI. My challenge lies in placing the app navigation at the bottom of the screen. The issue arises because the location of the app ...

Incorporating header and footer elements into the design

I am facing an issue while editing a layout. Currently, when clicking on some side of the layout, a header and footer appear in a certain way. However, I would like to change this so that the header and footer appear differently, similar to the example s ...

Tips for establishing a fixed point at which divs cease to shrink as the browser size decreases

There are numerous dynamically designed websites where divs or images shrink as the browser size decreases. A great example of this is http://en.wikipedia.org/wiki/Main_Page The div containing the text shrinks proportionally to the browser size until it ...

Having difficulty toggling a <div> element with jQuery

I am attempting to implement a button that toggles the visibility of a div containing replies to comments. My goal is to have the ability to hide and display the replies by clicking the button. The "show all replies" button should only appear if there are ...

Achieve center alignment for two column divs without altering the HTML code using only CSS

Recently, I stumbled upon a basic HTML code that I am unable to modify due to restrictions: <div id="container"> <div id="a"> Title col </div> <div id="b"> Left col </div> <div id="c"> ...

Consolidate radio group in Vuetify platform

I'm having trouble centering the v-radio-group. Here's my current setup: <v-container grid-list-md text-xs-center> <v-form ref="form"> <div v-if="question.question_type == 'YESNO' "> <v-radio-group ...

Align the bottom of an image with the top of text to achieve perfect vertical alignment

My goal is to arrange numerous images in a row, with text displayed below each image. Each block of text may consist of multiple lines and should be centered. While the heights of the images may vary, their widths will remain consistent. It is important th ...

Exploring ways to showcase informational alerts when a link is hovered over by the mouse

I am currently working on a website that showcases links utilized by my team. One specific requirement is that when a user hovers over a link, note information should be displayed. Although the simplest solution would be to not list the link if it's n ...

CSS DROP DOWN NAVIGATION MENU - Struggling to maintain hover effect on main menu item while navigating through sub-menu

I am facing a challenge with a CSS-only drop-down menu where the top main menu item loses its highlight when I move the cursor over the sub-menu items. You can view the menu in action here: . For example, if you hover over "Kids" and then move your cursor ...

Angular formarray radio buttons not toggling properly in the UI

I have a FormArray that iterates through several test steps. Next to each test step, I am trying to include a radio button group with PASS or FAIL options. When I choose a radio option, it works fine. However, when I select PASS or FAIL on a different row, ...

Printing specific div content from an HTML page using a print button

I have a situation where I need to control the printing functionality of my HTML page. Currently, I have two div tags in my code with a single print button at the top of the page. When I click on this button, it prints the content from both divs. However ...

Ways to verify an iCheck located on the following page

Here is the code snippet I am currently working with: $("#add-new-size-grp").click( function (event) { event.preventDefault(); $.ajax({ type: "get", url:"ajax-get-sizes.php", success: function(result){ $("#sizeg ...

What is the best way to allow a number to be editable when clicked on in a React application

Currently, I am trying to find a solution for making a number editable when clicked without having to use form inputs or other React libraries that don't fit my requirements. The provided screenshots showcase the desired interface. https://i.stack.im ...

Tips for activating hover effect on child components by hovering over the parent container?

At the moment, I am tackling an issue with CSS in a nextJS web application. The problem lies in a parent div element that contains multiple child elements. My goal is for hovering over the parent div to trigger changes on the child elements as well. Here& ...

What is the best way to create a smooth sliding effect using CSS?

Need help with creating a transition effect within a bordered div that reveals hidden content when a button is clicked? I'm looking to have the <a> tag displayed after clicking the button, with both the button and text sliding to the left. Here& ...

The inline feature of the Bootstrap input group addon is not being utilized

Check out my code snippet here: http://www.bootply.com/iR1SvOyEGH <form> <div class="form-group"> <label for="inputEmail">Company Name</label> <input type="text" class="form-control"> <span class="input-gro ...