Browsing all articles in Ajax
Feb
4
1

Ajax Toolkit: Model Popup extender

Author Aravind Kumar    Category Ajax     Tags , , , ,

Popup dialog box with AJAX toolkit

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="PopUp.ascx.cs" Inherits="MyControls_PopUp" %>
 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<style type="text/css">
.modalBackground{background:#000; opacity:0.4; filter:alpha(opacity=40)}
</style>
<asp:Button id="btnShowPopup" runat="server" style="display:none" />
<asp:ModalPopupExtender ID="mpe" runat="server" TargetControlID="btnShowPopup"  PopupControlID="pnl"
BackgroundCssClass="modalBackground"  DropShadow="true"  CancelControlID="ibClose"  PopupDragHandleControlID="PnlHead"/>
<asp:Panel ID="pnl" runat="server">
<asp:Panel ID="PnlHead" runat="server">
<div>
<div style="float:left; padding:0px; margin:0px; padding-top:10px; padding-left:10px; width:80%; color:#FFF; font-size:14px; font-weight:bold ">
<asp:Label ID="lHeader" runat="server"></asp:Label>
</div>
<asp:ImageButton Width="30px" style="float:right; padding:3px" ID="ibClose" runat="server" ImageUrl="~/App_Themes/Default/images/close.png" />
<div style="clear:both"></div>
</div>
</asp:Panel>
<div>
<div style="text-align:center">
<br />
<asp:Label ID="lMessage" runat="server"></asp:Label>
<br />
<br />
<asp:Button ID="bOK" ValidationGroup="POPUP" runat="server" OnClick="btnOk_Click" Text="OK" />
</div>
</div>
<div style="clear:both"></div>
</asp:Panel>

The following is the c# code for this control

Popup.cs   
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class MyControls_PopUp : System.Web.UI.UserControl
{
    public string Header { get; set; }
    public string Message { get; set; }
    public string CssClass_Header { get; set; }
    public string CssClass_Message { get; set; }
    public string CssClass_Background { get; set; }
    public event EventHandler OKClick;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (CssClass_Background != string.Empty)
            mpe.BackgroundCssClass = CssClass_Background;
        if (CssClass_Header != string.Empty)
            PnlHead.CssClass = CssClass_Header;
        if (CssClass_Message != string.Empty)
            pnl.CssClass = CssClass_Message;
        lHeader.Text = Header;
        lMessage.Text = Message;
    }

    public void Show(string Header, string Message)
    {
        lHeader.Text = Header;
        lMessage.Text = Message;
        mpe.Show();
    }

    public void Hide()
    {
        mpe.Hide();
    }

    public void btnOk_Click(object sender, EventArgs e)
    {
        if (OKClick != null)
            OKClick(this, EventArgs.Empty);
        mpe.Hide();
    }

}

using this popup in the code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<%@ Register src="MyControls/PopUp.ascx" tagname="Popup" tagprefix="uc" %>
<!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>
<style type="text/css">
.modalBackground{background:#000; opacity:0.4; filter:alpha(opacity=40)}
.popupPanel{background:#FFF; border:2px solid #de562b; width:600px; height:200px;}
.popupPanelHead{background:#de562b; border-bottom:2px solid #de562b; width:600px; height:40px;}
</style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"> </asp:ToolkitScriptManager>
    <div>
        <asp:Button ID="btn" runat="server" Text="ShowPopup" OnClick="btn_Click" />
        <uc:Popup ID="mpc" runat="server" OnOKClick="mpe_OKClick" CssClass_Background="modalBackground" CssClass_Header="popupPanelHead" CssClass_Message="popupPanel" />
    </div>
    </form>
</body>
</html>

Default2.cs code behind file

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Default2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void mpe_OKClick(object sender, EventArgs e)
    {
        Response.Write("ok Button Clicked");
    }

    protected void btn_Click(object sender, EventArgs e)
    {
        mpc.Show("This is Header", "this is Message Body");
    }
}
Follow us on Twitter! Follow us on Twitter!
FoxSparrow Tweets

Categories