asked on

Refreshing a dropdown List Based on Selection

I have an MVC C# application that requires a user to select a client from a drop down list "add_Client_ID". After the user makes a selection, I need to refresh the "add_Product_ID" drop down list with the filtered information. What is the best method for this? Can someone help.

Drop Down Code -----------------------------------------

                <div class="row mg-t-20">
                    <label class="col-sm-5 form-control-label">Client:</label>
                    <div class="col-sm-6 mg-t-10 mg-sm-t-0">
                        <select name="Client_ID" id="add_Client_ID" class="form-control" required>
                            <option value="0">Select a Client</option>
                            @{
                                foreach (Client client in Model.Clients)
                                {
                                    <option value="@client.Client_ID">@client.Client_Name</option>
                                }
                            }
                        </select>
                    </div>
                    <label class="col-sm-1 form-control-label"><span class="tx-danger">*</span></label>
                </div>

                <div class="row mg-t-20">
                    <label class="col-sm-5 form-control-label">Product:</label>
                    <div class="col-sm-6 mg-t-10 mg-sm-t-0">
                        <select name="Product_ID" id="add_Product_ID" class="form-control" disabled required>
                            <option value="0">Select a Product</option>
                            @{
                                foreach (Product product in Model.Products)
                                {
                                    <option value="@product.Product_ID">@product.Product_Name</option>
                                }
                            }
                        </select>
                    </div>
                    <label class="col-sm-1 form-control-label"><span class="tx-danger">*</span></label>
                </div>

Open in new window

Controller --------------------------------------------------------------

     [HttpGet]
        public ActionResult AddTimeInfo()
        {
            VM_AddTimeInfo addTimeInfo = new VM_AddTimeInfo
            {
                Clients = clientDao.GetClients(),
                ProjectInfos = projectInfoDao.GetProjectInfos(),
            };
            return PartialView("~/Views/Shared/Modals/TimeInfo/_AddTimeInfoPartial.cshtml", addTimeInfo);
        }

Open in new window

ViewModel ----------------------

    public class VM_AddTimeInfo
    {
        public List<Client> Clients { get; set; }
        public List<Product> Products { get; set; }                    
    }

}

Open in new window

Zakaria Acharki

Hi Stacey, What is the content of the partial view _AddTimeInfoPartial.cshtml?

leakim971

I'm assuming you can use jQuery (to write less code) :

// we're listening for change event on the add_Client dropdown
$("#add_Client_ID").change(function() {
    // we get the selected client id
    var client_id = $(this).val();
    // we sent silently a request to the server side using Ajax
    // the server must send us back the list of products for the given client id
    // something like : [{"Value":"76","Text":"Banana"},{"Value":"70","Text":"Apple"},{"Value":"3","Text":"Orange"}]
    $.getJSON("/somepath/to/products/client" + client_id, function(json) {
        // we're going to use an array to create and store all option
        var products = [];
        // we loop over the json object sent by the server (banana, apple,...)
        for(var i=0;i<json.length;i++)
            // for each item of the json array, we create an option and store it in products array
            products.push("<option value='" + json.Value + "'>" + json.Text + "</option>";
        // we merge the array to create a string with all options            
        products = products.join("");
        // we append replace the options in the product dropdown by the new options 
        $("#add_Product_ID").html(products);
    });
});

Open in new window

Zakaria Acharki

I will go for returning an HTML compiled list from your partial view then update the one you've in your DOM with the content of the new updated list.

So your partial will return something like :

<select>
   <option> A </option>
   <option> B </option>
<select>

Open in new window

Then inside the change event of your add_Client_ID dropdown add :

$.get('path_to_AddTimeInfo_action', function(new_list){
    $('#add_Product_ID').html($(new_list).html());
});

Open in new window

If you need to pass the selected client id to the controller action you could pass it like :

$.get('path_to_AddTimeInfo_action', {client_id: $(this).val()}, function(new_list){
    $('#add_Product_ID').html($(new_list).html());
});

Open in new window

This question needs an answer!

Become an EE member today

7 DAY FREE TRIAL

Members can start a 7-Day Free trial then enjoy unlimited access to the platform.

View membership options

Learn why we charge membership fees

We get it - no one likes a content blocker. Take one extra minute and find out why we block content.