Creating manage user roles page - razor pages-CodePudding

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 >
        <div >
            <h2>Manage User Roles</h2>
        </div>
        <div >
            @for (int i = 0; i < Model.Count; i  )
            {
                <div >
                    <input type="hidden" asp-for="@Model[i].RoleId" />
                    <input type="hidden" asp-for="@Model[i].RoleName" />
                    <input asp-for="@Model[i].IsSelected"  />
                    <label  asp-for="@Model[i].IsSelected">
                        @Model[i].RoleName
                    </label>
                </div>
            }
            <div asp-validation-summary="All" ></div>
        </div>
        <div >
            <input type="submit" value="Update" 
                   style="width:auto" />
            <a asp-action="EditUser" asp-route-id="@userId"
                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?

CodePudding user response：

Your Page shold be like below:

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

@{
    var userId = ViewBag.userId;
}

<form method="post">
    <div >
        <div >
            <h2>Manage User Roles</h2>
        </div>
        <div >
            @for (int i = 0; i < Model.model.Count; i  )
            {
                <div >
                    <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"  />
                    <label  asp-for="@Model.model[i].IsSelected">
                        @Model.model[i].RoleName
                    </label>
                </div>
            }
            <div asp-validation-summary="All" ></div>
        </div>
        <div >
            <input type="submit" value="Update" 
                   style="width:auto" />
            <a asp-page="EditUser" asp-route-id="@userId"
                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();
}