Question

我想使用ASP.NET MVC和JQuery实现以下效果。

我有一个显示国家/地区列表的下拉列表。我想这样做，以便当我更改国家/地区的价值时，会在其下方显示一个新的下拉列表，显示其原籍国是特定选定公司的公司列表。问题是我不想过多依赖控制器操作，因为我在模板助手中使用它，这是一个“无头”视图。我可以以某种方式绑定它吗？

Answer 1

我建议您创建一个操作，该操作将返回所选国家/地区的所有公司的JSON表示：

public class CompaniesController: Controller
{
    public ActionResult List(string countryId) 
    {
        IEnumerable<Company> companies = Repository.GetCompanies(countryId);
        // Let's assume that Company has two properties: Id and Name
        return Json(companies);
    }
}

然后假设您已经有一个与国家/地区绑定的下拉列表：

<%= Html.DropDownListFor(x => x.Country, Model.Countries) %>
<%= Html.DropDownListFor(x => x.Company, Enumerable.Empty<SelectListItem>()) %>

您可以注册onchange事件，当此事件发生时，执行对List控制器的Companies操作的AJAX调用并获取相关公司：

$(function() {
    $('select#Country').change(function() {
        var countryId = $(this).val();
        $.post('/companies/list', { countryId: countryId }, function(companies) {
            var companiesSelect = $('select#Company');
            // loop through the companies and fill the dropdown
            $(companies).each(function(index, company) {
                companiesSelect.append(
                    '<option value="' + company.Id + '">'
                    + company.Name + 
                    '</option>');
            });
        });
    });
});

是否可以在视图中的两个下拉列表之间异步绑定数据？

1 个答案: