Ajax – ASP.NET – Prevent Page Refresh with ModalPopupExtender

ajaxasp.netmodalpopupextender

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,

Best Answer

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.

Related Topic