UpdatePanel not working when select dropdown value

Question

I am trying implement update of two div tag region after selected index change event of my aspx page, without refreshing the whole page. I am unable to do so.

Please see my code below.

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server" 
   UpdateMode="Conditional">
                          <ContentTemplate>

            <div class="content" style="padding-top: 0px">

                <!-- START CONTAINER FLUID -->


                        <div class=" container-fluid   container-fixed-lg">
                            <!-- BEGIN PlACE PAGE CONTENT HERE -->

                            <br />

                            <h2 style="color: #ffffff">Proj overview</h2>
                            <div class="row">

                                <div class="col-sm-2">

                                    <br />

                                    <div class="widget-9 card no-border bg-menu-light no-margin widget-loader-bar">
                                        <div class="full-height d-flex flex-column">
                                            <div class="card-header ">
                                                <div class="card-title text-black">
                                                    <span class="font-montserrat fs-11 all-caps text-white">View Users:  <i
                                                        class="fa fa-chevron-right"></i>
                                                    </span>
                                                </div>
                                            </div>

                                            <div class="p-l-20">
                                                <asp:DropDownList ID="drpUserList" runat="server" CssClass="col-middle col-md-11" data-placeholder="Select Country" data-init-plugin="select2" DataSourceID="dsUserList" DataTextField="Name" DataValueField="IdNo" AutoPostBack="true" OnSelectedIndexChanged="drpUserList_SelectedIndexChanged"></asp:DropDownList>

                                                <asp:SqlDataSource ID="dsUserList" runat="server" ConnectionString="<%$ ConnectionStrings:ValveConnectionString %>" SelectCommand="SELECT * FROM Temporary_Users"></asp:SqlDataSource>
                                            </div>
                                        </div>
                                    </div>
                                    <br />                                                                                
                                </div>
                                <div class="col-sm-10">
                                    <div id="container-grid1" style="min-width: 100%; height: 480px; margin: 0 auto"></div>
                                </div>
                            </div>
                            <%--<br />--%>


                            <br />
                            <div class="row">
                                <div class="col-sm-12">
                                    <h2>Proj completion</h2>
                                    <div id="container-grid2" style="height: 800px; min-width: 100%; margin: 0 auto"></div>
                                </div>
                            </div>

                            <!-- END PLACE PAGE CONTENT HERE -->
                        </div>

                       <!-- END CONTAINER FLUID -->
                        </div>

                    </ContentTemplate>
                    <Triggers>
               <asp:AsyncPostBackTrigger ControlID="drpUserList" EventName="SelectedIndexChanged" />
                    </Triggers>
                </asp:UpdatePanel>

I expect div container-grid1 and div container-grid2 to be reloaded and updated after I select a new value from the dropdown. But currently, each time I select a value, nothing displays on the div tag regions.

Grateful if I can be guided.

Answer 1

Your Trigger your ID doesn't match with the DropDown item ID:

<asp:DropDownList ID="drpUserList" runat="server" CssClass="col-middle col-md-11" data-placeholder="Select Country" data-init-plugin="select2" DataSourceID="dsUserList" DataTextField="Name" DataValueField="IdNo" AutoPostBack="true" OnSelectedIndexChanged="drpUserList_SelectedIndexChanged"></asp:DropDownList>

and in your Trigger:

<asp:AsyncPostBackTrigger ControlID="drpGroupList" EventName="SelectedIndexChanged" />
                    </Triggers>

Match them and hope it'll resolve your problem.

2nd: Create a Label inside "container-grid1" and in your dropdown selectedindexchange event assign the data in the form of string to the label.

<div id="container-grid1" style="min-width: 100%; height: 480px; margin: 0 auto">
<asp:Label ID="lblData" runat="server" />
</div>

UPDATED