创建管理用户角色页面 - razor 页面

Question

I am following a tutorial on how to create a Manage user roles page for each identity user. The only problem I have is that the tutorial is for MVC and I am using razor pages not MVC.

I am trying to convert the following code so that it works on my razor pages, I've managed to do some but other parts is proving difficult.

Here is the code that would go in the Controller if i were using MVC:

[HttpGet]
public async Task<IActionResult> ManageUserRoles(string userId)
{
    ViewBag.userId = userId;

    var user = await userManager.FindByIdAsync(userId);

    if (user == null)
    {
        ViewBag.ErrorMessage = $"User with Id = {userId} cannot be found";
        return View("NotFound");
    }

    var model = new List<UserRolesViewModel>();

    foreach (var role in roleManager.Roles)
    {
        var userRolesViewModel = new UserRolesViewModel
        {
            RoleId = role.Id,
            RoleName = role.Name
        };

        if (await userManager.IsInRoleAsync(user, role.Name))
        {
            userRolesViewModel.IsSelected = true;
        }
        else
        {
            userRolesViewModel.IsSelected = false;
        }

        model.Add(userRolesViewModel);
    }

    return View(model);
}

I have convert it to the following and put it in the OnGet section of my page model.

[BindProperty]
public RolesViewModel RolesViewModel { get; set; }
public List<RolesViewModel> model { get; set; }

 public async Task<IActionResult> OnGetAsync(string userId)
        {
            var user = await UserManager.FindByIdAsync(userId);
            if (user == null)
            {
                return NotFound();
            }
            foreach (var role in roleManager.Roles)
            {
                RolesViewModel = new RolesViewModel
                {
                    RoleId = role.Id,
                    RoleName = role.Name
                };

                if (await UserManager.IsInRoleAsync(user, role.Name))
                {
                    RolesViewModel.IsSelected = true;
                }
                else
                {
                    RolesViewModel.IsSelected = false;
                }
                model.Add(RolesViewModel);

            }
            ViewData["model"] = model;
            return Page();
        }

The part thats proving difficult is the html:

This is their html from the tutorial.

@model List<UserRolesViewModel>

@{
    var userId = ViewBag.userId;
}

<form method="post">
    <div class="card">
        <div class="card-header">
            <h2>Manage User Roles</h2>
        </div>
        <div class="card-body">
            @for (int i = 0; i < Model.Count; i++)
            {
                <div class="form-check m-1">
                    <input type="hidden" asp-for="@Model[i].RoleId" />
                    <input type="hidden" asp-for="@Model[i].RoleName" />
                    <input asp-for="@Model[i].IsSelected" class="form-check-input" />
                    <label class="form-check-label" asp-for="@Model[i].IsSelected">
                        @Model[i].RoleName
                    </label>
                </div>
            }
            <div asp-validation-summary="All" class="text-danger"></div>
        </div>
        <div class="card-footer">
            <input type="submit" value="Update" class="btn btn-primary"
                   style="width:auto" />
            <a asp-action="EditUser" asp-route-id="@userId"
               class="btn btn-primary" style="width:auto">Cancel</a>
        </div>
    </div>
</form>

Could someone let me know what parts o the code I need to change for it to work for me?

Answer 1

Your Page shold be like below:

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

@{
    var userId = ViewBag.userId;
}

<form method="post">
    <div class="card">
        <div class="card-header">
            <h2>Manage User Roles</h2>
        </div>
        <div class="card-body">
            @for (int i = 0; i < Model.model.Count; i++)
            {
                <div class="form-check m-1">
                    <input type="hidden" asp-for="@Model.model[i].RoleId" />
                    <input type="hidden" asp-for="@Model.model[i].RoleName" />
                    <input asp-for="@Model.model[i].IsSelected" class="form-check-input" />
                    <label class="form-check-label" asp-for="@Model.model[i].IsSelected">
                        @Model.model[i].RoleName
                    </label>
                </div>
            }
            <div asp-validation-summary="All" class="text-danger"></div>
        </div>
        <div class="card-footer">
            <input type="submit" value="Update" class="btn btn-primary"
                   style="width:auto" />
            <a asp-page="EditUser" asp-route-id="@userId"
               class="btn btn-primary" style="width:auto">Cancel</a>
        </div>
    </div>
</form>

Also, you backend code need modify like below:

[BindProperty]
public RolesViewModel RolesViewModel { get; set; }
public List<RolesViewModel> model { get; set; }

public async Task<IActionResult> OnGetAsync(string userId)
{
    model = new List<RolesViewModel>(); //add this...
    var user = await UserManager.FindByIdAsync(userId);
    if (user == null)
    {
        return NotFound();
    }
    foreach (var role in roleManager.Roles)
    {
        RolesViewModel = new RolesViewModel
        {
            RoleId = role.Id,
            RoleName = role.Name
        };

        if (await UserManager.IsInRoleAsync(user, role.Name))
        {
            RolesViewModel.IsSelected = true;
        }
        else
        {
            RolesViewModel.IsSelected = false;
        }
        model.Add(RolesViewModel);

    }
    ViewData["userId"] = userId;   //change here which matches the frontend `ViewBag.userId`
    return Page();
}