是否可以在視圖中的兩個下拉列表之間異步綁定數據？

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事件，當發生此事件時，對Companies控制器的List動作執行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>'); 
      }); 
     }); 
    }); 
});