Jun
27
2009

How to use ASP.NET AJAX UpdatePanel in ModalPopup

This design not only shows you how to use ASP.NET UpdatePanel inside ModalPopup, it also shows a way of having multiple dynamically created controls that act as triggers to show ModalPopup, and the content of ModalPopup will change depending on the control that triggered the Popup. Then user can perform an action that does partial update inside the ModalPopup. You will only need one ModalPopupExtender control by using this design.

The following diagram shows how the controls are structured in the .aspx page

UpdatePanel_In_ModalPopup_Design

As you can see here, we have an UpdatePanel inside the ModalPopup, and the ModalPopup is in the another UpdatePanel along with other dynamic controls on page.

The next diagram shows the actual look of the page.

UpdatePanel_In_ModalPopup_

Red, Blue, and Yellow are the ASP.NET LinkButton controls that are created dynamically during the Page_Load() event. When the user click on one of these LinkButton controls, a ModalPopup shows up, with a DropDownList control and two Button Controls inside it.

The DropDownList control in ModalPopup shows the list of products for the specific colour (LinkButton) that user has clicked.

UpdatePanel_In_ModalPopup_DDL

The server-side event fired and updates the label control text, after the “Choose” button has been clicked.

UpdatePanel_In_ModalPopup_DDL_PartialUpdate

 


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ModalPopupExample.aspx.cs" Inherits="ModalPopupExample" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!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">
<head runat="server">
    <title></title>
    <style type="text/css">
        .modalBackground {
            background-color:#333333;
            filter:alpha(opacity=70);
            opacity:0.7;
        }
        .modalPopup {
            background-color:#FFFFFF;
            border-width:1px;
            border-style:solid;
            border-color:#CCCCCC;
            padding:1px;
            width:300px;
            Height:200px;
        }   
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:UpdatePanel ID="udpOutterUpdatePanel" runat="server">
             <ContentTemplate>


                <div id="divControlContainer" runat="server"></div>
                <input id="dummy" type="button" style="display: none" runat="server" />


                <ajaxToolkit:ModalPopupExtender runat="server"
                        ID="mpeThePopup"
                        TargetControlID="dummy"
                        PopupControlID="pnlModalPopUpPanel"
                        BackgroundCssClass="modalBackground"                       
                        DropShadow="true"/>



                 <asp:Panel ID="pnlModalPopUpPanel" runat="server" CssClass="modalPopup">


                    <asp:UpdatePanel ID="udpInnerUpdatePanel" runat="Server" UpdateMode="Conditional">
                        <ContentTemplate>
                            <p>
                                <asp:DropDownList ID="ddlProducts" runat="server"></asp:DropDownList>                               
                                &nbsp;
                                <asp:Button ID="btnChooseProduct" runat="server" Text="Choose" onclick="btnChooseProduct_Click"/>
                                &nbsp;
                                <asp:Button ID="btnCancelModalPopup" runat="server" Text="Cancel" />
                            </P>
                            <p>
                                <asp:Label ID="lblText" runat="server"></asp:Label><br />
                            </p>
                        </ContentTemplate>      


                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="btnChooseProduct" EventName="Click" />
                        </Triggers>


                    </asp:UpdatePanel>
                 </asp:Panel>


            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

In the code above it shows the ModalPopExtender that “pnlModalPopUpPanel” is attached to has a hidden TargetControl (“dummy” button). This is because the popup will be shown via server in code behind by calling the ModalPopupExtender show() method.

public partial class ModalPopupExample : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {       
            LinkButton lbtnRed = new LinkButton();
            LinkButton lbtnBlue = new LinkButton();
            LinkButton lbtnYellow = new LinkButton();

            lbtnRed.ID = lbtnRed.Text = "Red";
            lbtnBlue.ID = lbtnBlue.Text = "Blue";
            lbtnYellow.ID = lbtnYellow.Text = "Yellow";

            lbtnRed.Click+=new EventHandler(lbtn_Click);
            lbtnBlue.Click+=new EventHandler(lbtn_Click);
            lbtnYellow.Click+=new EventHandler(lbtn_Click);

            divControlContainer.Controls.Add(lbtnRed);
            divControlContainer.Controls.Add(new LiteralControl("<br/>"));
            divControlContainer.Controls.Add(lbtnBlue);
            divControlContainer.Controls.Add(new LiteralControl("<br/>"));
            divControlContainer.Controls.Add(lbtnYellow);       
            divControlContainer.Controls.Add(new LiteralControl("<br/>"));
    }

    protected void lbtn_Click(object sender, EventArgs e)
    {
        //Get Event Sender Control
        LinkButton lbtnSender = (LinkButton)sender;

        //Clear Previous Saved Values
        ddlProducts.Items.Clear();
        lblText.Text = "";

        //Populate DropDownList Items
        for(int i=1; i<10; i++)
        {
            string productName = lbtnSender.ID + " Product " + i.ToString();
            ddlProducts.Items.Add(new ListItem(productName, productName));
        }       
        //Show ModalPopup
        mpeThePopup.Show();
    }

    protected void btnChooseProduct_Click(object sender, EventArgs e)
    {
        //Changed Label Control Text
        lblText.Text = "You have selected " + ddlProducts.SelectedItem.Text;
        //Show ModalPopup
        mpeThePopup.Show();
    }
}

Three LinkButton controls are created In the Page_Load() method, and they are all attached to the same Click event handler lbtn_Click(). lbtn_Click() will check who the sender is when executing, and it loads the DropDownList “ddlProducts” with corresponding products.

btnChooseProduct_Click() handles the btnChooseProduct click event  inside the ModalPopup popup, then this click event triggers partial update to the update panel inside the ModalPopup popup.

Nothing is new here, but hopefully it will help in some way.

blog comments powered by Disqus