ASP.NET MVC实现级联下拉框时州下拉无联动、表单跳转异常求解

核心故障点（直接导致功能无法运行） #

• 控制器存在编译级错误：
  • page方法中实例化的数据库命令对象名为listK，后续读写数据库操作全部引用未定义的listc，代码无法通过编译
  • getstate方法中实例化的数据库命令对象名为lists，后续读写数据库操作全部引用未定义的listsc，同样触发编译错误
• 请求方法不匹配：getstate方法标注了[HttpPost]特性，但前端使用$.get发送GET请求，服务端直接返回405状态码，无任何返回数据
• 下拉框绑定逻辑错误：@Html.DropDownList("country", "Select Country") 调用的是仅传入下拉框name、空选项文本的重载方法，完全没有把控制器存放在ViewBag中的国家列表绑定到下拉框，导致国家下拉无数据
• 前端路径语法错误：JS中使用的"~/pageControl/getstate"是服务端路径语法，前端浏览器无法识别站点根目录符号~，直接请求失败返回404
• 下拉框初始构造非法：new SelectList(" ") 将空字符串作为SelectList的数据源参数，触发页面渲染异常

代码优化项 #

• 原SQL采用字符串拼接传参，存在SQL注入风险，需替换为参数化查询
• 数据库连接、命令、读取对象未实现自动资源释放，长期运行会耗尽数据库连接池，需使用using块包裹实现自动回收
• 原JS清空州下拉列表后，没有还原默认的“Select State”提示选项，用户交互体验差

修正后完整实现 #

控制器代码 #

public ActionResult page()
{
    string conStr = Properties.Settings.Default.db;
    var listCountry = new List<dropdownc>();
    
    using (MySqlConnection con_main = new MySqlConnection(conStr))
    {
        con_main.Open();
        using (MySqlCommand listc = new MySqlCommand("SELECT id, name FROM master_country", con_main))
        {
            using (MySqlDataReader rc = listc.ExecuteReader())
            {
                while (rc.Read())
                {
                    listCountry.Add(new dropdownc
                    {
                        id = rc[0].ToString(),
                        name = rc[1].ToString()
                    });
                }
            }
        }
    }
    ViewBag.country = new SelectList(listCountry, "id", "name");
    return View();
}

public JsonResult getstate(string Id)
{
    if (string.IsNullOrEmpty(Id))
    {
        return Json(new List<dropdowns>(), JsonRequestBehavior.AllowGet);
    }
    string conStr = Properties.Settings.Default.db;
    var listState = new List<dropdowns>();
    
    using (MySqlConnection con_main = new MySqlConnection(conStr))
    {
        con_main.Open();
        using (MySqlCommand listsc = new MySqlCommand("SELECT id, name FROM master_state WHERE id_country = @CountryId", con_main))
        {
            listsc.Parameters.AddWithValue("@CountryId", Id);
            using (MySqlDataReader rs = listsc.ExecuteReader())
            {
                while (rs.Read())
                {
                    listState.Add(new dropdowns
                    {
                        id = rs[0].ToString(),
                        name = rs[1].ToString()
                    });
                }
            }
        }
    }
    return Json(listState, JsonRequestBehavior.AllowGet);
}

视图代码 #

<div id="dropDownListdiv">
     @using (Html.BeginForm("Index", "CascadingDropDownList", FormMethod.Post))
     {
         @Html.DropDownList("country", ViewBag.country as SelectList, "Select Country")
         @Html.DropDownList("state", new SelectList(Enumerable.Empty<SelectListItem>(), "id", "name"), "Select State")
         <input type="submit" value="Submit" />
     }
</div>

前端JS代码 #

$(document).ready(function () {
    $("#country").change(function () {
        let requestUrl = '@Url.Action("getstate", "pageControl")';
        $.get(requestUrl, { Id: $("#country").val() }, function (data) {
            $("#state").empty();
            $("#state").append("<option value=''>Select State</option>");
            $.each(data, function (index, row) {
                $("#state").append(`<option value='${row.id}'>${row.name}</option>`);
            });
        });
    })
});

内容的提问来源于stack exchange，提问作者ANder