Tutorial :Update dropdown values



Question:

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?


Solution:1

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:

Model:

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

Controller:

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


Solution:2

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
Previous
Next Post »