How to add items to a DropDownList without reloading page

Question

There are 2 DropDownLists in my page 1.ddlVehicleBrand 2.ddlVehicleModel

I added vehicle brands to the ddlVehicleBrand from the database in Page_Load event. no problem with that. But if i select Toyota in the ddlVehicleBrand list, all the Toyota models should be loaded into the ddlVehicleModel list without reloading the whole page.

I used the SelectedIndexChanged event of ddlVehicleBrand. But when i changed the selected index, the whole page is refreshed and the selected index of ddlVehicleBrand will be the first value.

My code as follows

<body>
<form id="form1" runat="server" >
<div>
   <asp:DropDownList ID="ddlVehicleBrand" runat="server" onselectedindexchanged="ddlVehicleBrand_SelectedIndexChanged" AutoPostBack="true"/>
    <br />
    <br />
    <asp:DropDownList ID="ddlVehicleModel" runat="server" />
    <br />
    <br />
    <br />
</div>
</form>

When i changed the selected index of first DropDownList, the Page_Load event is automatically called. How to load particular models for each brand without refreshing whole page. Thanks in advance

This is a well known scenario, called "cascading dropdowns". [This](https://www.google.ie/search?client=ubuntu&channel=fs&q=asp.net+cascading+dropdown&ie=utf-8&oe=utf-8&gws_rd=cr&ei=hx4NVuW2DIP3aL2botgM) should get you started — Andrei, Oct 01 '15 at 11:53
You'll have to use ajax to achieve this. There are lots of examples of how to do this e.g. [stackoverflow.com/questions/5216990/populating-a-drop-down-list-using-ajax](http://stackoverflow.com/questions/5216990/populating-a-drop-down-list-using-ajax) — markpsmith, Oct 01 '15 at 11:56
check it http://www.ajaxcontroltoolkit.com/CascadingDropDown/CascadingDropDown.aspx — shreesha, Oct 01 '15 at 12:14

score 2 · Accepted Answer · answered Oct 01 '15 at 12:19

make sure that you are binding VehicleBrands inside !postback in pageload

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        load brands here...
    }
}

and make use of update panel to avoid page refreshing. Go through this for your reference UpdatePanel Example

sebastian · Answer 2 · 2015-10-01T13:34:40.827

1

You should wrap everything inside the Update Panel it will stop the page hitting autopostback.

<body>
<form id="form1" runat="server" >
<div>
  <asp:UpdatePanel>
  <ContentTemplate>
   <asp:DropDownList ID="ddlVehicleBrand" runat="server" onselectedindexchanged="ddlVehicleBrand_SelectedIndexChanged" AutoPostBack="true"/>
    <br />
    <br />
    <asp:DropDownList ID="ddlVehicleModel" runat="server" />
    <br />
    <br />
    <br />
              
  </ContentTemplate>
</asp:UpdatePanel>
</div>
</form>

Let me know if it helps :)

Sorry I should have pointed out that you need to assign an ID and runat attribute like this:

 <asp:UpdatePanel ID="UpdatePanel1" runat="server">

edited Oct 01 '15 at 13:34

answered Oct 01 '15 at 11:56

sebastian

111
1
5

I applied your code but it is not working. it run as my previous code. whole page is reloading. `` line is underlined and it is showing a warning as `Warning 1 Validation (ASP.Net): Element 'asp:UpdatePanel' is missing required attribute 'runat'.` – JayNaz Oct 01 '15 at 12:22
Sorry I should have pointed out that you need to assign an ID and runat attribute like this: – sebastian Oct 01 '15 at 13:33

How to add items to a DropDownList without reloading page

2 Answers2