Powered by Blogger.

Friday, February 14, 2014

ModalPopupExtender example in Ajax in Asp.Net

In this post we will discuss how to use ModalPopupExtender in Ajax in Asp.Net. Also you can check out my previous posts on:

- Add user to group in active directory using C#.Net

- Data access block of Microsoft enterprise library 6.0 using stored procedure

- Rename table name or column name in sql server 2008

Before reading further you can check out this article to install AjaxControlToolkit through Nuget.

In this example whenever a user click on a button, a modal dialogbox will open.

First drag and drop a Ajax ModalPopupExtender from the toolbox. If the Ajax Extender controls are not appearing in the toolbox then check this article to add to the toolbox.

<ajaxtoolkit:modalpopupextender id="ModalPopupExtender1" runat="server" backgroundcssclass="modalBackground"

            popupcontrolid="pnlPopupMsg" targetcontrolid="btnClick"> </ajaxtoolkit:modalpopupextender>

Here PopupControlID will be the id of the pop up to display, generally it will be the panel id which will open.

TargetControlID: Is the ID of the button or linkbutton on click of which you want to open the dialogbox.

BackgroundCssClass: Is the css class that will make the background that will make the background grey.

Below is the full code with css.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default14.aspx.cs" Inherits="Default14" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>ModalPopupExtender example in Ajax in Asp.Net</title>
    <style type="text/css">
        .modalBackground {
            background-color: Gray;
            filter: alpha(opacity=50);
            opacity: 0.7;
        }
        .modalPopup {
    background-color: #FFFFFF;
    border: 3px solid #CCC;
     padding-top: 10px;
    padding-left: 10px;
    width: 300px;
    height: 140px;
    clear: both;
    position: absolute
    margin-top: 0;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></ajaxToolkit:ToolkitScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BackgroundCssClass="modalBackground" PopupControlID="pnlPopupMsg"
                        TargetControlID="btnClick">
                    </ajaxToolkit:ModalPopupExtender>
                    <asp:Panel ID="pnlPopupMsg" runat="server" CssClass="modalPopup">
                        <asp:Label ID="lblMessage" runat="server" Text="Here is the message which will come!!!"></asp:Label><br />
                        <br />
                        <asp:Button ID="btnYes" runat="server" Text="Yes"  />
                        <asp:Button ID="btnNo" runat="server" Text="NO"  />
                    </asp:Panel>
                    <asp:Button ID="btnClick" runat="server" Text="Click here to see pop up" />
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>
</body>
</html>


After this when you click on the button, the dialog box will appear like below:


0 comments

Post a Comment