In this article I will explain with an example, how to use AJAX ModalPopupExtender (Modal Popup) with UpdatePanel in ASP.Net using C# and VB.Net.
 
 

Installing and Registering AjaxControlToolkit package using Nuget

In order to install and register AJAX Control Toolkit library using Nuget, please refer my article Install AjaxControlToolkit library using Nuget.
 
 

HTML Markup

The HTML Markup consists of following controls:
ScriptManager – For enabling ASP.Net AJAX.
Button – For triggering the Modal popup to open.
ModalPopupExtender – For displaying Modal popup.
The AJAX ModalPopupExtender has been assigned with following properties:
PopupControlID – The control which will be displayed as Modal popup.
TargetControlID – The control which opens the Modal popup.
CancelControlID – The control which closes the Modal popup.
Note: For more details on using the AJAX ModalPopupExtender, please refer my article Building Modal Popup using ASP.Net AJAX ModalPopupExtender Control.
 
Panel – For displaying content of the Modal popup.
UpdatePanel – For refreshing the Web Page partially.
DropDownList – For capturing user input.
The DropDownList has been assigned with an OnSelectedIndexChanged event handler.
Note: The DropDownList is placed inside AJAX UpdatePanel to avoid PostBack for control outside of the it.
 
Button – For closing the Modal popup dialog box.
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Button ID="btnShow" runat="server" Text="Show Modal Popup" /> 
<!-- ModalPopupExtender -->
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="Panel1" TargetControlID="btnShow" 
    CancelControlID="btnClose" BackgroundCssClass="modalBackground"> 
</ajaxToolkit: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="ddlSelect" 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 -->
 
 

Displaying selected option of the DropDownList in C# and VB.Net

When the DropDownList selected item is changed, the selected option is display using JavaScript alert Message Box which is registered using RegisterClientScriptBlock function of the ScriptManager class.
C#
protected void OnSelectedIndexChanged(object  sender,EventArgs e)
{
    string message = "Selected Item: " + ddlSelect.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: " & ddlSelect.SelectedItem.Text
    ScriptManager.RegisterClientScriptBlock(TryCast(sender, Control), Me.GetType(), "alert", "alert('" & message & "');", True)
End Sub
 
 

Modal Popup CSS

The following CSS is used for styling the ASP.Net AJAX ModalPopupExtender.
<style type="text/css">
    body { font-family: Arial; font-size: 10pt; }
    .modalBackground { background-color: Black; filter: alpha(opacity=90); opacity: 0.8; }
    .modalPopup { background-color: #fff; border: 3px solid #ccc; padding: 10px; width: 300px; }
</style>
 
 

Screenshot

Using ASP.Net AJAX ModalPopupExtender (Modal Popup) with UpdatePanel in C# and VB.Net
 
 

Demo

View Demo
 
 

Downloads

Download Code