如何使用预定义的选择列表在 razor 页面中创建级联下拉列表？

Question

我知道这个问题在这里被问了很多，但大多数问题都是基于 MVC 并使用我不太熟悉的接口和控制器。其他的处理 JSON，我不确定我需要什么。

我的最终目标是让下拉列表根据第一个列表中的选择显示特定的选择列表。我很快发现没有简单的方法来更改选择中的“asp-items”标签。

在尝试了一天多的帖子后，我最终感到非常困惑。

数据库也已成功播种，并且在单个下拉列表中测试时选择列表确实会填充。所以我知道它不是那部分。

我试过的： 我尝试使用 jQuery、常规 JavaScript 和 ajax 从其他帖子中实现多个不同的答案。我什至还尝试用列表预先填充 3 个不同的下拉菜单，并根据第一个选择显示和隐藏它们。我无法让它工作，并且还在另一篇文章中发现这样做会导致值仍然被选中，即使它不可见。这个问题很快就耗尽了我的理智，它看起来很微不足道，但我似乎无法理解。我也不完全理解 jQuery 或 ajax，所以这对我也没有太大帮助。

我已经尝试了几乎所有我发现的版本，但我最近的尝试看起来像这样：

Index.cshtml.cs

public class IndexModel : PageModel
{
    private readonly ILogger<IndexModel> _logger;
    private readonly Food2UContext _context;

    //First dropdowns options
    public static IEnumerable<SelectListItem> userTypeOptions() {
        return new[]
        {
            new SelectListItem {Text = "Customer", Value = "Shoppers"},
            new SelectListItem {Text = "Delivery Driver", Value = "DeliverPerson"},
            new SelectListItem {Text = "Restaurant", Value = "LocalRestaurants"},
        };
    } 

    //list to stores db object queries
    public List<Shoppers> shopper {get; set;} = default!;
    public List<DeliveryPerson> deliveryPeople {get; set;} = default!;
    public List<LocalRestaurants> restaurants {get; set;} = default!;

    //select lists to store each object type
    public SelectList shopperList {get; set;} = default!;
    public SelectList deliveryDriverList {get; set;} = default!;
    public SelectList restaurantList {get; set;} = default!;

    //select list to store the select list type chosen
    public SelectList displayedDropDown {get; set;} = default!;


    //called to grab select list depending on the first value selected
    public IActionResult OnGetFetchUserNames(string userType)
    {
        switch (userType)
        {
            case "Shoppers":
                displayedDropDown = shopperList;
                break;
            case "DeliverPerson":
                displayedDropDown = deliveryDriverList;
                break;
            case "LocalRestaurants":
                displayedDropDown = restaurantList;
                break;
        }
        
        //Tried json here because i saw another post successfully use it. 
        return new JsonResult(displayedDropDown);
    }

    public IndexModel(ILogger<IndexModel> logger, Food2UContext context)
    {
        _logger = logger;
        _context = context; //grab db context
    }

    //attempt to populate dropdowns and objects when page loads
    public void OnGet()
    {
        shopper = _context.Shoppers.ToList();
        deliveryPeople = _context.DeliverPerson.ToList();
        restaurants = _context.LocalRestaurants.ToList();

        shopperList = new SelectList(shopper, "shopperID", "Name");
        deliveryDriverList = new SelectList(deliveryPeople, "driverID", "Name");
        restaurantList = new SelectList(restaurants, "restaurantID", "Name");
    }
}

Index.cshtml

<form method="post">
        <div class="form-group w-25 mx-auto">
            <select id="userTypeDropDown" asp-items="IndexModel.userTypeOptions()" class="form-control">
                <option value="">-- Select User Type --</option>
            </select>
        </div>

        <div class="form-group w-25 mx-auto">
            <select id="userNameDropdown" name="users" asp-items="null" class="form-control">
                <option value="">-- Select Name --</option>
            </select>
        </div>
        
        <div class="form-group mt-3 text-center">
            <input type="submit" value="Continue" class="btn btn-secondary">
        </div>
    </form>

</div>

@*attempt to use ajax with the ongetfetch method from index.cshtml.cs*@
@section scripts{ 
<script>
    $("#userTypeDropDown").on("change", function () {
        var userType = $(this).val();
        $.ajax({
            method: 'get',
            url: '/Index?handler=FetchUserNames',
            data: {userType: userType },
            success: function (res) {
                $("#userNameDropdown").empty();
                var htmlString = "";
                $.each(res, function (k, v) {
                    htmlString += "<option value='" + v.val + "'>" + v.val + "</option>";
                });
                $("#userNameDropdown").append(htmlString);
            }

        })
    })
</script>
}

Answer 1

首先，我们应该在

shopper

中加上

shopperList

和

public IndexModel(ILogger<IndexModel> logger, Food2UContext context)

，这样我们调用

OnGetFetchUserNames

的时候就可以再次得到值。此外，请注意更改

new SelectListItem {Text = "Customer", Value = "Shoppers"}

进入：

 new SelectListItem {Text = "Shoppers", Value = "Shoppers"},

尝试像这样更改代码：

public class IndexModel : PageModel
    {
        private readonly ILogger<IndexModel> _logger;
        private readonly Food2UContext _context;
        //list to stores db object queries
        public List<Shoppers> shopper {get; set;} = default!;
        public List<DeliveryPerson> deliveryPeople {get; set;} = default!;
        public List<LocalRestaurants> restaurants {get; set;} = default!;
    
        //select lists to store each object type
        public SelectList shopperList {get; set;} = default!;
        public SelectList deliveryDriverList {get; set;} = default!;
        public SelectList restaurantList {get; set;} = default!;
    
        //select list to store the select list type chosen
        public SelectList displayedDropDown {get; set;} = default!;
        //First dropdowns options
        public static IEnumerable<SelectListItem> userTypeOptions() {
            return new[]
            {
                new SelectListItem {Text = "Shoppers", Value = "Shoppers"},
                new SelectListItem {Text = "Delivery Driver", Value = "DeliverPerson"},
                new SelectListItem {Text = "Restaurant", Value = "LocalRestaurants"},
            };
        } 
 
        //called to grab select list depending on the first value selected
        public IActionResult OnGetFetchUserNames(string userType)
        {
            switch (userType)
            {
                case "Shoppers":
                    displayedDropDown = shopperList;
                    break;
                case "DeliverPerson":
                    displayedDropDown = deliveryDriverList;
                    break;
                case "LocalRestaurants":
                    displayedDropDown = restaurantList;
                    break;
            }
            
            //Tried json here because i saw another post successfully use it. 
            return new JsonResult(displayedDropDown);
        }
    
        public IndexModel(ILogger<IndexModel> logger, Food2UContext context)
        {
            _logger = logger;
            _context = context; //grab db context
            shopper = _context.Shoppers.ToList();
            deliveryPeople = _context.DeliverPerson.ToList();
            restaurants = _context.LocalRestaurants.ToList();
    
            shopperList = new SelectList(shopper, "shopperID", "Name");
            deliveryDriverList = new SelectList(deliveryPeople, "driverID", "Name");
            restaurantList = new SelectList(restaurants, "restaurantID", "Name");
        }
        }
    
        //attempt to populate dropdowns and objects when page loads
        public void OnGet()
        {
            
        }

第二：像这样定义htmlString

htmlString += "<option value='" + v.value + "'>" + v.text + "</option>"; 

结果：