Nesting UpdatePanel Controls : UpdatePanel « Ajax « ASP.NET Tutorial






<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
    <form id="form1" runat="server">
    <div>

    <asp:ScriptManager
        id="sm1"
        Runat="server" />
    Page Time: <%= DateTime.Now.ToString("T") %>
    <br />
    <asp:DropDownList
        id="ddlProduct"
        DataSourceID="srcProducts"
        DataValueField="Id"
        DataTextField="Title"
        AutoPostBack="true"
        Runat="server" />
    <asp:SqlDataSource
        id="srcProducts"
        ConnectionString='<%$ ConnectionStrings:con %>'
        SelectCommand="SELECT Id, Title FROM Product"
        Runat="server" />

    <br /><br />

    <asp:UpdatePanel ID="upOuter" UpdateMode="Conditional" runat="server">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="ddlProduct" />
    </Triggers>
    <ContentTemplate>

    Outer UpdatePanel Time: <%= DateTime.Now.ToString("T") %>
    <br />

    <asp:FormView
        id="frmProduct"
        DataSourceID="srcProduct"
        Runat="server">
        <ItemTemplate>
        <fieldset>
    <legend>Product</legend>
    Title: <%# Eval("Title") %>
    <br />
    Director: <%# Eval("Director") %>

    <asp:UpdatePanel ID="upInner" runat="server">
    <ContentTemplate>
    <asp:ListView
        id="lstProductComments"
        DataSourceID="srcProductComments"
        InsertItemPosition="FirstItem"
        Runat="server">
        <LayoutTemplate>
            <fieldset>
            <legend>Comments</legend>
            Inner UpdatePanel Time: <%= DateTime.Now.ToString("T") %>
            <div id="itemContainer" runat="server">
            </div>
        </fieldset>
        </LayoutTemplate>
        <ItemTemplate>
            <div class="comment">
            <%# Eval("Comment") %>
            </div>
        </ItemTemplate>
        <InsertItemTemplate>
        <asp:Label
            id="lblComment"
            Text="Comment:"
            AssociatedControlID="txtComment"
            Runat="server" />
        <br />
        <asp:TextBox
            id="txtComment"
            Text='<%# Bind("Comment") %>'
            TextMode="MultiLine"
            Columns="40"
            Rows="3"
            Runat="server" />
        <br />
        <asp:Button
            id="btnInsert"
            Text="Add Comment"
            CommandName="Insert"
            Runat="server" />
        </InsertItemTemplate>
        </asp:ListView>
        </ContentTemplate>
        </asp:UpdatePanel>
        <asp:SqlDataSource
            id="srcProductComments"
            ConnectionString='<%$ ConnectionStrings:con %>'
            SelectCommand="SELECT Id, Comment
                FROM ProductComment
                WHERE ProductId=@ProductId"
            InsertCommand="INSERT ProductComment (Comment,ProductId)
                VALUES (@Comment,@ProductId)"
            Runat="server">
            <SelectParameters>
                <asp:ControlParameter Name="ProductId" ControlID="ddlProduct" />
            </SelectParameters>
            <InsertParameters>
                <asp:ControlParameter Name="ProductId" ControlID="ddlProduct" />
            </InsertParameters>
        </asp:SqlDataSource>
        </fieldset>
        </ItemTemplate>
    </asp:FormView>
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:SqlDataSource
        id="srcProduct"
        ConnectionString='<%$ ConnectionStrings:con %>'
        SelectCommand="SELECT Id, Title, Director
            FROM Product
            WHERE Id=@Id"
        Runat="server">
        <SelectParameters>
            <asp:ControlParameter Name="Id" ControlID="ddlProduct" />
        </SelectParameters>
    </asp:SqlDataSource>

    </div>
    </form>
</body>
</html>








20.11.UpdatePanel
20.11.1.Using the UpdatePanel Control
20.11.2.Entering customer feedback into an Ajax-enabled form.
20.11.3.Specifying UpdatePanel Triggers
20.11.4.Nesting UpdatePanel Controls
20.11.5.Updating UpdatePanels Programmatically
20.11.6.UpdatePanels and JavaScript
20.11.7.Show Alert UpdatePanel
20.11.8.UpdatePanel Server-Side Page Execution Lifecycle
20.11.9.UpdatePanel Client-Side Page Execution Lifecycle
20.11.10.UpdatePanel Custom Progress