ASP.NET MVC中动态更新DropDownList内容的AJAX实现教程

@* 主下拉列表 Item1 *@
<tr>
    <td style="text-align: center;">
        Item1:
    </td>
    <td colspan="2">
        @Html.DropDownListFor(model => model.item1, (SelectList)ViewData["item1List"], 
            new { onchange = "checkItem();", id = "Item1", name = "Item1", @class = "form-control", @style = "min-width: 100%!important;", @required = true })
    </td>
</tr>
@* 目标下拉列表 Item2 *@
<tr>
    <td style="text-align: center;">
        Item2:
    </td>
    <td colspan="2">
        @Html.DropDownListFor(model => model.item2, new SelectList(Enumerable.Empty<SelectListItem>()), // 初始为空或默认值
            new { id = "item2", name = "item2", @class = "form-control", @style = "min-width: 100%!important;" })
    </td>
</tr>

<script type="text/javascript">
    $(document).ready(function () {
        // 绑定Item1下拉列表的change事件
        $("#Item1").change(function () {
            var selectedItem1Value = $(this).val(); // 获取Item1的当前选中值

            // 如果Item1有选定值，则发起AJAX请求
            if (selectedItem1Value) {
                $.ajax({
                    url: "/YourControllerName/GetItem2List", // 后端控制器动作的URL
                    type: "GET",
                    data: { item1Value: selectedItem1Value }, // 将Item1的选中值作为参数发送
                    dataType: "json", // 预期服务器返回的数据类型为JSON
                    success: function (data) {
                        // 清空Item2下拉列表的现有选项
                        $("#item2").empty();

                        // 添加一个默认选项（可选）
                        $("#item2").append($("<option></option>").val("").text("-- 请选择 --"));

                        // 遍历服务器返回的数据，并添加到Item2下拉列表
                        $.each(data, function (index, item) {
                            $("#item2").append($("<option></option>").val(item.Value).text(item.Text));
                        });

                        // 启用Item2下拉列表（如果它最初是禁用的）
                        $("#item2").prop("disabled", false);
                    },
                    error: function (xhr, status, error) {
                        alert("加载Item2数据时发生错误: " + error);
                        // 可以在此处添加更详细的错误处理，例如日志记录或用户友好的提示
                    }
                });
            } else {
                // 如果Item1没有选定值（例如，选择了“请选择”），则清空并禁用Item2
                $("#item2").empty();
                $("#item2").append($("<option></option>").val("").text("-- 请选择 --"));
                $("#item2").prop("disabled", true);
            }
        });

        // 页面加载时，如果Item1有默认值，也可能需要触发一次change事件来初始化Item2
        // 或者在页面加载时就禁用Item2，直到Item1被选择
        // $("#item2").prop("disabled", true);
    });
</script>

using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;

public class YourControllerNameController : Controller
{
    // 假设您有一个数据服务或仓库来获取数据
    // private readonly IYourDataService _dataService;

    // public YourControllerNameController(IYourDataService dataService)
    // {
    //     _dataService = dataService;
    // }

    [HttpGet] // 明确指定为GET请求
    public JsonResult GetItem2List(string item1Value)
    {
        List<SelectListItem> item2Options = new List<SelectListItem>();

        // 根据item1Value的值来构建item2Options
        // 示例逻辑：
        if (item1Value == "Locomotive")
        {
            item2Options.Add(new SelectListItem { Value = "PassengerCarA", Text = "客车A型" });
            item2Options.Add(new SelectListItem { Value = "PassengerCarB", Text = "客车B型" });
            // 从数据库或服务中获取客车列表
            // item2Options.AddRange(_dataService.GetPassengerCars());
        }
        else if (item1Value == "MotorTrain")
        {
            item2Options.Add(new SelectListItem { Value = "StadlerFLIRT", Text = "Stadler FLIRT" });
            item2Options.Add(new SelectListItem { Value = "CRH1", Text = "CRH1型动车组" });
            // 从数据库或服务中获取兼容动车组列表
            // item2Options.AddRange(_dataService.GetCompatibleMotorTrains());
        }
        // 可以添加更多的else if分支来处理不同的item1Value

        // 返回JSON格式的数据
        // JsonRequestBehavior.AllowGet 是为了允许GET请求返回JSON数据，防止JSON劫持
        return Json(item2Options, JsonRequestBehavior.AllowGet);
    }
}