(C# ASP.NET Core) Layout Pages and LoginPartial for Identity

It is a good idea to show the user name of a logged user in the header of each page of a website. And, if the user is not logged in, then the login and register buttons can be shown instead. The best way to implement it is to use partial views in combination with layout pages. This tutorial explains the steps for this.
(Rev. 31-Oct-2024)

Categories | About |     |  

Parveen,

Table of Contents (top down ↓)

Step 1 - Add a Partial View

First we have to add a partial view.

Open the solution explorer and right click the pages folder to add a folder called Shared. This is a special folder that must have the exact same spellings.

If you are following the course, then the source code is available in your downloads.

Next right click the folder to add a page called _LoginPartial.cshtml. Please recall that, by convention, the names of partial pages start with an underscore, and that they are named according to pascal convention where the name is in a camel notation that starts with an uppercase capital letter.

Let us open the file and examine the markup. 

// Pages -> Shared -> _LoginPartial.cshtml 
// watch the linked video for explanation 

@using Microsoft.AspNetCore.Identity

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

@inject SignInManager<IdentityUser> _sm

@inject UserManager<IdentityUser> _um

@if (_sm.IsSignedIn(User))
{
  <div>

    <span>Welcome @User.Identity?.Name</span>

  </div>
}
else
{
  <div>
    <a asp-area="auth" asp-page="Register">Register</a>
    |
    <a asp-area="auth" asp-page="Login"> Login </a>
  </div>
}

First we have the namespace and taghelper directives. These directives should be placed in a view imports file - but we haven't done that because we wanted to keep the tutorial focussed on this partial page.

Next, we have used the @inject directive for dependency injection of the SignInManager and UserManager services.

The IsSignedIn method of the SignInManager class has been used in an if statement. If the user is signed in, then the name is displayed. Otherwise the register and login buttons are displayed.

We haven't used any css or javascript because that can always be done in consultation with the web designer teams.

Video Explanation (see it happen!)

Please watch the following youtube video:

Step 2 - Add a Layout Page

Next let us add a layout page. Again open the solution explorer and right click the Shared folder and add a page called _Layout.cshtml. 

// Pages -> Shared -> _Layout.cshtml 

<!DOCTYPE html>

<html>

<head>

  <meta name="viewport" content="width=device-width" />

  <title>@ViewBag.Title</title>

</head>

<body>

  <header>

    @await Html.PartialAsync("_LoginPartial")

  </header>

  <div>

    @RenderBody()

  </div>

</body>

</html>

Open the layout file to examine its markup.

The page contains a simple html structure.

The partial page is rendered inside a header tag.

Open the solution explorer again and right click the Pages folder to add a file called _ViewStart.cshtml. As you can see, this file sets the Layout property. 


// Pages -> _ViewStart.cshtml 
@{
   Layout = "_Layout";
}

If you are new to the concept of master pages and layout files, please refer the Razor Pages chapter for more information.

Run the Project

Run the project to open the home page.

We verify that the login and register buttons appear, as per the requirements.

Click the login button to open the login page. Enter a registered email and do a login.

We verify that the user id of the logged in user is now shown instead of the register and login buttons.

In the next tutorial we shall add the signout functionality. Thanks!


This Blog Post/Article "(C# ASP.NET Core) Layout Pages and LoginPartial for Identity" by Parveen is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.