javascript - MVC 根据之前的下拉菜单过滤下拉菜单，重用代码

Question

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

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

在 WPF 中，我可以制作一个自定义控件，可以轻松地将其放在我需要的任何地方，但我不确定 MVC 部分 View 是否会给我执行此操作所需的功能，因为看起来 putting javascript in a partial view is not recommended或 is not even possible 。我想对 Controller 进行 ajax 回调，以便在选择每个下拉列表时加载数据，这需要 JavaScript。

我曾经想过的一个想法是拥有一个部分 View ，该 View 采用模型来加载下拉菜单 A，然后在 @Scripts.Render('multiDropdown.js' 正下方执行 Partial() 。我不喜欢这个想法，因为我现在必须确保还包含脚本，而不是仅仅渲染部分。我也不喜欢这一点，因为如果有某种方法将 javascript 放入部分中，我还可以提供 ViewData 来给出要在 javascript 中使用的下拉菜单 ID 名称，这样我就可以在同一页面上拥有多个部分。如果 javascript 保持独立，我必须对部分和 javascript 中的元素进行硬编码 ID。

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

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

Answer 1

您需要搜索级联下拉列表，有大量示例如何执行此操作。您还需要使用 AJAX 来完成此操作。我将向您展示我的 AJAX，以帮助您朝着正确的方向前进。在此 AJAX 调用的 success 函数中，我清除了 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));
                        });
                     },