javascript - 选择下拉值时 UpdatePanel 不工作

Question

我正在尝试在我的 aspx 页面的选定索引更改事件之后实现两个 div 标记区域的更新，而不刷新整个页面。我做不到。

请看下面我的代码。

<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>

我希望在从下拉列表中选择新值后重新加载和更新 div container-grid1 和 div container-grid2。但是目前，每次我选择一个值时，div 标记区域上不会显示任何内容。

如果能得到指导，我将不胜感激。

Answer 1

您的触发器 ID 与 DropDown 项目 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>

在你的触发器中:

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

匹配它们并希望它能解决您的问题。

第二:在“container-grid1”中创建一个标签，并在您的下拉列表 selectedindexchange 事件中将字符串形式的数据分配给标签。

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

已更新