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?

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

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