@ html.dropdownlist未填充所选值

Question

在这里，我有两个下拉列表。 第一个显示国家列表，第二个从第一开始列出所选国家的州值。 值列表是从正确填充的，但是在下拉列表中，没有填充值。
jQuery的：

 $(document).ready(function () {
        $("#Country").change(function () {
            var Id = $('#Country option:selected').attr('value');
            $("#Region").empty();
            $.getJSON("/ControllerName/GetRegionList",{ ID: Id  },
                function (data) {                    
                    jQuery.each(data, function (key) {
                        $("#Region").append($("<option></option>").val(ID).html(Name));
                    });
                });
        });
    });

查看：

 @Html.DropDownList("Country", new SelectList(Model.CountryList, "Value", "Text", Model.CountryList.SelectedValue))
 @Html.DropDownList("Region", new SelectList(Model.RegionList, "Value", "Text", Model.RegionList.SelectedValue))

控制器：

      public List<Region> GetRegionList(int ID)
        {
            int countryid = ID;           
            AddressModel objmodel = new AddressModel();
            List<Region> objRegionList = new List<Region>();
            objRegionList.Add(new Region { ID = "0", Name = " " });
            if (countryid != 0)
            {
                countryid = Convert.ToInt32(ID);
                SqlCommand cmd = new SqlCommand("USP_ProcedureName", con);
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Parameters.AddWithValue("@Id", countryid);
                cmd.Parameters.AddWithValue("@Mode", "Region");
                con.Open();
                SqlDataReader dr = cmd.ExecuteReader();
                while (dr.Read())
                {
                    if (dr["RegionId"].ToString() != "")
                    {
                        objRegionList.Add(new Region { ID = dr["RegionId"].ToString(), Name = dr["Name"].ToString() });
                    }
                }
                dr.Close();
                con.Close();
            }
            return objRegionList;
        }

我的代码有什么错误？ 有什么建议么。 编辑：添加了快照

Answer 1

在ASP.NET MVC控制器中，操作必须返回ActionResults。 在您的情况下，您可以返回JSON：

public ActionResult GetRegionList(int id)
{
    var objRegionList = new List<Region>();
    objRegionList.Add(new Region { ID = "0", Name = " " });
    if (countryid != 0)
    {
        int countryid = ID;
        using (var conn = new SqlConnection("YOUR CONNECTION STRING COMES HERE"))
        using (var cmd = conn.CreateCommand())
        {
            con.Open();

            cmd.CommandText = "USP_ProcedureName";
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@Id", countryid);
            cmd.Parameters.AddWithValue("@Mode", "Region");
            using (var dr = cmd.ExecuteReader())
            {
                while (dr.Read())
                {
                    if (dr["RegionId"].ToString() != "")
                    {
                        objRegionList.Add(new Region 
                        { 
                            ID = dr["RegionId"].ToString(), 
                            Name = dr["Name"].ToString() 
                        });
                    }
                }
            }
        }
    }

    return Json(objRegionList, JsonRequestBehavior.AllowGet);
}

注意，我还从using语句中避免了未使用的变量和不必要的Convert.ToInt32调用以及最重要的包装IDisaposable资源（例如SQL连接，命令和数据读取器）中清除了代码，以免泄漏资源。

然后，在第一个下拉列表中，将控制器操作的网址作为data-*属性包含在内，以免在JavaScript中对其进行硬编码和在虚拟目录中的IIS中部署应用程序时损坏：

@Html.DropDownList(
    "Country", 
    new SelectList(Model.CountryList, "Value", "Text", Model.CountryList.SelectedValue),
    new { data_url = Url.Action("GetRegionList", "ControllerName") }
)

最终适应（简化）您的javascript：

$('#Country').change(function () {
    var regionDdl = $('#Region');
    regionDdl.empty();
    var id = $(this).val();
    var url = $(this).data(url);
    $.getJSON(url, { id: id }, function (data) {                    
        $.each(data, function (index, region) {
            regionDdl.append(
                $('<option/>', {
                    value: region.ID,
                    html: region.Name
                })
            );
        });
    });
});