CODEWITHSUNDEEP
c#asp.netwebforms
Stephen85
Stephen85

Reputation: 270

Update DropdownList dynamically within a Modal

There is an issue I have not been able to solve which is where there is an 'Add Item' button on a form. When clicked this opens a Modal window which contains two dropdown lists. The first dropdown list is prepopulated with a set of items and based on this selection, the 2nd dropdown box ideally needs to update with its own set of items.

This is the first Dropdown List which contains the Type

<asp:DropDownList ID="DDLType" CssClass="form-control" runat="server" OnSelectedIndexChanged="LoadSubTypes" AutoPostBack="true">
    <asp:ListItem Value="Automobile">Automobile</asp:ListItem>
    <asp:ListItem Value="Aeroplane">Aeroplane</asp:ListItem>
    <asp:ListItem Value="Boat">Boat</asp:ListItem>
</asp:DropDownList>

This is the second Dropdown List which currently sits empty until a selection is made from the first dropdown list.

<asp:DropDownList ID="DDLSubType" CssClass="form-control" runat="server">
</asp:DropDownList>

With the first DDL where there is an OnSelectedIndexChange, this is the code behind. 

protected void LoadSubTypes(object sender, EventArgs e) {
    string strSubTypeList = "";
    switch (DDLType.SelectedValue)
    {
        case "Automobile":
            strSubTypeList = "Car#Motorbike#Scooter";
            break;
        case "Aeroplane":
            strSubTypeList = "Commercial#Private";
            break;
        case "Boat":
            strSubTypeList = "Boat#Jetski";
            break;
    }

    StringBuilder sbSubTypes = new StringBuilder();
    Char delimiter = '#';
    String[] substrings = strSubTypeList.Split(delimiter);
    foreach (var substring in substrings)
    {
        DDLSubType.DataTextField = substring;
        DDLSubType.DataValueField = substring;
        DDLSubType.DataBind();
    } }

Normally this type of setup works well for me, but the only difference this time is I have them loaded into a Modal. What happens when I make a selection from the DDL is that the modal closes and causes the postback. This resets any values that were then changed dynamically.

My ideal behavior here is that when a selection is made on the first DDL, the 2nd DDL updates within the modal and do not close.

Any help would be greatly appreciated!

Upvotes: 1

Views: 892

Answers (1)

Ahmed Anwar
Ahmed Anwar

Reputation: 47

I think you are saying that when I select an item from a dropdown list, then its relevent options will be shown on the next dropdown. You will have to use jquery ajax(it will be more easy). When an item is selected from a dropdown, its value will be passed using ajax, which will without refreshing your page get your dropdown. e.g.

<select class="form-control" id="Departments" ><option value="">-Select Department-</option>
    <option value="17">No Department</option>
    <option value="19">Men</option>
    <option value="1018">Danial</option>
    </select>

JavaScript with jquery:

$("#Departments").change(function () {
    var deptId = $(this).select("option:selected").val();

    $.ajax(
    {
        url: "/Categories/M_Level2/" + deptId
    }).done(function (categories) 
{
    $("#category").html(categories);                             
});

In url, Categories is the controller and M_Level2 is the action that is getting a value deptId and on that basis returning a PartialView and then adding it on #category

Upvotes: 1

Related Questions