MVC 4 ListBox中填充了另一个ListBox

本文关键字：ListBox 另一个 填充 MVC | 更新日期: 2023-09-27 18:28:29

我需要一种方法来了解如何根据同一视图中另一个ListBox中的选定值来填充视图中的ListBox。

例如，我需要一个城市列表框，其中填充了在另一个列表框中选择的国家的名称。

thx提前，很抱歉我的英语

MVC 4 ListBox中填充了另一个ListBox

在主控制器中，我决定使用集合初始值设定项来构建国家/地区列表，但更重要的是，通过在ViewData上使用ViewBag动态，我觉得代码更干净。

public ActionResult Index()
    {
        var countries = new List<string> {"USA", "UK", "India"};
        var countryOptions = new SelectList(countries);
        ViewBag.Countries = countryOptions;
        return View();
    }

接下来是GetStates（）操作方法。在这里，我做了一个更改，使我能够通过HttpGet请求检索状态。原因是我认为HttpGet最适合这个请求，因为我们只是从服务器中检索信息。如果我们添加或更新状态，那么将需要一个HttpPost请求。

  public JsonResult GetStates(string country)
    {
        var states = new List<string>();
        switch (country)
        {
            case "USA":
                states.Add("California");
                states.Add("Florida");
                states.Add("Ohio");
                break;
            case "UK":
                states.Add("London");
                states.Add("Essex");
                break;
            case "India":
                states.Add("Goa");
                states.Add("Punjab");
                break;
        }
        //Add JsonRequest behavior to allow retrieving states over http get
        return Json(states, JsonRequestBehavior.AllowGet);
    }

我的解决方案的第二个也是最后一个部分是Index.chtml文件。在这个文件中，我有表单的html以及从服务器检索状态所需的javascript。

@using (Html.BeginForm())
{
    <div>Select country:</div>
    <div>@Html.DropDownList("country", 
                            ViewBag.Countries as SelectList, 
                            "Please select", 
                            new { id = "country" })
    </div>
    <div>Select state:</div>
    <div>
        <select id="state" disabled="disabled"></select>
    </div>
    <input type="submit" value="Submit"/>
}

@section scripts
{
    <script type="text/javascript">
        $(function() {
            $('#country').on('change', function() {
                var stateDropdown = $('#state');
                //disable state drop down
                stateDropdown.prop('disabled', 'disabled');
                //clear drop down of old states
                stateDropdown.empty();
                //retrieve selected country
                var country = $(this).val();
                if (country.length > 0) {
                    // retrieve data using a Url.Action() to construct url
                    $.getJSON('@Url.Action("GetStates")', {
                        country: country
                    })
                    .done(function (data) {
                        //re-enable state drop down
                        stateDropdown.removeProp('disabled');
                        //for each returned state
                        $.each(data, function (i, state) {
                            //Create new option
                            var option = $('>option /<').html(state);
                            //append state states drop down
                            stateDropdown.append(option);
                        });
                    })
                    .fail(function (jqxhr, textStatus, error) {
                        var err = textStatus + ", " + error;
                        console.log("Request Failed: " + err);
                    });
                }
            });
        })
    </script>
}
相关文章：