Question

我需要一种方法来研究如何在视图中填充ListBox，具体取决于同一视图中另一个ListBox中的选定值。

例如，我需要一个ListBox of Cities，其中填充了在另一个ListBox中选择的国家/地区的名称。

提前thx抱歉我的英语

Answer 1

在家庭控制器中，我决定使用集合初始化程序来构建国家/地区列表，但更重要的是，通过使用ViewBag动态而不是ViewData，我觉得代码更清晰。

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.cshtml文件。在这个文件中，我有表单的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>
}

MVC 4 ListBox填充了另一个ListBox

1 个答案: