下拉列表在剃須刀中刷新

Question

我有一個代表州的下拉列表，根據選擇的州，我需要刷新“城市”下拉列表，這些州代表處於選定狀態的城市。 如何刷新城市下拉菜單？

這是我的代碼：

 public class AccountController : Controller
        {
    public static List<SelectListItem> StateListItem()
            {
                var stateList = new List<SeraydarBL.Accounts.State>();
                var selectListItems = new List<SelectListItem>();
                stateList = SeraydarBL.Accounts.SelectStates();
                foreach (var state in stateList)
                {
                    var selectListItem = new SelectListItem();
                    selectListItem.Text = state.name;
                    selectListItem.Value = state.id.ToString();
                    selectListItems.Add(selectListItem);
                }
                return selectListItems;
            }

}

這是剃刀：

    @using (Html.BeginForm())
    {
        <fieldset>
            <legend>Registration Form</legend>
            <ol>
                <li>
        //-------------------------------------------------------
        var stateList = new List<SelectListItem>();
        stateList = AccountController.StateListItem();
                    }


                    @Html.LabelFor(model => model.StateId)
                    @Html.DropDownListFor(model => model.StateId, stateList, " Select your State ...")
                    @Html.ValidationMessageFor(m => m.StateId)

                    @*HERE MUST BE THE DROP DOWN LIST OF CITIES*@


                </li>
            </ol>
            <input type="submit" value="Register" />
        </fieldset>


    <script>
        $('#StateId').change(function () {

        });

    </script>
}

Answer 1

您可以使用jquery ajax調用來實現。

 <script type="text/javascript">
    $(document).ready(function () {
        //Dropdownlist Selectedchange event
        $("#StateId").change(function () {
            $("#CityId").empty();
            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetCity")', 
                dataType: 'json',
                data: { id: $("#StateId").val() },
                success: function (cities) {
                    $.each(cities, function (i, city) {
                        $("#CityId").append('<option value="' + city.Value + '">' +``});
                },
                error: function (ex) {
                    alert('Failed to retrieve states.' + ex);
                }
            });
            return false;
        })
    });
</script>

參考幾篇文章

http://www.codeproject.com/Articles/730953/Cascading-Dropdown-List-With-MVC-LINQ-to-SQL-and-A http://www.c-sharpcorner.com/UploadFile/4d9083/creating -簡單-級聯-下拉列表-在-MVC -4-使用剃刀/