c# - MVC 下拉列表，onchange

Question

我在 html 中有一个 2 Dropdownlistfor，用于 Country 的 dropdownlist 和用于 state 的 dropdownlist。我使用 MVC，我想成为这样的输出，如果我更改 Selected Country，所选国家的 state 将填充到 state 的下拉列表中。我从数据库中获取国家和州的数据，并且在州表中有一个 countryId 字段。感谢帮助。

这是 Html 中的示例代码。

            <div class="fieldBlock">
                <div><label>Country</label>&nbsp;*</div>
                <div>@Html.DropDownListFor(model => model.Country.Id, Model.CountrySelectList, new { @class = "width305", @id = "ddlCountry" })</div>
                @Html.HiddenFor(model => model.Country.Name) @Html.HiddenFor(model => model.Country.Abbreviation)
                <div>@Html.ValidationMessageFor(model => model.Employee.StateId)</div>
            </div>

            <div class="fieldBlock">
                <div>@Html.LabelFor(model => model.Employee.StateId, "State/Province")&nbsp;*</div>
                <div>@Html.DropDownListFor(model => model.Employee.StateId, Model.CountryStateProvinceSelectList, new { @class = "width305" })</div>
                <div>@Html.ValidationMessageFor(model => model.Employee.StateId)</div>
            </div>

Answer 1

尝试这个

在视图中

<script type="text/javascript">
     $(function() {
            $("#ddlCountry").change(function() {
                var selectedItem = $(this).val();
                var ddlStates = $("#ddlState");
                var statesProgress = $("#states-loading-progress");
                statesProgress.show();
                $.ajax({
                    cache: false,
                    type: "GET",
                    url: "@(Url.Action("SomeAction", "SomeController"))",
                    data: { "countryId": selectedItem},
                    success: function (data) {
                        ddlStates.html('');
                        $.each(data, function(id, option) {
                            ddlStates.append($('<option></option>').val(option.id).html(option.name));
                        });

                    },
                    error:function (xhr, ajaxOptions, thrownError){
                        alert('Failed to retrieve states.');

                    }  
                });
            });
        });
    </script>


<div class="fieldBlock">
    <div><label>Country</label>&nbsp;*</div>
    <div>@Html.DropDownListFor(model => model.Country.Id, Model.CountrySelectList, new { @class = "width305", @id = "ddlCountry" })</div>
    @Html.HiddenFor(model => model.Country.Name) @Html.HiddenFor(model => model.Country.Abbreviation)
    <div>@Html.ValidationMessageFor(model => model.Employee.StateId)</div>
</div>

<div class="fieldBlock">
    <div>@Html.LabelFor(model => model.Employee.StateId, "State/Province")&nbsp;*</div>
    <div>@Html.DropDownListFor(model => model.Employee.StateId, Model.CountryStateProvinceSelectList, new { @class = "width305", @id = "ddlState" })</div>
    <div>@Html.ValidationMessageFor(model => model.Employee.StateId)</div>
</div>

在控制器中

public ActionResult SomeAction(string countryId)
{
     //perform your action here
     var states = _stateProvinceService.GetStateProvincesByCountryId(country.Id).ToList();
     var result = (from s in states
                   select new { id = s.Id, name = s.GetLocalized(x => x.Name) }
                  ).ToList();

   return Json(result, JsonRequestBehavior.AllowGet);
} 

注意：检查是否Id正确绑定到下拉菜单，并且我已经编写了虚拟代码来获取状态。