ASP.NET - Prevent Page Refresh with ModalPopupExtender

Question

Hello,

I have an ASP.NET page with 10 dynamically generated LinkButton elements. When a user clicks one of these LinkButton elements, I want to display its Text in a modal dialog. The user can then change the Text by entering a value into a TextBox. My code for this looks like the following:

<asp:ScriptManager ID="theScriptManager" runat="server" />
<asp:UpdatePanel ID="myUpdatePanel" runat="server">
    <ContentTemplate>
        <asp:Table ID="myTable" runat="server" OnInit="myTable_Init" CellPadding="10" CellSpacing="10" />
    </ContentTemplate>
</asp:UpdatePanel>

<asp:LinkButton ID="testLinkButton" runat="server" />
<cc1:ModalPopupExtender ID="myPopupExtender" runat="server" TargetControlID="testLinkButton"
    OkControlID="okButton" PopupControlID="myPanel" />

<asp:Panel ID="myPanel" runat="server" Style="display: none;">
    <table border="1" cellpadding="0" cellspacing="0"><tr><td>
        <table border="0" cellpadding="0" cellspacing="0" style="width: 300px;">
            <tr><td colspan="2" style="background-color: Blue; font-weight: bold; color: White;">
                &nbsp;Test
            </td></tr>
            <tr>
                <td>You clicked <asp:TextBox ID="numTextBox" runat="server" MaxLength="3" />.</td>
                <td align="right" style="padding-top: 5px; padding-bottom: 5px;">
                    <asp:Button ID="okButton" runat="server" Text="OK" OnClick="okButton_Click" />&nbsp;
                </td>
            </tr>
        </table>
    </td></tr></table>
</asp:Panel>

My code-behind for this ASP.NET code looks like the following:

private LinkButton selectedLinkButton = null;

protected void Page_Load(object sender, EventArgs e)
{}

protected void myTable_Init(object sender, EventArgs e)
{
        TableRow row = new TableRow();
        for (int i = 1; i < 11; i++)
        {
            LinkButton linkButton = new LinkButton();
            linkButton.Text = i.ToString();
            linkButton.Click += new EventHandler(linkButton_Click);
            linkButton.CommandArgument = i.ToString();

            AddLinkButtonToRow(linkButton, row);
        }
        myTable.Rows.Add(row);

}

protected void linkButton_Click(object sender, EventArgs e)
{
    selectedLinkButton = (LinkButton)(sender);
    numTextBox.Text = selectedLinkButton.CommandArgument;

    myPopupExtender.Show();
}

protected void okButton_Click(object sender, EventArgs e)
{
    if (selectedLinkButton != null)
    {
        selectedLinkButton.Text = numTextBox.Text.Trim();
    }
}

private void AddLinkButtonToRow(LinkButton linkButton, TableRow row)
{
    TableCell cell = new TableCell();
    cell.Controls.Add(linkButton);
    row.Cells.Add(cell);
}

My problem is, I want to reduce the number of Postbacks. To accomplish this, I decided to use the ASP.NET AJAX toolkit. Unfortunately, I am not having any success with updating the LinkButton Text once a user clicks "OK" in the dialog. In addition, I seem to still be getting postbacks. How am I using this incorrectly?

Thank you,

Answer 1

By default, the UpdatePanel will only trigger refreshes when objects within it have their various events fired.

You need to either move your ModalPopupExtender and code within the UpdatePanel, or assign a Update Trigger that is attached to your Ok button within your modal popup.

If you're still not getting a proper refresh, you may need to add a myUpdatePanel.Update() command to your Ok button code to refresh the panel after you've provided the content for your new LinkButton.