C# 通过ajax将表单字段的值从视图传递给控制器，并根据状态选择填充下拉列表

我正在尝试创建一个州和城市下拉列表。当选择州时，城市将进行填充。我使用ajax来实现这一点。我把所有的东西都写下来了，我觉得应该行得通，当然不行。“州”下拉列表是从一个单独的类中提取的，该类包含美国所有50个州的可枚举列表。作为我在控制器中编写的第二个下拉列表，我希望能够返回Json数据来填充城市下拉列表。 这是我的dropdownlistfor剃须刀以及我的jquery和ajax：

<div class="form-group">
            @Html.LabelFor(model => model.State, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.State, WebGridProject.Models.StateCodes.GetStatesList(), new { id = "State", @class = "form-control", @onchange = "FillCity2()" })
                @Html.ValidationMessageFor(model => model.State, "", new { @class = "text-danger" })
            </div>
        </div>


        <script>
            function FillCity2() {
                var stateId = $('#State').val();
                console.log(stateId);
                $.ajax({
                    url: '/Home/FillCity2',
                    type: "GET",
                    dataType: "JSON",
                    data: { State: stateId },
                    success: function (city) { // cities is the variable in the controller made to fetch the city list
                        $("#City").html(""); 
                        $.each(city, function (i , cityNames) {
                            $("#City").append(
                                $('<option></option>').val(cityNames.cities));
                        });
                    }
                });
            }
        </script>


        <div class="form-group">
            @Html.LabelFor(model => model.City, htmlAttributes: new {@class = "control-label col-md-2"})
            <div class="col-md-10">

                @Html.DropDownListFor(model => model.City, new SelectList(Enumerable.Empty<SelectListItem>()), "Select City", new { id = "City", @class = "form-control"})
                @Html.ValidationMessageFor(model => model.City, "", new {@class = "text-danger"})
            </div>
        </div>

@LabelFor（model=>model.State，htmlAttributes:new{@class=“controllabel col-md-2”}）
@Html.DropDownListFor（model=>model.State，WebGridProject.Models.StateCodes.GetStatesList（），new{id=“State”，@class=“form control”，@onchange=“FillCity2（）”}）
@Html.ValidationMessageFor（model=>model.State，“，new{@class=“text danger”}）
函数FillCity2（）{
var stateId=$（'#State'）.val（）；
console.log（stateId）；
$.ajax({
url:“/Home/FillCity2”，
键入：“获取”，
数据类型：“JSON”，
数据：{State:stateId}，
成功：函数（city）{//cities是控制器中用于获取城市列表的变量
$（“#城市”）.html（“”）；
$。每个（城市，功能（i，城市名称）{
$（“#城市”）。追加(
$（''）.val（cityNames.cities））；
});
}
});
}
@LabelFor（model=>model.City，htmlAttributes:new{@class=“controllabel col-md-2”}）
@Html.DropDownListFor（model=>model.City，new SelectList（Enumerable.Empty（）），“Select City”，new{id=“City”，@class=“form control”}）
@Html.ValidationMessageFor（model=>model.City，“，new{@class=“text danger”}）

以下是我用来处理请求的控制器操作：

public JsonResult FillCity2(string stateName)
        {
            List<SelectListItem> cities = new List<SelectListItem>();

            switch (stateName)
            {
                case "AK":
                    cities = new List<SelectListItem>
                    {
                        new SelectListItem() {Text = "", Value = ""},
                        new SelectListItem() {Text = "Anchorage", Value = "Anchorage"},
                        new SelectListItem() {Text = "Fairbanks", Value = "Fairbanks"},
                    };
                    break;
                case "AL":
                    cities = new List<SelectListItem>
                    {
                        new SelectListItem() {Text = "", Value = ""},
                        new SelectListItem() {Text = "Auburn", Value = "Auburn"},
                        new SelectListItem() {Text = "Birmingham", Value = "Birmingham"},
                        new SelectListItem() {Text = "Dothan", Value = "Dothan"},
                        new SelectListItem() {Text = "Mobile", Value = "Mobile"},
                    };
                    break;
                case "AZ":
                    cities = new List<SelectListItem>
                    {
                        new SelectListItem() {Text = "", Value = ""},
                        new SelectListItem() {Text = "Pheonix", Value = "Pheonix"},
                        new SelectListItem() {Text = "Flagstaff", Value = "Flagstaff"},
                        new SelectListItem() {Text = "Prescott", Value = "Prescott"},
                        new SelectListItem() {Text = "Tucson", Value = "Tucson"},
                    };
                    break;
                case "AR":
                    cities = new List<SelectListItem>
                    {
                        new SelectListItem() {Text = "", Value = ""},
                        new SelectListItem() {Text = "Fayetteville", Value = "Fayetteville"},
                        new SelectListItem() {Text = "Fort smith", Value = "Fort smith"},
                        new SelectListItem() {Text = "Jonesboro", Value = "Jonesboro"},
                        new SelectListItem() {Text = "Texarkana", Value = "Texarkana"},
                    };
                    break;
                default:
                    cities = new List<SelectListItem>
                    {
                        new SelectListItem() {Text = "", Value = ""},
                        new SelectListItem() {Text = "Please Select State", Value = "Please Select State"},
                    };
                    break;
            }
            return Json(cities, JsonRequestBehavior.AllowGet);
        }

public JsonResult FillCity2（字符串stateName）
{
列表城市=新列表（）；
交换机（stateName）
{
案例“AK”：
城市=新列表
{
新建SelectListItem（）{Text=”“，Value=”“}，
新建SelectListItem（）{Text=“Anchorage”，Value=“Anchorage”}，
新建SelectListItem（）{Text=“Fairbanks”，Value=“Fairbanks”}，
};
打破
案例“AL”：
城市=新列表
{
新建SelectListItem（）{Text=”“，Value=”“}，
新建SelectListItem（）{Text=“Auburn”，Value=“Auburn”}，
新建SelectListItem（）{Text=“Birmingham”，Value=“Birmingham”}，
新建SelectListItem（）{Text=“Dothan”，Value=“Dothan”}，
新建SelectListItem（）{Text=“Mobile”，Value=“Mobile”}，
};
打破
案例“AZ”：
城市=新列表
{
新建SelectListItem（）{Text=”“，Value=”“}，
新建SelectListItem（）{Text=“Pheonix”，Value=“Pheonix”}，
新建SelectListItem（）{Text=“Flagstaff”，Value=“Flagstaff”}，
新建SelectListItem（）{Text=“Prescott”，Value=“Prescott”}，
新建SelectListItem（）{Text=“Tucson”，Value=“Tucson”}，
};
打破
案例“AR”：
城市=新列表
{
新建SelectListItem（）{Text=”“，Value=”“}，
新建SelectListItem（）{Text=“Fayetteville”，Value=“Fayetteville”}，
新建SelectListItem（）{Text=“Fort smith”，Value=“Fort smith”}，
新建SelectListItem（）{Text=“Jonesboro”，Value=“Jonesboro”}，
新建SelectListItem（）{Text=“Texarkana”，Value=“Texarkana”}，
};
打破
违约：
城市=新列表
{
新建SelectListItem（）{Text=”“，Value=”“}，
新建SelectListItem（）{Text=“请选择状态”，Value=“请选择状态”}，
};
打破
}
返回Json（cities，JsonRequestBehavior.AllowGet）；
}

当我在调试器中运行时，#State的值显示为null，尽管在chrome的控制台中它显示了实际值（例如，阿拉巴马州的“AL”，阿拉斯加的“AK”，等等）

我不太明白我传递值的问题在哪里。调试器中的城市列表只会一直转到默认的开关情况

---

有什么想法吗？

您的操作方法参数名和ajax调用数据参数名应该匹配。由于ajax调用在名为

state

的参数中发送选定的状态值，因此您应该更新操作方法，使其具有相同的状态值（或以其他方式）

---

此外，您的操作方法还返回一个

SelectListItem

列表，该列表具有

Text

和

Value

属性。因此，在构建城市下拉列表时，您应该使用这些属性中的任何一个。但是您正在尝试访问列表中不存在的每个项目的

cities

属性

最后，您需要设置选项的

文本

，以及值。因为文本是w

public JsonResult FillCity2(string state)
{
   //use the state variable in your method now for switch statement
}

success: function (cityArray) { 
    $("#City").html("");
    $.each(cityArray, function (i, city) {
        $("#City").append(
            $('<option></option>').val(city.Value).text(city.Text));
    });
}

data: { stateName: stateId },

data: { State: stateId },

success: function (stateCities) {
    var cities = document.getElementById('City');
    while (cities.options.length) {
        cities.remove(0);
    }
    $.each(stateCities, function(i, city) {
        cities.add(new Option(city.Value, city.Text));// or whatever the correct properties are
    });
}