How to improve the role management in Blazor Server?

Question

How to improve the role management in Blazor Server?

Cenk 1,036

Hi,

I am working on a Blazor Server application. I am using identity management. I have 2 issues to get help.

In my application, I have these roles:

string[] roles = new string[] { "Administrators", "User", "Accountant", "Warehouse", "Test" };

There is a user management section in my application, that lists all the users and their roles. If the admin edits a user, this modal popup below opens with the selected user's details. In this screenshot, this user's role is User. (dropdown)

Ekran görüntüsü 2024-01-13 140643

Here is how popup displays

async Task EditUser(IdentityUser _IdentityUser)
{
    // Set the selected user
    // as the current user
    objUser = _IdentityUser;

    // Get the user
    var user = await _UserManager.FindByIdAsync(objUser.Id);
    if (user != null)
    {
    // Is user in administrator role?
    var UserResult =
        await _UserManager
        .IsInRoleAsync(user, ADMINISTRATION_ROLE);

        CurrentUserRole = UserResult ? ADMINISTRATION_ROLE : "User";
    }

	// Open the Popup
	ShowPopup = true;

}

<div class="modal" tabindex="-1" style="display: block" role="dialog">

        <div class="modal-dialog">

            <div class="modal-content">

                <div class="modal-header">

                    <h3 class="modal-title">User Details</h3>

                    <!-- Button to close the popup -->

                    <button type="button" class="close"
                    @onclick="ClosePopup">

                        <span aria-hidden="true">X</span>

                    </button>

                </div>

                <!-- Edit form for the current user -->

                <div class="modal-body">

                    <!-- Only show Id if not a new user -->
                    @if (objUser.Id != "")

                    {
                        <p>@objUser.Id</p>
                    }

                    <!-- Only allow edit if a new user -->
                    @if (objUser.Id != "")

                    {
                        <p>@objUser.UserName</p>
                    }

                    else

                    {
                        <input class="form-control" type="text"
                   placeholder="UserName"
                   @bind="objUser.UserName" style="margin-bottom: 10px"/>
                    }

                    <input class="form-control" type="text"
                   placeholder="Email"
                   @bind="objUser.Email" style="margin-bottom: 10px"/>

                    <input class="form-control" type="password"
                   placeholder="Password"
                   @bind="objUser.PasswordHash" style="margin-bottom: 10px"/>

                    <select class="form-control"
                    @bind="@CurrentUserRole" style="margin-bottom: 10px">

                        @foreach (var option in Options)

                        {
                            <option value="@option">

                                @option

                            </option>
                        }

                    </select>

                    <br /><br />

                    <!-- Button to save the user -->

                    <button class="btn btn-primary"
                    @onclick="SaveUser" style="margin-right: 10px">

                        Save

                    </button>

                    <!-- Only show delete button if not a new record -->
                    @if (objUser.Id != "")

                    {
                        <!-- Button to delete the forecast -->

                        <button class="btn btn-danger"
                    @onclick="DeleteUser">

                            Delete

                        </button>
                    }

                    <br />

                    <span style="color: red">@strError</span>

                </div>

            </div>

        </div>

    </div>
}

How can I set the CurrentUserRole (dropdown) so that it does not set only the User role? I want the user's role to be selected on the dropdown.
After updating a user's role through the modal popup in my application, that user's role is updated in the modal, but not in the [AspNetUserRoles] table in the database. How can I ensure that the table is updated correctly when a user's role is changed through the modal?

Here is the database records. All users seem to have a User role, but in the modal, it looks OK.

asp.net_roles

aspnet_user_roles

Anonymous

2024-01-15T08:06:39.6066667+00:00

Hi @Cenk, for your first question, it works fine to make the option selected by setting different value of CurrentUserRole. Do I misunderstand your requirement? For the second question, how do you update the user with new role? Could you pls share enough code? Besides, what's the version of your target framework?

1 answer

Your answer

Anonymous

2024-01-15T08:06:39.6066667+00:00

Hi @Cenk, for your first question, it works fine to make the option selected by setting different value of CurrentUserRole. Do I misunderstand your requirement? For the second question, how do you update the user with new role? Could you pls share enough code? Besides, what's the version of your target framework?

Answer 1

AgaveJoe 30,126

It is not clear how your modal works and there are other unknowns in the code.
A modal is HTML that is shown or hidden. With that in mind I created the following working example. The component shows a list of users with a button that selects the user. Selecting a user shows the use below the line (<hr />) and selects the user's role from the InputSelect. If the user is not in a role then "--Select--" is displayed. Select a role and click the Update User Role button to assign the role. Click the "Select User" button to see what role the user is in. Keep in mind, this is demo code to convey a concept it is not production ready code.
The code also assumes you have the RoleManager configured in Program.cs.

builder.Services.AddDefaultIdentity<IdentityUser>(options => options.SignIn.RequireConfirmedAccount = true)
    .AddRoles<IdentityRole>()
    .AddEntityFrameworkStores<ApplicationDbContext>();

Sample

@page "/useradmin/userrolemanager"
@using Microsoft.AspNetCore.Identity;
<h3>User Role Manager</h3>

<div>
    <table class="table">
        <thead>
            <tr>
                <th>Id</th>
                <th>Username</th>
                <th>Email</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach (var user in users)
            {
                <tr>
                    <td>@user.Id</td>
                    <td>@user.UserName</td>
                    <td>@user.Email</td>
                    <td><button @onclick="() => SelectUser(user.Id)">Select User</button></td>
                </tr>
            }
        </tbody>
    </table>
</div>
<hr />
<div>
    <div>
        @selectedUser
    </div>
    <div>
        <InputSelect @bind-Value="userRole">
            <option value>--select--</option>
            @foreach(var role in roles)
            {
                <option value="@role.Name">
                    @role.Name
                </option>
            }
        </InputSelect>
    </div>
    <div>
        <button @onclick="() => UpdateUserRole()">Update User Role</button>
    </div>
</div>

@code {
    [Inject]
    public RoleManager<IdentityRole> roleManager { get; set; }
    [Inject]
    public UserManager<IdentityUser> userManager { get; set; }

    private List<IdentityRole> roles = new List<IdentityRole>();
    private List<IdentityUser> users = new List<IdentityUser>();
    private string selectedUser { get; set; } = "Select a user";
    private string userRole { get; set; }

    protected override async Task OnInitializedAsync()
    {
        roles = roleManager.Roles.ToList();
        users = userManager.Users.ToList();
    }

    private async Task SelectUser(string id)
    {
        var user = await userManager.FindByIdAsync(id);
        selectedUser = user.UserName;
        userRole = (await userManager.GetRolesAsync(user)).FirstOrDefault() ?? "";
    }

    private async Task UpdateUserRole()
    {
        var user = await userManager.FindByNameAsync(selectedUser);
        var uRole = (await userManager.GetRolesAsync(user)).FirstOrDefault();
        if (uRole != null)
        {
            await userManager.RemoveFromRoleAsync(user, uRole);
        }
        await userManager.AddToRoleAsync(user, userRole);
    }
}

Cenk 1,036 Reputation points

2024-01-14T05:25:56.12+00:00

Thank you @AgaveJoe , I will try and let you know. By the way, any working examples for creating roles and assigning users to those roles?

AgaveJoe 30,126

By the way, any working examples for creating roles and assigning users to those roles?

The code above assigns roles to users. Use the RoleManager to create roles.

@page "/useradmin/rolemanager"
@using Microsoft.AspNetCore.Identity;

<h3>Role Managerrazor</h3>
<div>
    <table class="table">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>NormalizedName</th>
                <th>ConcurrencyStamp</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var role in roles)
            {
                <tr>
                    <td>@role.Id</td>
                    <td>@role.Name</td>
                    <td>@role.NormalizedName</td>
                    <td>@role.ConcurrencyStamp</td>
                </tr>
            }
        </tbody>
    </table>
</div>
<hr />
<div>

    <div>
        <label>
            Role:
            <InputText @bind-Value="RoleName" />
        </label>
    </div>
    <div>
        <button @onclick="() => AddRole()">Add Role</button>
    </div>

</div>

@code {
    [Inject]
    public RoleManager<IdentityRole> roleManager { get; set; }
    public string RoleName { get; set; }
    private List<IdentityRole> roles = new List<IdentityRole>();


    protected override async Task OnInitializedAsync()
    {
        roles = roleManager.Roles.ToList();
    }

    private async Task AddRole()
    {
        await roleManager.CreateAsync(new IdentityRole(RoleName));
        roles = roleManager.Roles.ToList();
        RoleName = string.Empty;

    }
}

Cenk 1,036

I am getting this error for your first example @AgaveJoe

 Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer[100]
      Unhandled exception rendering component: Microsoft.AspNetCore.Components.Forms.InputSelect`1[System.String] requires a cascading parameter of type EditContext. For example, you can use Microsoft.AspNetCore.Components.Forms.InputSelect`1[[System.String, System.Private.CoreLib, Version=6.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]] inside an EditForm.
      System.InvalidOperationException: Microsoft.AspNetCore.Components.Forms.InputSelect`1[System.String] requires a cascading parameter of type EditContext. For example, you can use Microsoft.AspNetCore.Components.Forms.InputSelect`1[[System.String, System.Private.CoreLib, Version=6.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]] inside an EditForm.
         at Microsoft.AspNetCore.Components.Forms.InputBase`1.SetParametersAsync(ParameterView parameters)
         at Microsoft.AspNetCore.Components.Rendering.ComponentState.SupplyCombinedParameters(ParameterView directAndCascadingParameters)
fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
      Unhandled exception in circuit 'mfc7IwnDo6qSE-yOTipmepqyjYpnFlR1kapcEqTgFtk'.
      System.InvalidOperationException: Microsoft.AspNetCore.Components.Forms.InputSelect`1[System.String] requires a cascading parameter of type EditContext. For example, you can use Microsoft.AspNetCore.Components.Forms.InputSelect`1[[System.String, System.Private.CoreLib, Version=6.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]] inside an EditForm.
         at Microsoft.AspNetCore.Components.Forms.InputBase`1.SetParametersAsync(ParameterView parameters)
         at Microsoft.AspNetCore.Components.Rendering.ComponentState.SupplyCombinedParameters(ParameterView directAndCascadingParameters)

AgaveJoe 30,126 Reputation points

2024-02-01T13:51:02.0633333+00:00

I am getting this error for your first example

No. The error is not coming from my example.
The error message is telling you there is a problem with the EditForm design. We can't see this part of your code and can only guess what mistake you're making. I recommend reading the official documentation learn how cascading parameters work in Blazor ASP.NET Core Blazor cascading values and parameters If you still need help then post a new question and be sure to add all the relevant code.

Cenk 1,036

Adding EditForm to InputSelect solved my problem.

<EditForm Model="this">
    <InputSelect @bind-Value="userRole">
        <option value>--select--</option>
        @foreach (var role in roles)
        {
            <option value="@role.Name">
                @role.Name
            </option>
        }
    </InputSelect>
</EditForm>

Cenk 1,036 Reputation points

2024-02-01T16:05:33.0266667+00:00

@AgaveJoe How can I match users and their roles so that I can display UserName and Role?
AgaveJoe 30,126 Reputation points

2024-02-01T16:58:34.2666667+00:00

How can I match users and their roles so that I can display UserName and Role?

I answered this question with a working example. The problem you are facing is working with the EditForm and cascading parameters. At least that's what the error message indicates. Please read the linked documentation and try to debug your code. you might also find these docs helpful. https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/?view=aspnetcore-8.0 https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/input-components?view=aspnetcore-8.0 https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/binding?view=aspnetcore-8.0 If you need the community to debug your code then provide sample code the community can run that reproduces the error.

Share via

How to improve the role management in Blazor Server?

1 answer

Your answer