Tuesday, January 3, 2012

How to show Modal Dialog Box with Asp.Net Ajax

With Microsoft® ASP.NET AJAX, dialog boxes are especially important for displaying context-sensitive information without a page reload or new page. It is therefore important to devise a different implementation of dialog boxes that are as effective as modal popups but hassle-free for users.
The ModalPopup extender takes the markup generated by a server-side ASP.NET panel and shows or hides it as the user clicks on an associated HTML element. Initially styled as hidden, the dialog box is downloaded onto the client when the page is loaded and then shown or hidden on demand.
The following example show Modal Dialog popup to edit the customer information as below :

Modal Dialog with Asp.net Ajax
First of all, you need to add AjaxControlToolKit.dll to References like look:









Here is Stylesheet and Javascript to add <head> tag.
<style type="text/css">
    .modalPopup
    {
        background-color: #ffffdd;
        border-width: 3px;
        border-style: solid;
        border-color: Gray;
        padding: 3px;
        width: 350px;
    }
    .modalBackground
    {
        background-color: Gray;
        filter: alpha(opacity=70);
        opacity: 0.7;
    }
</style>
<script type="text/javascript">
    function ok(sender, e) {
        $find('ModalPopupExtender1').hide();
        __doPostBack('editBox_OK', e);
    }
    function cancel(sender, e) {
        $find('ModalPopupExtender1').hide();
    }
    function pageLoad(sender, args) {
        //Note that the OnKeyPress event handler will not work unless you register it with the Microsoft AJAX Library. The best place to run this registration code is the pageLoad function, like so:
        
        $addHandler(document, "keydown", onKeyDown);
        $find("ModalPopupExtender1").add_showing(onModalShowing);
    }
    function onModalShowing(sender, args) {
        $get("pnlEditCustomer").style.backgroundColor = "yellow";
    }
    function onKeyDown(args) {
        //Closing the Popup Using the Esc Key
        if (args.keyCode == Sys.UI.Key.esc) {
            $find('ModalPopupExtender1').hide();
        }
    } 
</script>
Here is server controls in .aspx page.
<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"/>
    <div>
        <!--Using Partial Rendering to Update the Customer View -->
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <table>
                    <tr>
                        <td><b>Customer ID:</b></td>
                        <td><asp:Label runat="server" ID="lblCustomerID" Text="C00001"/></td>
                    </tr>
                    <tr>
                        <td><b>Company Name:</b></td>
                        <td><asp:Label runat="server" ID="lblCompanyName" Text="Eastern Connection"/></td>
                    </tr>
                    <tr>
                        <td><b>Contact Name:</b></td>
                        <td><asp:Label runat="server" ID="lblContactName" Text="Ann Devon"/></td>
                    </tr>
                    <tr>
                        <td><b>Country:</b></td>   
                        <td><asp:Label runat="server" ID="lblCountry" Text="Germany"/></td>
                    </tr>
                     <tr>
                        <td>
                            <asp:Button runat="server" ID="btnEditText" Text="Edit text" OnClick="btnEditText_Click" />
                        </td>
                        <td>
                        </td>
                    </tr>
                </table>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="editBox_OK"/>
            </Triggers>
        </asp:UpdatePanel>
    </div>
    <div>
        <asp:Button runat="server" ID="hiddenTargetControlForModalPopup" Style="display: none" />
        <asp:UpdatePanel runat="server" ID="DialogBoxUpdatePanel" UpdateMode="Conditional">
            <ContentTemplate>
                
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    <div>
         <!-- Dialog box:: Edit customer info -->
         <!--The Content of a Modal Popup Supports Partial Rendering -->
        <asp:Panel ID="pnlEditCustomer" runat="server" CssClass="modalPopup" style="display:block;">
            <div style="margin:10px">
            <asp:UpdatePanel runat="server" ID="ModalPanel1" RenderMode="Inline" UpdateMode="Conditional"> 
                <ContentTemplate>
                <table>            
                    <tr>
                        <td><b>Customer ID:</b></td>
                        <td><asp:Label runat="server" id="editCustomerID" />
                        </td>
                    </tr>            
                    <tr>
                        <td><b>Company Name:</b></td>
                        <td><asp:TextBox runat="server" id="editTxtCompanyName" /></td>
                    </tr>
                    <tr>
                        <td><b>Contact Name:</b></td>
                        <td><asp:TextBox runat="server" id="editTxtContactName" /></td>
                    </tr>
                    <tr>
                        <td><b>Country:</b></td>
                        <td><asp:TextBox runat="server" id="editTxtCountry" /></td>
                    </tr>
                </table>   
                <hr />
                <asp:Button ID="btnApply" runat="server" Text="Apply" width="50px" OnClick="btnApply_Click"/>
                </ContentTemplate>
                </asp:UpdatePanel>              
                <asp:Button ID="editBox_OK" runat="server" Text="OK" width="50px" 
                    onclick="editBox_OK_Click"/>
                <asp:Button ID="editBox_Cancel" runat="server" Text="Cancel" width="50px" />
            </div>
        </asp:Panel>
    </div>
    <div>
        <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server"  
            TargetControlID="hiddenTargetControlForModalPopup"
            PopupControlID="pnlEditCustomer"
            BackgroundCssClass="modalBackground"
            DropShadow="false"
            OkControlID="editBox_OK"
            OnOkScript="ok()"
            OnCancelScript="cancel()"
            CancelControlID="editBox_Cancel" /> 
    </div>
</form>
Add the following to code-behind.
protected void btnEditText_Click(object sender, EventArgs e)
{
    // Initialize the controls in the panel used as the UI of the dialog box
    InitDialog();

    // The panel markup has been served already to the page. To edit it, 
    // you need to a) wrap the panel's content in an UpdatePanel region and 
    // b) update the panel once you made any changes
    ModalPanel1.Update();

    // Order to inject the script to show the dialog as the page loads up 
    // in the browser.
    ModalPopupExtender1.Show();
}
protected void InitDialog()
{
    editCustomerID.Text = lblCustomerID.Text;
    editTxtCompanyName.Text = lblCompanyName.Text;
    editTxtContactName.Text = lblContactName.Text;
    editTxtCountry.Text = lblCountry.Text;
    SetFocus("editTxtCompanyName");
}
protected void btnApply_Click(object sender, EventArgs e)
{
    // Edit the server controls in the modal panel. Because the 
    // call occurs over a partial rendering call, any updates
    // will be automatically reflected by the client UI.
    if (editTxtCountry.Text == "Germany")
        editTxtCountry.Text = "Cuba";
    else
        editTxtCountry.Text = "USA";
}
protected void editBox_OK_Click(object sender, EventArgs e)
{
    // Save to the database
    // Refresh the UI
    lblCompanyName.Text = editTxtCompanyName.Text;
    lblContactName.Text = editTxtContactName.Text;
    lblCountry.Text = editTxtCountry.Text;
} 
That's it. Develope on the trend!

Reference : http://msdn.microsoft.com/en-us/magazine/cc164247.aspx

ModalPopup Demonstration : 
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/ModalPopup/ModalPopup.aspx

Note : Don't forget to add EnableEventValidation="false" to the 'page' directive.

5 comments:

  1. Can you please show an example on how to send and email using modal pop in an mvc application.

    ReplyDelete
    Replies
    1. Hi, I try to post later since I am very beginner at MVC right now. Thank you.

      Delete
  2. I can't get this to update the aspx page after the Ok or Apply button is pressed.

    ReplyDelete
  3. Hi, I tested it with IE-7, FireFox-18.0, Chrome -Version 24.0.1312.52 m and it is ok. You can send me your project if you still have any error.

    ReplyDelete
  4. Please Sir...ModalPopup Demonstration link is not working...

    ReplyDelete