c# - 基于国家选择动态改变MVC中的州/省

Question

所以，我知道那里已经有很多例子，但我已经尝试了其中的大部分，但似乎仍然无法让它为我工作。我想选择一个 Enum 的国家，然后使用 JSON 来切换省和州。现在，我可以根据我在视图中选择的列表加载一个或另一个。

模型

    public string Province { get; set; }

    public enum Countries
    {
        [Display(Name = "Canada")]
        Canada,
        [Display(Name = "United States")]
        UnitedStates,

    }

控制器

    [HttpPost]
    public JsonResult GetStatesOrProvinces(string id)
    {
        IEnumerable<SelectListItem> stateProvListEmpty = new List<SelectListItem>();
        SelectList stateProvList = new SelectList(stateProvListEmpty);
        switch (id)
        {
            case "Canada":
                stateProvList = Lists.provinceList;
                break;
            case "United States":
                stateProvList = Lists.stateList;
                break;
        }
        return Json(stateProvList);
    }

赫勒级

 public class Lists
{
    public static SelectList provinceList = new SelectList(
 new List<SelectListItem>{
        new SelectListItem { Text = "Alberta", Value = "Alberta" },
        new SelectListItem { Text = "British Columbia", Value = "British Columbia" },
        new SelectListItem { Text = "Manitoba", Value = "Manitoba"},
        new SelectListItem { Text = "New Brunswick", Value = "New Brunswick"},
        new SelectListItem { Text = "Newfoundland and Labrodor", Value = "Newfoundland and     Labrodor" },
        new SelectListItem { Text = "Nova Scotia", Value = "Nova Scotia" },
        new SelectListItem { Text = "Ontario", Value = "Ontario" },
        new SelectListItem { Text = "Prince Edward Island", Value = "Prince Edward Island" },
        new SelectListItem { Text = "Quebec", Value = "Quebec" },
        new SelectListItem { Text = "Saskatchewan", Value = "Saskatchewan" },
 }, "Value", "Text");


    public static SelectList stateList = new SelectList(
new List<SelectListItem>{
    new SelectListItem() {Text="Alabama", Value="AL"},
    new SelectListItem() { Text="Alaska", Value="AK"},
    new SelectListItem() { Text="Wyoming", Value="WY"}

}, "Value", "Text");

 }

看法

 <div class="form-group">
                     @Html.LabelFor(model => model.Province, htmlAttributes: new { @class = "control-label   col-md-2" })
            <div class="col-md-10">
                      @Html.DropDownListFor(model => model.Province, Lists.provinceList,  new { @class =   "form-control" })
                      @Html.ValidationMessageFor(model => model.Province, "", new { @class = "text- danger" })
            </div>
        </div>
       </div>
    </div>


 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.js%22%3E"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js%22%3E"></script>
 <script type="text/javascript">

  $(document).ready(function () {
    //Dropdownlist Selectedchange event
    $("#Country").change(function () {
        $("#Province").empty();
        $.ajax({
            type: 'POST',
            url: '@Url.Action("GetStatesOrProvinces")', // we are calling json method

            dataType: 'json',

            data: { id: $("#Country").val() },
           // here we are get value of selected country and passing same value
           // as input to json method GetStatesOrProvinces.

            success: function (stateProvList) {
                // states contains the JSON formatted list
                // of states passed from the controller

                $.each(stateProvList, function (i, province) {
                $("#Province").append('<option value="' + province.Value + '">' +
                     province.Text + '</option>');
                // here we are adding option for States

                });
            },
            error: function (ex) {
                alert('Failed to retrieve States/Provinces.' + ex);
            }
        });
        return false;
    })
});
</script>

标签： c#asp.net-mvc