使用存储过程的MVC级联下拉列表来填充下拉列表

Question

所以我有两个下拉列表，第二个下拉列表依赖于第一个下拉列表，因此需要级联样式。我有通过存储过程填充的第一个下拉列表，但我不确定如何将第一个下拉列表的ID值传递给存储过程以填充第二个下拉列表。我有第二个下拉设置的存储过程，但不确定如何在控制器中调用它，并将第一个下拉列表的SelectedValue作为参数传入。这是我的代码：

控制器：

public ActionResult CreateForm(){
        List<SelectListItem> CountyList = new List<SelectListItem>();
        List<SelectListItem> DistrictList = new List<SelectListItem>();

        using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["Conn"].ToString()))
        {
            con.Open();
            using (SqlCommand cmd = new SqlCommand("dbo.USP_SELECT_COUNTY", con))
            {
                cmd.CommandType = System.Data.CommandType.StoredProcedure;
                SqlDataReader rdr = cmd.ExecuteReader();
                while (rdr.Read())
                {
                    CountyList.Add(new SelectListItem
                    {
                        Value = rdr[0].ToString(),
                        Text = rdr[1].ToString()
                    });

                }
            }
        }
        ViewBag.CountyList = new SelectList(CountyList.ToList(), "Value", "Text");

        return View();
    }

    public ActionResult TogetDistrictList(string CountyList)
    {
        List<SelectListItem> DistrictList = new List<SelectListItem>();
        using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["Conn"].ToString()))
        {
            con.Open();
            SqlParameter[] parameters = { new SqlParameter("@IDN_COUNTY", CountyList) };
            SqlCommand cmd = CreateCommand("dbo.USP_SELECT_DISTRICT", parameters, con);
            //using (SqlCommand cmd = new SqlCommand("dbo.USP_SELECT_DISTRICT", con))
            {

                cmd.CommandType = System.Data.CommandType.StoredProcedure;
                SqlDataReader rdr = cmd.ExecuteReader();
                while (rdr.Read())
                {
                    DistrictList.Add(new SelectListItem
                    {
                        Value = rdr[0].ToString(),
                        Text = rdr[1].ToString()
                    });

                }
            }
        }
        ViewBag.DistrictList = new SelectList(DistrictList.ToList(), "Value", "Text");


        //DistrictList.Add(new SelectListItem { Text = "DistrictList1" + CountyList, Value = "DistrictList1" + CountyList });

        return Json(CountyList.ToList(), JsonRequestBehavior.AllowGet);
    }


    public SqlCommand CreateCommand(string procedurename, SqlParameter[] parameters, SqlConnection connection)
    {
        SqlCommand cmd = new SqlCommand(procedurename, connection);
        cmd.CommandType = CommandType.StoredProcedure;
        foreach (SqlParameter param in parameters)
        {
            if (param.Value == null)
                param.Value = DBNull.Value;
            cmd.Parameters.Add(param);
        }
        return cmd;
    }

}

视图：

<script type="text/javascript">
jQuery(function($){
  $('#ddlCounty').change(function () {$.ajax('@Url.Action("TogetDistrictList")',  JSON.stringify({CountyList: $("#ddlCounty").val()}) ).done(function(data){                        

                     $('#ddlDistrict').empty();
                     $.each(data,function(i,value){                      
                         $('#ddlDistrict').append($('<option/>').val(value.Value).text(value.Text))
                     })
                 });
                 });
});
</script>

@Html.DropDownList("ddlCounty", ViewBag.CountyList as SelectList})

@Html.DropDownList("ddlDistrict", Enumerable.Empty<SelectListItem>())

使用上面的代码，我在调试时得到一个NullReferenceException，我认为这是因为所选的下拉值被传递为NULL到存储过程，但我不知道如何解决它，因为我尝试输入一个实际的ID值而不是并仍然得到相同的错误。

Answer 1

我通过将Json.stringify更改为data: ({CountyList: $('#ddlCountyList').val()}), datatype: json,来实现它

这有助于将父下拉列表选定值传递给控制器​​操作，控制器操作又填充第二个下拉列表。

Answer 2

function GetDistrictList（）{

        $.ajax({
            url: '@Url.Action("TogetDistrictList", "getDistrict")',
            type: "POST",
            data: { CountyList: $('#countryId').val() },
            success: function(datas, textStatus, jqXHR) {
                if (datas != null) {
                    row = "";
                    row += "<option value='0'>--Select District---</option>";
                    $.each(datas,
                        function(i, v) {
                            row += "<option value='" + v.Value + "'>" + v.Text + "</option>";
                        })
                    $('#ddlDistrict').html(row);
                }
            },
            error: function(ex) {

            }
        });
    }