In this article I will explain with an example, how to use ASP.Net AJAX ModalPopupExtender (Modal Popup) with UpdatePanel in C# and VB.Net.
Generally developers make a mistake by placing the ASP.Net AJAX ModalPopupExtender (Modal Popup) inside AJAX UpdatePanel and hence when Partial PostBack occurs the ASP.Net AJAX ModalPopupExtender (Modal Popup) closes.
 
Note: If you want to learn more about ASP.Net ModalPopupExtender and how to use it please refer my article Building Modal Popup using ASP.Net AJAX ModalPopupExtender Control.
 
HTML Markup
The HTML markup consists of an ASP.Net AJAX ModalPopupExtender control, and within its associated Panel an ASP.Net DropDownList, that is doing PostBack on its OnSelectedIndexChanged event.
The DropDownList is placed inside ASP.Net AJAX UpdatePanel to avoid full PostBack.
<cc1:ToolkitScriptManager runat="server">
</cc1:ToolkitScriptManager>
<asp:Button ID="btnShow" runat="server" Text="Show Modal Popup" />
<!-- ModalPopupExtender -->
<cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panel1" TargetControlID="btnShow"
    CancelControlID="btnClose" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="center" Style="display: none">
    <div style="height: 60px">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                Do you like this product?&nbsp;
                <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="OnSelectedIndexChanged">
                    <asp:ListItem Text="Please Select" Value="0"></asp:ListItem>
                    <asp:ListItem Text="Yes" Value="1"></asp:ListItem>
                    <asp:ListItem Text="No" Value="2"></asp:ListItem>
                </asp:DropDownList>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    <asp:Button ID="btnClose" runat="server" Text="Close" />
</asp:Panel>
<!-- ModalPopupExtender -->
 
 
DropDownList SelectedIndexChanged event
When an Item is selected in the DropDownList the following event handler is executed. Inside the following event handler, the Selected DropDownList item is displayed using JavaScript Alert Message Box.
C#
protected void OnSelectedIndexChanged(object sender, EventArgs e)
{
    string message = "Selected Item: " + DropDownList1.SelectedItem.Text;
    ScriptManager.RegisterClientScriptBlock((sender as Control), this.GetType(), "alert", "alert('" + message + "');", true);
}
 
VB.Net
Protected Sub OnSelectedIndexChanged(sender As Object, e As EventArgs)
    Dim message As String = "Selected Item: " & DropDownList1.SelectedItem.Text
    ScriptManager.RegisterClientScriptBlock(TryCast(sender, Control), Me.GetType(), "alert", "alert('" & message & "');", True)
End Sub
 
 
Screenshot
Using ASP.Net AJAX ModalPopupExtender (Modal Popup) with UpdatePanel in C# and VB.Net
 
 
Demo
View Demo
 
 
Downloads
Download Code