Tutorial :Update dropdown values


In the ViewModel:

SelectSafetyContacts = new SelectList(subcontractRepository.GetContacts(Subcontract.company_id), "contact_id", "contact_name", Subcontract.safety_contact);  

In the Repository:

public IQueryable<contact> GetContacts(Guid id)      {          return          db.companies              .Where(c => c.active_status == true)              .Where(c => c.primary_company == id || c.company_id == id)              .SelectMany(ct => ct.contacts).Where(ct => ct.active_status == true);      }  

In the form:

<%= Html.DropDownList("safety_contact", Model.SelectSafetyContacts, "** Select Contact **") %>  

This works great except when in the form they change the company. The contacts need to then change to match the new company. I assume that I can somehow do this with jQuery, but I'm not sure how. Can I reference the GetContacts function in the Repository, so that in the future if an update to this select is made, it will only be in one place?


You could achieve this using AJAX. When the company changes send a request to the server passing the new company id in order to fetch the associated contacts. To do this you will need a controller action returning a partial view containing the contacts drop down list:


public class SafetyContactsViewModel  {      public int? SelectedContactId { get; set; }      public IEnumerable<SelectListItem> Contacts { get; set; }  }  


public ActionResult Contacts(int? companyId)  {      var contacts = new SafetyContactsViewModel      {          Contacts = new SelectList(              subcontractRepository.GetContacts(companyId),               "contact_id",               "contact_name"          )      };      return PartialView(contacts);  }  

Then your Contacts.ascx partial will contain the drop down list:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<SafetyContactsViewModel>" %>  <%= Html.DropDownListFor(x => x.SelectedContactId, Model.Contacts, "** Select Contact **") %>  

And then you can attach a .change() event handler to the companies drop down which will call the controller action:

$(function() {      $('#the_id_of_the_companies_drop_down').change(function() {          $('#id_of_a_div_that_contains_the_contacts_drop_down')              .load('/home/contacts', { companyId: $(this).val() });      });  });  


Did it this way:

$('#company').change(function () {              var company = $(this)[0].value.toString();              $.getJSON('<%= ResolveUrl("~/Subcontracts/CompanyContacts/") %>' + company, null, function (data) {                  $('.contact').empty().append("<option value=''>**Select Contact**</option>");                  $.each(data, function (index, optionData) {                      $('.contact').append("<option value='" + optionData.contact_id + "'>" + optionData.contact_name + "</option>");                    });              });          });  

In my Controller:

public ActionResult CompanyContacts(string id)      {          Guid companyId = new Guid(id);          IEnumerable<contact> companycontacts = subcontractRepository.GetContacts(companyId);          var contacts = (from c in companycontacts select new { contact_id = c.contact_id, contact_name = c.contact_name });            return Json(contacts, JsonRequestBehavior.AllowGet);      }  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »