如何在.Net Core 2.2剃须刀页面中执行级联SelectList

Question

我们有以下3个SelectList（下拉列表）-角色，俱乐部和主持人。如果Roles =“ Club Admin”，则将显示俱乐部选择列表，而Roles =“ Host Admin”，则将显示主机，而Roles都不显示，则这2个选择列表将不会出现。

关于如何执行此操作的任何想法？

环境：

• .Net Core 2.2

Create.cshtml：

@page
@model AthlosifyWebArchery.Pages.Administrators.Users.CreateModel
@{
  ViewData["Title"] = "Create";
}
<h2>Create</h2>
<h4>User</h4>
<hr />
<div class="row">
<div class="col-md-4">
    <form method="post">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <div class="form-group">
            <label asp-for="ApplicationUserVM.FirstName" class="control-label"></label>
            <input asp-for="ApplicationUserVM.FirstName" class="form-control" />
            <span asp-validation-for="ApplicationUserVM.FirstName" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="ApplicationUserVM.LastName" class="control-label"></label>
            <input asp-for="ApplicationUserVM.LastName" class="form-control" />
            <span asp-validation-for="ApplicationUserVM.LastName" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="ApplicationUserVM.Email" class="control-label"></label>
            <input asp-for="ApplicationUserVM.Email" class="form-control" />
            <span asp-validation-for="ApplicationUserVM.Email" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="ApplicationUserVM.Address" class="control-label"></label>
            <input asp-for="ApplicationUserVM.Address" class="form-control" />
            <span asp-validation-for="ApplicationUserVM.Address" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="ApplicationUserVM.Suburb" class="control-label"></label>
            <input asp-for="ApplicationUserVM.Suburb" class="form-control" />
            <span asp-validation-for="ApplicationUserVM.Suburb" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="ApplicationUserVM.State" class="control-label"></label>
            <input asp-for="ApplicationUserVM.State" class="form-control" />
            <span asp-validation-for="ApplicationUserVM.State" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="ApplicationUserVM.Postcode" class="control-label"></label>
            <input asp-for="ApplicationUserVM.Postcode" class="form-control" />
            <span asp-validation-for="ApplicationUserVM.Postcode" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="ApplicationUserVM.Country" class="control-label"></label>
            <input asp-for="ApplicationUserVM.Country" class="form-control" />
            <span asp-validation-for="ApplicationUserVM.Country" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="ApplicationUserVM.UserName" class="control-label"></label>
            <input asp-for="ApplicationUserVM.UserName" class="form-control" />
            <span asp-validation-for="ApplicationUserVM.UserName" class="text-danger"></span>
        </div>
        <div class="form-group">
            Role:
            <select asp-for="ApplicationUserVM.SelectedRoleId" onchange="this.form.submit()" class="form-control"
                    asp-items="@Model.RoleNameSL">
                <option value="">-- Select Role --</option>
            </select>
            <span asp-validation-for="ApplicationUserVM.SelectedRoleId" class="text-danger"></span>
        </div>
            <div class="form-group">
                Club:
                <select asp-for="ApplicationUserVM.SelectedClubID" class="form-control"
                        asp-items="@Model.ClubNameSL">
                    <option value="">-- Select Club --</option>
                </select>
                <span asp-validation-for="ApplicationUserVM.SelectedClubID" class="text-danger"></span>
            </div>
            <div class="form-group">
                Host:
                <select asp-for="ApplicationUserVM.SelectedHostID" class="form-control"
                        asp-items="@Model.HostNameSL">
                    <option value="">-- Select Host --</option>
                </select>
                <span asp-validation-for="ApplicationUserVM.SelectedHostID" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
    </form>
</div>
</div>
<div>
   <a asp-page="Index">Back to List</a>
</div>
@section Scripts {
   @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

Create.cshtml.cs：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.Mvc.Rendering;
using AthlosifyWebArchery.Data;
using AthlosifyWebArchery.Models;
using Microsoft.AspNetCore.Identity;

namespace AthlosifyWebArchery.Pages.Administrators.Users
{
public class CreateModel : UserViewPageModel
{
    private readonly AthlosifyWebArchery.Data.ApplicationDbContext _context;
    private readonly UserManager<ApplicationUser> _userManager;
    private readonly ApplicationUser _applicationUser;

    private string USER_DEFAULT_PASSWORD = "P@$$w0rd";

    public CreateModel(AthlosifyWebArchery.Data.ApplicationDbContext context,
                        UserManager<ApplicationUser> userManger)
    {
        _context = context;
        _userManager = userManger;
    }

    public class ApplicationUserViewModel<ApplicationUser>
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Email { get; set; }
        public string Address { get; set; }
        public string Suburb { get; set; }
        public string State { get; set; }
        public string Postcode { get; set; }
        public string Country { get; set; }
        public string UserName { get; set; }
        public string SelectedRoleId { get; set; }
        public string SelectedClubID { get; set; }

        public string SelectedHostID { get; set; }
        public byte[] RowVersion { get; set; }
    }

    public IActionResult OnGet()
    {
        PopulateRolesDropDownList(_context);

        PopulateClubsDropDownList(_context);
        PopulateHostsDropDownList(_context);


        return Page();
    }

    [BindProperty]
    public ApplicationUserViewModel<ApplicationUser> ApplicationUserVM { get; set; }

    public async Task<IActionResult> OnPostAsync()
    { 
        if (!ModelState.IsValid)
            return Page();

        //_context.User.Add(User);

        var user = new ApplicationUser
        {
            FirstName = ApplicationUserVM.FirstName,
            LastName = ApplicationUserVM.LastName,
            Address = ApplicationUserVM.Address,
            State = ApplicationUserVM.State,
            Postcode = ApplicationUserVM.Postcode,
            Country = ApplicationUserVM.Country,
            UserName = ApplicationUserVM.UserName,
            Email = ApplicationUserVM.UserName
        };

        var role = _context.Roles.Where(w => w.Id == ApplicationUserVM.SelectedRoleId).FirstOrDefault();

        IEnumerable<string> selectedRoles = new List<string>() { role.Name };

        var adminresult = await _userManager.CreateAsync(user, USER_DEFAULT_PASSWORD);

        if (adminresult.Succeeded)
        {
            if (selectedRoles != null)
            {

                var result = await _userManager.AddToRolesAsync(user, selectedRoles);
                if (!result.Succeeded)
                {
                    return Page();
                }
            }
        }

        return RedirectToPage("./Index");
    }
}

}

UserViewPageModel.cshtml.cs：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using AthlosifyWebArchery.Data;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.Mvc.Rendering;

namespace AthlosifyWebArchery.Pages.Administrators.Users
{
    public class UserViewPageModel : PageModel
    {

        public SelectList ClubNameSL { get; set; }

        public SelectList HostNameSL { get; set; }

        public SelectList RoleNameSL { get; set; }

        public void PopulateRolesDropDownList(ApplicationDbContext _context,
            object selectedRole = null)
        {
            var rolesQuery = from d in _context.Roles
                             orderby d.Name // Sort by name.
                             select d;

            RoleNameSL = new SelectList(rolesQuery,
                        "Id", "Name", selectedRole);
        }

        public void PopulateClubsDropDownList(ApplicationDbContext _context,
           object selectedClub = null)
        {
            var clubsQuery = from d in _context.Club
                             orderby d.Name // Sort by name.
                             select d;

            ClubNameSL = new SelectList(clubsQuery,
                        "ClubID", "Name", selectedClub);
        }

        public void PopulateHostsDropDownList(ApplicationDbContext _context,
           object selectedHost = null)
        {
            var hostsQuery = from d in _context.Host
                             orderby d.Name // Sort by name.
                             select d;

            HostNameSL = new SelectList(hostsQuery,
                        "HostID", "Name", selectedHost);
        }

    }
}

Answer 1

抱歉，我的朋友迟到了。首先，您需要隐藏“俱乐部”和“主持人”选择列表。然后，在“角色”选择列表的onchange事件中显示和隐藏“俱乐部和主持人”选择列表。这是一个样本。希望对大家有帮助，新年快乐：））

<h2>Create</h2>
<h4>User</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form method="post">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>            
            <div class="form-group">
                <label asp-for="ApplicationUserVM.UserName" class="control-label"></label>
                <input asp-for="ApplicationUserVM.UserName" class="form-control" />
                <span asp-validation-for="ApplicationUserVM.UserName" class="text-danger"></span>
            </div>
            <div class="form-group">
                Role:
                <select asp-for="ApplicationUserVM.SelectedRoleId"  class="form-control"
                        asp-items="@Model.RoleNameSL">
                    <option value="">-- Select Role --</option>
                </select>
                <span asp-validation-for="ApplicationUserVM.SelectedRoleId" class="text-danger"></span>
            </div>
            <div class="form-group" id="divClub" style="display: none;" >
                Club:
                <select asp-for="ApplicationUserVM.SelectedClubID" class="form-control"
                        asp-items="@Model.ClubNameSL">
                    <option value="">-- Select Club --</option>
                </select>
                <span asp-validation-for="ApplicationUserVM.SelectedClubID" class="text-danger"></span>
            </div>
            <div class="form-group" id="divHost" style="display: none;">
                Host:
                <select asp-for="ApplicationUserVM.SelectedHostID" class="form-control"
                        asp-items="@Model.HostNameSL">
                    <option value="">-- Select Host --</option>
                </select>
                <span asp-validation-for="ApplicationUserVM.SelectedHostID" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </form>
    </div>
</div>

@section Scripts
    {
    <script>
        $(function () {
            $('#ApplicationUserVM_SelectedRoleId').on('change', function () {
                let role = $(this).find(":selected").text();
                if (role === 'Club Admin') {
                    $('#divClub').show();
                    $('#divHost').hide();
                } else if (role === 'Host Admin') {
                    $('#divHost').show();
                    $('#divClub').hide();
                } else {
                    $('#divClub').hide();
                    $('#divHost').hide();
                }                                   
            });            
        });
    </script>
}