HTML Tags don't change on AsyncPostBack

Question

To regenerate the problem, please create a project in VS with the following codes:

This code inside the form tag of the MasterPage, and nothing for the code behind.

<asp:ScriptManager ID="scmManager" runat="server" AsyncPostBackTimeout="3600" />
<div>
    <div id="divCContents">
        <div id="divSideBar">
            <asp:contentplaceholder ID="cphMenus" runat="server" /> 
        </div>
        <div id="divMContents">
            <asp:contentplaceholder ID="cphPages" runat="server" />
        </div>
    </div>
</div>

This code inside the first asp:Content in TESTDefault.aspx

<asp:UpdatePanel ID="updCombos" runat="server">
    <ContentTemplate>
        <asp:DropDownList ID="DropDownList1" runat="server" Width="170px" AutoPostBack="true" 
                  OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
        </asp:DropDownList>
        <br />
        <br />
        <asp:DropDownList ID="DropDownList2" runat="server" Width="170px" AutoPostBack="true"
                          OnSelectedIndexChanged="DropDownList2_SelectedIndexChanged">
        </asp:DropDownList>
    </ContentTemplate>
</asp:UpdatePanel>

This code inside the second asp:Content in TESTDefault.aspx

<asp:UpdatePanel ID="updPanel" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:Panel ID="pnlTest" runat="server" />
    </ContentTemplate>
</asp:UpdatePanel>

This last code is in TESTDefault.aspx.cs

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        subInitiateFirstCombo();
    }
}

protected void subInitiateFirstCombo()
{
    for (int xI = 0; xI < 5; xI++)
    {
        ListItem itmlist = new ListItem();

        itmlist.Value = String.Format("Dep{0}", Convert.ToString(xI));
        itmlist.Text = String.Format("Department{0}", Convert.ToString(xI));
        DropDownList1.Items.Add(itmlist);
    }
    DropDownList1.SelectedIndex = 0;
    subInitiateSecondCombo();
}

protected void subInitiateSecondCombo()
{
    DropDownList2.Items.Clear();
    for (int xI = 0; xI < 5; xI++)
    {
        ListItem itmlist = new ListItem();

        itmlist.Value = String.Format("{0}_Ind{1}", (string)DropDownList1.SelectedItem.Value, Convert.ToString(xI));
        itmlist.Text = String.Format("{0}_Indicator{1}", (string)DropDownList1.SelectedItem.Text, Convert.ToString(xI));
        DropDownList2.Items.Add(itmlist);
    }
    DropDownList2.SelectedIndex = 0;
    CreateNewTable();
}

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
    subInitiateSecondCombo();
}

protected void DropDownList2_SelectedIndexChanged(object sender, EventArgs e)
{
    CreateNewTable();
}

protected void CreateNewTable()
{
    int intCellCount = DropDownList1.SelectedIndex + 2;

    pnlTest.Controls.Clear();
    updPanel.Update();
    using (Table tblTest = new Table())
    {
        tblTest.ID = (string)DropDownList2.SelectedItem.Value;
        tblTest.Attributes.Add("style", "border-collapse: collapse; margin-top: 100px;");

        for (int xI = 0; xI < 3; xI++)
        {
            using (TableRow tbrRow = new TableRow())
            {
                tbrRow.ID = String.Format("tbrRow{0}", Convert.ToString(xI));

                for (int xJ = 0; xJ < intCellCount; xJ++)
                {
                    using (TableCell tbcCell = new TableCell())
                    {
                        tbcCell.ID = String.Format("{0}_tbcCell{1}", tbrRow.ID, Convert.ToString(xJ));
                        tbcCell.Attributes.Add("style", String.Format("border: #808080 1px solid; " +
                                                                       "font-family: Verdana; " +
                                                                       "font-size: 8pt; " +
                                                                       "color: #3b5998; " +
                                                                       "text-align: center; " +
                                                                       "vertical-align: middle;"));
                        tbcCell.Width = Unit.Pixel(100);
                        tbcCell.Height = Unit.Pixel(80);
                        tbcCell.Text = String.Format("{0}", tblTest.ID);

                        tbrRow.Controls.Add(tbcCell);
                    }
                }
                tblTest.Controls.Add(tbrRow);
            }
        }
        pnlTest.Controls.Add(tblTest);
        updPanel.Update();
    }
}

Once you run the page, and view the source, you'll see the tags for the dynamically generated table. Now select another option from the DropDownLists to regenerate a different table, then view the source again, you will find the old table tags still there, and no sign of the new table (though it's showing on the screen).

The only way I found for it to work correctly is to force a full PostBack. Is there any other way ? the reason why I need it cause some javascripts will be running and its necessary to get the Table ID.

Hope my example is clear. Any hints will be really appreciated.

Cheers.

Answer 1

JavaScript should be able to access the new HTML fine. View source does not keep up-to-date with changes made by JavaScript to the HTML (Like the AJAX postback).

If you want to view such changes on the fly then Firebug will let you inspect the currently active DOM in firefox.