Asp.NET 在不重新加载整个列表视图的情况下更新列表视图中的行 [item] 中的下拉列表

Question

我有一个 listView，每个项目 [行] 中有两个下拉列表 [ddls]，当我 select 从第一个下拉列表中选择一个选项时，第二个 ddl 会重新加载不同的内容。

我目前将整个列表视图包裹在 updatePanel 中。我尝试为这两个 <td> [列] 放置 updatePanel，但它似乎不是那样编译的，我如何使用 JS 和 JQuery?

实现此目的

Answer 1

对第二个 DropDownList 使用 UpdatePanel 并将第一个 DropDownList 设置为触发器似乎有效并且不会刷新整个页面：

<asp:GridView ID="GridView1" runat="server" >
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:DropDownList ID="ddl1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddl1_SelectedIndexChanged" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:UpdatePanel runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                        <asp:DropDownList ID="ddl2" runat="server" />
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="ddl1" EventName="SelectedIndexChanged" />
                    </Triggers>
                </asp:UpdatePanel>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

第一个列表的事件处理程序如下所示：

protected void ddl1_SelectedIndexChanged(object sender, EventArgs e)
{
    DropDownList ddl1 = sender as DropDownList;
    DropDownList ddl2 = ddl1.NamingContainer.FindControl("ddl2") as DropDownList;

    // Modify the second DropDownList
    ...
}

更新

如果您更喜欢使用 ListView 而不是 GridView，则可以使用此标记获得相同的结果：

<asp:ListView ID="ListView1" runat="server" >
    <LayoutTemplate>
        <table>
            <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
        </table>
    </LayoutTemplate>
    <ItemTemplate>
        <tr>
            <td>
                <asp:DropDownList ID="ddl1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddl1_SelectedIndexChanged" />
            </td>
            <td>
                <asp:UpdatePanel runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                        <asp:DropDownList ID="ddl2" runat="server" />
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="ddl1" EventName="SelectedIndexChanged" />
                    </Triggers>
                </asp:UpdatePanel>
            </td>
        </tr>
    </ItemTemplate>
</asp:ListView>

Asp.NET 在不重新加载整个列表视图的情况下更新列表视图中的行 [item] 中的下拉列表

Asp.NET Update dropdownlist in a row [item] in listview without reloading the whole listview

c#

asp.net

listview

asp.net-ajax