Salah Sh Salah Sh - 2 months ago 17
C# Question

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

I have a listView with two dropdownlists [ddls] in each item [row], when I select an option from the first dropdown list, the second ddl reloads different content.

I currently have the whole listview wrapped in an

updatePanel
. I tried putting the updatePanel for those two
<td>
[column], but it seems not compile that way, how can I achieve this using JS and JQuery?

Answer

Using an UpdatePanel for the second DropDownList and setting the first DropDownList as a trigger seems to work and does not refresh the whole page:

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

The event handler for the first list would look like this:

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


UPDATE

If you prefer using a ListView instead of a GridView, you can obtain the equivalent result with this markup:

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