asp.net - 在 Asp.Net 中使用 JQuery 绑定(bind) DropDownlists

Question

我有 3 个国家、州和地铁下拉列表。我想当用户选择 Country 时，然后选择 State 下拉列表填充 Jquery，当选择 Sate 时，然后选择 Metro 下拉列表填充(例如ajax 的级联下拉列表)。这些过程我想用 JQuery 来完成。

Answer 1

我将在 ASP.NET MVC 中描述它，但如果您编写 ASP.NET Web 服务或只是在代码中放置一些页面方法来执行相同的操作，也可以实现相同的效果 - 您将还需要一个 JSON 序列化器，可以是第 3 方解决方案，也可以是 WCF 中的序列化器。

使用 MVC，首先，我们有三个 Controller 操作 - 一个用于显示页面，国家/地区将是静态的，两个分别用于获取州和都市:

public ActionResult Index()
{
    ViewData["Countries"] = _countryRepository.GetList();
    return View();
}

public ActionResult States(string countryCode)
{
    var states = _stateRepository.GetList(countryCode);
    return Json(states);
}

public ActionResult Metros(string countryCode, string state)
{
    var metros = _metroRepository.GetList(countryCode, state);
    return Json(metros);
}

在 View 中，您有三个 DropDownList，其中一个绑定(bind)到 ViewData["Countries"] 对象，假设它名为 Country，您可以通过 Ajax 调用获取 jQuery 中的州，如下所示:

$('#Countries').change(function() {
    var val = $(this).val();
    $states = $('#States');
    $.ajax({
        url: '<%= Url.Action('States') %>',
        dataType: 'json',
        data: { countryCode: val },
        success: function(states) {
            $.each(states, function(i, state) {
                $states.append('<option value="' + state.Abbr+ '">' + state.Name + '</option>');
            });
        },
        error: function() {
            alert('Failed to retrieve states.');
        }
    });
});

Metros 下拉列表将以类似方式填充，将国家和州选择传递到服务器，并返回包含都会区域数组的 JSON 对象。

我省略了存储库实现的细节，只需以某种方式用州/都会区的集合填充服务器上的结果变量即可。我还假设 State 类有两个属性 - Abbr(例如“CA”)和 Name(例如 California)。

我希望它能以任何方式帮助您，或者至少以某种方式引导您找到解决方案。