title: How to databind a dropdownlist using knockout and MVC and Entity Framework
body: <p>I have two cascading dropdownlists which I would like to bind based on my knockout.js. Essentially what I want to achieve is two dropdownlist that populate from a database for each branch of the company and one which will populate the various departments based on the branch that was selected in the other dropdownlist. I am having problems converting to a list and then binding to dropdownlist.</p>
  
  <pre><code>function CompanyViewModel() {
  
      var self = this;
  
      self.DepartmentName = ko.observable(" ")
      self.Department =ko.observableArray([]);
      self.DepartmentName = ko.Observable([]);
      self.Branch =ko.observableArray([]);
      self.BranchName = ko.Observable([])
  }
  CompanyViewModel = new CompanyViewModel();
  ko.applyBindings(CompanyViewModel);
  
  
  function  populateCompanyBranches() {
  
      $.ajax({
          type: "GET",
          $.when(getSecureData("/api/Branches/" ))
          .done(function (Branches) {
              Branch.unshift({ "BranchID": 0, "department name": "Please select a Branch." });
              CompanyViewModel.Branch(Branch);
          })
          .fail(function (message) {
              $.msgbox(message);
          });
  };
  
  
  
  function populateBranchDepartments() {
      $("#Branches").change(function () {
                  var BranchID = $("#Branches").val();                           
                  $.ajax({
                      type: "GET",
            $.when(getSecureData("/api/Departments/GetDepartment" + BranchID))
          .done(function (Department) {
          CompanyDepartment.unshift({ "CompanyID": 0, "departmentName": "Please select a department" });
              CompanyViewModel.Department(Department);
          })
          .fail(function (message) {
              $.msgbox(message);
              });
          };
  }
  </code></pre>
  
  <p>View </p>
  
  <pre><code>Branch Name: &lt;select data-bind="options:  CompanyViewModel. CompanyViewModel, optionsCaption: 'Select a Branch',
      optionsValue: function (item) { return item.BranchId; },
      optionsText: function (item) { return item.BranchName; }, value: Branch,
      valueUpdate: 'change'" id="Branches" name="Branch"&gt;&lt;/select&gt;
  &lt;br /&gt;
  
  Deaprtment Name: &lt;select data-bind="options: CompanyViewModel.Department, optionsCaption: 'Choose Department...',
      optionsValue: function (item) { return item.DepartmentId; },
      optionsText: function (item) { return item.DepartmentName; },  value: DepartmentName,
      valueUpdate: 'change'" id="Department" name="Department"&gt;&lt;/select&gt;
  &lt;br /&gt;   
    &lt;/div&gt;
  
  public class CompanyDTO
  {
      public int BranchId { get; set; }
      public string BranchName { get; set;}  
      public int DepartmentId { get; set; }
      public string DepartmentName { get; set;}  
  }
  
  public static class CompanyBranchList
  {
      public static CompanyDTO DepartmentToBranchDTO(listing e)
      {
          return new CompanyDTO 
          {
              BranchId = e.BranchId,
              BranchName = e.BranchName
              DepartmentId = e.DepartmentId
              DepartmentName = e.DepartmentName
  
          };
      }
  
  
      public static List&lt;CompanyDTO&gt; ListBranchToDepartmentDTO(List&lt;listing&gt; e)       
      {
          List&lt;CompanyDTO&gt; lstCompanyDTO= e.Select(
            lstng =&gt; new CompanyDTO()
            {
              BranchId = lsting.BranchId,
              BranchName = lsting.BranchName
              DepartmentId = lsting.DepartmentId
              DepartmentName = lsting.DepartmentName
            }).ToList();
          return ListBranchToDepartmentDTO;
      }
  </code></pre>
  
  <p>Repository</p>
  
  <pre><code>public class CompanyRepository : IComapnyRepository
  {
      public List&lt;CompanyDTO&gt; GetBranches()
      {
          using (TestDBEntities dbcontext1 = new TestDBEntities())
          {
              var lstCountries = from r in dbcontext1.Branches select r;
              List&lt;CompanyDTO&gt; lst = new List&lt;CompanyDTO&gt;();
              lst = CompanyBranchList.DepartmentToBranchDTO(lstCompanyDTO.ToList());
              return lst;
          }
      }
  </code></pre>
  
  <p>Controller</p>
  
  <pre><code>public List&lt;CompanyDTO&gt; GetDepartments(int deparmentId)
  {
      using (TestDBEntities dbcontext = new TestDBEntities())
      {
          var lstDep = dbcontext.States.Where(b =&gt; b.DepartmentID == departmentId).ToList();
          List&lt;CompanyDTO&gt; list = new List&lt;CompanyDTO&gt;();
          list = CompanyBranchList.ListBranchToDepartmentDTO(lstDep.ToList());
          return list;
      }
  }
  </code></pre>