How to list all the Users in a Blazor Webassembly hosted application with Identity? - Asp.net

LilanMihiranga
December 30, 2021
208 views
0 votes
2 Answers

I’m new to asp.net and Blazor Webassembly projects.

I created a Blazor Webassembly hosted project with identity. This has 3 main parts client, server, and shared. Currently I’m trying to get a list of all the registered users from the identity database which has been already created by default.

I created a razor component to view the users but failed to get the model class since it is in the server project. I also tried to move the ApplicationUser model class from the server to shared and installed the Identity NuGet package in shared but it resulted in an error(not supported by design).

Is there a sensible approach to list all the users available in the asp identity users, preserving the mvc model?

Thanks in advance.

Answers

Chosen as BEST ANSWER

Thanks, John for your detailed answer.

I'll post the solution which worked for me.

Inside App.Shared
User.cs

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace App.Shared
{
    public class User
    {
        public string Id { get; set; }
        public string UserName { get; set; }
        public string Email { get; set; }
    }
}

Inside App.Server/Models folder
ApplicationUser.cs

using Microsoft.AspNetCore.Identity;
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations.Schema;

namespace App.Server.Models
{
    public class ApplicationUser : IdentityUser
    {

    }
}

Inside App.Server/Controllers folder
UsersController.cs

using Microsoft.AspNetCore.Identity;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using App.Server.Data;
using App.Server.Models;
using App.Shared;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace App.Server.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class UsersController : Controller
    {
        private readonly UserManager<ApplicationUser> _userManager;

        public UsersController(UserManager<ApplicationUser> userManager)
        {
            _userManager = userManager;
        }

        // GET: api/Users
        [HttpGet]
        public ActionResult<IEnumerable<ApplicationUser>> Get()
        {
            var users = _userManager.Users.ToList();
            return users;

        }

    }
}

Razor View Component

@page "/users"
    
@inject HttpClient Http
@inject NavigationManager Navigation

<h1>Users</h1>

<div>
        <table class="table">
            <thead>
                <tr>
                    <th>UserName</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                @for (var i = 0; i < Users.Count; i++)
                {
                    <tr>
                        <td>@Users[i].UserName</td>
                        <td>@Users[i].Email</td>
                    </tr>                
                  }
            </tbody>
        </table>
    }
</div>

@code {
    private List<User> Users = new List<User>();

    protected override async Task OnInitializedAsync()
    {
        try
        {
            Users = await Http.GetFromJsonAsync<List<User>>("api/Users");

        }
        catch (AccessTokenNotAvailableException exception)
        {
            exception.Redirect();
        }
        catch (Exception e)
        {
            Console.Write(e);
        }

    }
}

Final Output

(Edit)

@Lilan… I have working code that displays a page listing Identity-Users (data). For our TM_PWA VS-2022 SOLUTION: .Net CORE-6, Blazor App-hosted-PWA:

In the Blazor-Client-project, NavMenu.razor

    <div class="nav-item px-3">
       <NavLink class="nav-link" href="identity/account/UserList">
          <span class="oi oi-list-rich" aria-hidden="true"></span> Identity User List 
       </NavLink>
    </div>

This code is in the Blazor-SERVER project.

HTML: UserList.cshtml in Areas/Identity/Pages/Account-folder

@page
@model UserListModel 
@{
   ViewData["Title"] = "User List";
 }

<h3>@ViewData["Title"]</h3>

<div class="row">
   <div class="col-md-12">
      @if (Model.UsersList != null) {
         <table class="table-md table-bordered col-1 w-100">
            <thead>
               <tr class="d-table-row my-0">
                  <td colspan="8"><span class="text-center font-bold" style="font-size: 14pt;">Identity User List</span></td>
               </tr>

               <tr class="text-center font-weight-bold">
                  <td class="text-center w-25">Id</td>
                  <td class="text-center">UserName</td>
                  <td class="text-center">Email Address</td>
                  <td class="text-center">EmailConfirmed</td>
                  <td class="text-center">PhoneNumber</td>
                  <td class="text-center">LockoutEnd</td>
                  <td class="text-center">LockoutEnabled</td>
                  <td class="text-center">AccessFailedCount</td>
               </tr>
            </thead>
            <tbody>
               @foreach (var userRec in (Model.UsersList)) {
                  <tr class="d-table-row my-0">
                     <td colspan="1" class="text-left" style="width: 30em;">@userRec.Id</td>
                     <td colspan="1" class="text-left">@userRec.UserName</td>
                     <td colspan="1" class="text-left">@userRec.Email</td>
                     <td colspan="1" class="text-center">@userRec.EmailConfirmed</td>
                     <td colspan="1" class="text-left">@userRec.PhoneNumber</td>
                     <td colspan="1" class="text-left">@userRec.LockoutEnd</td>
                     <td colspan="1" class="text-center">@userRec.LockoutEnabled</td>
                     <td colspan="1" class="text-center">@userRec.AccessFailedCount</td>
                  </tr>
               }
            </tbody>
         </table>
      }
   </div>
</div>


@section Scripts {
<partial name="_ValidationScriptsPartial" />
}

C# : UserList.cshtml.cs in Areas/Identity/Pages/Account-folder

// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
#nullable disable

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Text.Encodings.Web;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Identity;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using TM_PWA.Server.Models;

namespace TM_PWA.Server.Areas.Identity.Pages.Account {
   public class UserListModel : PageModel {
      private readonly UserManager<ApplicationUser> _userManager;
      private readonly SignInManager<ApplicationUser> _signInManager;

      public UserListModel(
            UserManager<ApplicationUser> userManager,
            SignInManager<ApplicationUser> signInManager
         ) {
         _userManager = userManager;
         _signInManager = signInManager;
      }

      // Public properties ///////////////////////////////////////////////
      public List<ApplicationUser> UsersList { get; set; }

      // Functions ///////////////////////////////////////////////////////
      public IActionResult OnGet() {
         IQueryable<ApplicationUser> users = _userManager.Users;
         if (users == null) {
            return NotFound("Unable to load Identity users.");
         }

         UsersList= ((IQueryable<ApplicationUser>)users).ToList();
         return Page();
      }
   }
}

Please signup or login to give your own answer.

Click here to cancel reply.

How to list all the Users in a Blazor Webassembly hosted application with Identity? – Asp.net

Answers