Create a PopUp Dialog with ModalPopupExtender AjaxControlToolkit

Introduction

Simple dialog on web page can be created using client script / javascript functions like alert and confirm. window.open(args) function used to open an Url as dialog or new window.

Asp.Net Ajax provides ModalPopupExtender Control to create modal popup dialog. Basically the dialog is a panel control that associated with ModalPopupExtender. User have to click a button, hyperlink or controls to show this popup. We can make better dialog look and feel to the panel.

We need to add reference to AjaxControlToolkit.dll to build an ajax web page with all controls in AjaxControlToolkit. Also we have to register AjaxControlToolkit assembly, namespace and tagprefix.

Basic Example

Here’s a basic example of ModalPopupExtender:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="ModalPopup.aspx.vb" Inherits="ModalPopup.ModalPopup1" %>
<%@ 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>
    <link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ajaxToolkit:ToolkitScriptManager ID="tlkt1" runat="server"></ajaxToolkit:ToolkitScriptManager>
        <ajaxToolkit:ModalPopupExtender ID="mdlpopup" BackgroundCssClass="modalbackground" runat="server" TargetControlID="btnShow" 
     PopupControlID="pnl" OkControlID="btnok" Y="100" ></ajaxToolkit:ModalPopupExtender>
        <asp:Panel ID="pnl" runat="server" BorderColor="ActiveBorder" CssClass="modalpopup" BorderStyle="Solid" BorderWidth="2px">
            <asp:Label ID="lbl" runat="server">This is a modal popup dialog</asp:Label><br />
            <asp:Button ID="btnok" runat="server" Text="OK" />
        </asp:Panel>
        <asp:Button ID="btnShow" runat="server" Text="Show Dialog" />
    </div>
    </form>
</body>
</html>

StyeleSheet1.css:

.modalbackground 
{
    background-color:Gray;
    opacity: 0.5;
    filter:Alpha(opacity=50);
}

.modalpopup 
{
    background-color:White;
	padding:6px 6px 6px 6px;
}

As you can see at above code, we registered assembly, namespace and tagprefix reference to ajaxToolkit controls.
We have to include ToolkitScriptManager in order to use AjaxControlToolkit. TargetControlID at ModalPopupExtender tag referred to control that triggers panel as modal popup dialog to be showed.
PopupControlID referred to the panel it self. The panel as popup dialog can have any Asp.Net controls. If this page is loaded the panel is hidden but when user click btnShow button then panel will show as popup dialog.

Change Property Value Programmatically

As a default we cannot change the controls inside panel properties value because they had been setted. This panel will only show if user click a TargetControl. But we can do alter it by setting TargetControlID to hidden control and set properties value programmatically before panel is showed.
Here’s the aspx code:

<ajaxToolkit:ToolkitScriptManager ID="toolkitscript1" runat="server" ></ajaxToolkit:ToolkitScriptManager>
    
    <ajaxToolkit:ModalPopupExtender ID="mdlpopup" BackgroundCssClass="modalbackground" runat="server" TargetControlID="HiddenTargetShow" 
     PopupControlID="pnl" OkControlID="btnok" Y="100" ></ajaxToolkit:ModalPopupExtender>
       
    <asp:Panel ID="pnl" runat="server" CssClass="modalpopup" BorderColor="ActiveBorder" BorderStyle="Solid" BorderWidth="3px">
        <asp:Label ID="lbl" Text="#" runat="server"></asp:Label>
        <br />
        <asp:Button ID="btnok" Text="Ok" runat="server" />
    </asp:Panel>
    <fieldset title="Contact Us" runat="server" id="fldset" style="width:300px">
    <legend>Contact Us</legend>
    <table>
        <tr><td>Name:</td><td><asp:TextBox ID="sender" runat="server"></asp:TextBox></td></tr>
        <tr><td>Email:</td><td><asp:TextBox ID="email" runat="server"></asp:TextBox></td></tr>
        <tr><td>Message:</td><td><asp:TextBox ID="message" runat="server" TextMode="MultiLine" Height="100"></asp:TextBox></td></tr>
    </table>
     <asp:Button ID="btnshow" runat="server" Text="Send" />
     <asp:HiddenField ID="HiddenTargetShow" runat="server" />
    </fieldset>
    

The TargetControlID is Hidden control and Label’s Text inside panel will change programatically.
The code behind aspx page:

Protected Sub btnshow_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnshow.Click
        If Me.sender.Text = "" Or Me.email.Text = "" Or Me.message.Text = "" Then
            lbl.Text = "Please input necessary fields"
        Else
            lbl.Text = "Your Message has been sent"
        End If
        mdlpopup.Show()
    End Sub

btnshow button have mdlpopup.Show() to show the panel popup dialog. mdlpopup is an ID of ModalPopupExtender. The Label’s Text change programmatically based on some condition.

One disadvantage of change props values programmatically is that modal popup dialog will show after PostBack process or the page reload first then come the popup dialog.
To overcome this we need to have UpdatePanel control and ContentTemplate Tag as parent of ModalPopupExtender and panel.
Brief explanation about UpdatePanel control is available at my previous post about Introduction of Asp. Net Ajax.
We edit the code above to become:

<ajaxToolkit:ToolkitScriptManager ID="toolkitscript1" runat="server" ></ajaxToolkit:ToolkitScriptManager>
    <asp:UpdatePanel ID="updpanel" runat="server">
    <ContentTemplate>
    <ajaxToolkit:ModalPopupExtender ID="mdlpopup" runat="server" BackgroundCssClass="modalbackground" TargetControlID="HiddenTargetShow" 
     PopupControlID="pnl" OkControlID="btnok" Y="100" ></ajaxToolkit:ModalPopupExtender>
       
    <asp:Panel ID="pnl" runat="server" CssClass="modalpopup" BorderColor="ActiveBorder" BorderStyle="Solid" BorderWidth="3px">
        <asp:Label ID="lbl" Text="#" runat="server"></asp:Label>
        <br />
        <asp:Button ID="btnok" Text="Ok" runat="server" />
    </asp:Panel>
    <fieldset title="Contact Us" runat="server" id="fldset" style="width:300px">
    <legend>Contact Us</legend>
    <table>
        <tr><td>Name:</td><td><asp:TextBox ID="sender" runat="server"></asp:TextBox></td></tr>
        <tr><td>Email:</td><td><asp:TextBox ID="email" runat="server"></asp:TextBox></td></tr>
        <tr><td>Message:</td><td><asp:TextBox ID="message" runat="server" TextMode="MultiLine" Height="100"></asp:TextBox></td></tr>
    </table>
     <asp:Button ID="btnshow" runat="server" Text="Send" />
     <asp:HiddenField ID="HiddenTargetShow" runat="server" />
    </fieldset>
    </ContentTemplate>
    </asp:UpdatePanel>

Containing A Form in ModalPopup

We can make another example of ModalPopup containing a form. In this case newsletter free registration. The modal popup will appear on page load.
User can choose to register or not after that the message result popup appear.

<h2>Some Header</h2>
    A Web Content
   
    <ajaxToolkit:ToolkitScriptManager ID="toolkitscript1" runat="server" ></ajaxToolkit:ToolkitScriptManager>
    <asp:UpdatePanel ID="updpanel" runat="server">
    <ContentTemplate>

    <ajaxToolkit:ModalPopupExtender ID="mdlpopup" runat="server" TargetControlID="HiddenTargetShow" 
     PopupControlID="pnl" CancelControlID="btncancel" BackgroundCssClass="modalbackground"></ajaxToolkit:ModalPopupExtender>
      <asp:HiddenField ID="HiddenTargetShow" runat="server" />
      <asp:Panel ID="pnl" runat="server" CssClass="modalpopup">
        <fieldset title="Register To Newsletter">
            <legend>Free Registration</legend>
            <div id="tblreg" runat="server" visible="true">
            <table>
                <tr><td>Name:</td><td><asp:TextBox ID="txname" runat="server"></asp:TextBox></td></tr>
                <tr><td>Email:</td><td><asp:TextBox ID="txemail" runat="server"></asp:TextBox></td></tr>
                <tr><td colspan="2"><asp:Button ID="btnreg" runat="server" Text="Register" /> &nbsp;
                <asp:Button ID="btncancel" runat="server" Text="No, Thank You" /></td></tr>
            </table>
            
            </div>           
            
        </fieldset>
    </asp:Panel>
    
    <asp:HiddenField ID="hidden_popupmsg" runat="server" />
    <ajaxToolkit:ModalPopupExtender ID="mdlpopupmsg" runat="server" BackgroundCssClass="modalbackground" TargetControlID="hidden_popupmsg" 
     PopupControlID="pnlprogress" OkControlID="btnok" ></ajaxToolkit:ModalPopupExtender>
     <asp:Panel ID="pnlprogress" runat="server" CssClass="modalpopup">
         <div id="donereg" runat="server" visible="true">
            <asp:Label ID="lblinfo" runat="server" Text="#"></asp:Label><br />
            <asp:Button ID="btnok" Text="OK" runat="server" />
            </div>
     </asp:Panel>
    </ContentTemplate>
    </asp:UpdatePanel>

Here we have two ModalPopupExtender, one to show registration form and second to just show Message after registration process.
Code behind aspx file:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Page.IsPostBack = False Then
            mdlpopup.Show()
        End If
    End Sub
    Protected Sub btnreg_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnreg.Click

        mdlpopup.Hide()
		
	'Put Database process here
		
        lblinfo.Text = txname.Text & " (" & txemail.Text & ") has been registered"
        mdlpopupmsg.Show()
    End Sub

At btnreq click event we hide first dialog and show second dialog. We can put database process and send notification email in before showing message modalpopup.

Regards,
Agung Gugiaji

Advertisements

14 responses to “Create a PopUp Dialog with ModalPopupExtender AjaxControlToolkit

  1. Pingback: Upload File With Asp .Net AsyncFileUpload Ajax Control Inside ModalPopupExtender | Enlighten Application Developer Journals

  2. Pingback: Open an Url on ModalPopupExtender And Alternative Approaches | Enlighten Application Developer Journals

  3. thanks

  4. Pretty! This has been an incredibly wonderful post.
    Many thanks for supplying these details.

  5. Everything is very open with a very clear explanation of the issues.

    It was truly informative. Your website is very useful. Thank you for sharing!

  6. I just like the valuable info you supply to your articles.
    I’ll bookmark your weblog and take a look at once more right here frequently. I am reasonably sure I will learn many new stuff right right here! Best of luck for the next!

  7. You ought to take part in a contest for one of the finest sites on
    the web. I am going to recommend this website!

  8. Everyone loves what you guys are usually up too.
    This sort of clever work and exposure! Keep up the good works guys I’ve included you guys to my own blogroll.

  9. I am really impressed with your writing
    skills as well as with the layout on your blog. Is this a paid theme or did you customize it yourself?
    Anyway keep up the nice quality writing, it’s rare to see a nice blog like this one nowadays.

  10. Ok, enough said. This was probably the best article I have read on Create a PopUp Dialog with ModalPopupExtender
    AjaxControlToolkit | Enlighten Application Developer Journals
    today and I often do research daily on the subject of free tarot readings online.
    Thanks for sharing with the world. Cheers!

  11. Greetings! I’ve been following your weblog for a long time now and finally got the bravery to go ahead and give you a shout out from Huffman Texas! Just wanted to say keep up the excellent job!

  12. Hi, I do think this is an excellent website. I stumbledupon it 😉 I
    may come back once again since I saved as a favorite it. Money
    and freedom is the best way to change, may you be
    rich and continue to help others.

  13. I blog quite often and I seriously appreciate your content.
    Your article has truly peaked my interest. I will take a note of your blog and keep checking for new information about
    once per week. I subscribed to your Feed as well.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s