Можно ли асинхронно связывать данные между двумя выпадающими списками в представлении? - PullRequest
Новая
       24

Можно ли асинхронно связывать данные между двумя выпадающими списками в представлении?

0 голосов
/ 23 марта 2010

Я бы хотел добиться следующего эффекта, используя ASP.NET MVC и JQuery.

У меня есть выпадающий список со списком стран. Я хочу сделать так, чтобы при изменении значения страны под ним появлялся новый выпадающий список, показывающий список компаний, страной происхождения которых является конкретная выбранная компания. Дело в том, что я не хочу слишком полагаться на действия контроллера, потому что я использую его в помощнике по шаблонам, который представляет собой представление без головы. Могу ли я как-нибудь связать это?

1 Ответ

1 голос
/ 23 марта 2010

Я бы предложил вам создать действие, которое будет возвращать 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 и, когда это событие произойдет, выполнить AJAX-вызов для действия List контроллера Companies и получить связанные компании: 

$(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>');
            });
        });
    });
});
...