MVC 根据之前的下拉列表过滤下拉列表，重用代码

Question

我是 MVC 新手，将现有的 WPF 应用程序转换为 MVC 网站。我们在应用程序多阶段下拉选择中使用的一种常用功能。我的意思是：

• 下拉列表 A 是数据库中的列表
• 选择 A 后，会根据该选择填充下拉列表 B
• 选择 B 后，会根据该选择填充下拉列表 C

在 WPF 中，我可以制作一个自定义控件，以便轻松地将它放在我需要的任何地方，但我不确定 MVC 部分视图是否会给我所需的能力，因为看起来 @ 987654321@ 或is not even possible。我想对控制器进行 ajax 调用，以便在选择每个下拉列表时加载数据，这需要 javascript。

我折腾的一个想法是有一个局部视图，它需要一个模型来加载下拉 A，然后在 Partial() 正下方执行一个 @Scripts.Render('multiDropdown.js'。我不喜欢这个想法，因为我现在必须确保我也包括脚本，而不是仅仅渲染部分。我也不喜欢这个，因为如果有某种方法可以将 javascript 放入部分，我还可以提供 ViewData 以提供下拉列表 ID 名称以在 javascript 中使用，因此我可以在同一页面上拥有多个部分.如果 javascript 保持独立，我必须在部分和 javascript 中的元素上硬编码 ID。

我的另一个想法是使用@Ajax 帮助器尝试“不使用”javascript 来加载它们，但我不确定是否由于javascript 的部分限制，@Ajax 方法是否可以正常工作在部分视图中。

我可以使用其他技术来解决这个问题吗？这种过滤似乎是一种常见的功能，但我找不到任何可以帮助我实现它的资源，尤其是以可重用的方式。

Answer 1

您需要搜索级联下拉菜单，有大量示例如何做到这一点。您还需要使用 AJAX 来执行此操作。我将向您展示我的 AJAX，让您朝着正确的方向前进。在此 AJAX 调用的成功函数中，我正在清除 Dropdown B 的先前内容并重新填充服务器返回的内容。

               $.ajax({
                    url: "/Home/GetDivisions", //will return JsonResult
                    type: "GET",
                    data: { leagueId: value },
                    success: function (data) {

                        var ddlDivision = $('#ddlDivision'); 
                        ddlDivision.html(''); //clear previous contents.

                        $.each(data, function (index, item) {

                         ddlDivision.append($('<option></option>')
                        .val(item.Value)
                        .html(item.Text));
                        });
                     },