• Now Online : 35
  • admin@codemyne.net

Introduction

The ModalPopupextender displays a page content to the user in a "modal" manner which prevents the user from interacting with the rest of the page. The modal content can be any hierarchy of controls and is displayed above a background. It can have a custom style applied to it.

In this article the same modelpopup is used to display a message box to the end user. For this a user control is used. Because the user control can be used as a message box in as many pages the developer wishes to.

Start a new web application and add a user control. Now define a property which can be used as a parameter. It passes messgae string to the user control (Message box).

The two methods in user control are used to show/hide the modelpopup. The complete example is given below

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Reusable-Messagebox-using-Ajax-Modelpopupextender.aspx.cs" Inherits="Reusable_Messagebox_using_Ajax_Modelpopupextender" %>
<%@ Register Src="~/wucPopupMessageBox.ascx" TagName="PopUpMsg" TagPrefix="Msg" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager ID="scripts" runat="server" ScriptMode="Release" 
EnableSecureHistoryState="false" EnablePageMethods="True" CombineScripts="true"> 
</ajaxToolkit:ToolkitScriptManager>
<div>
        Username: <asp:TextBox ID="txtUname" runat="server"></asp:TextBox> 
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</div>
<Msg:PopUpMsg ID="PopupMsg" runat="server" />
</form>
</body>
</html>                            
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Reusable_Messagebox_using_Ajax_Modelpopupextender : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        if (txtUname.Text.Trim() == string.Empty)
        {
            PopupMsg.Message = "Enter Username or Email";
            PopupMsg.ShowPopUp();
            return;
        }
    }
}
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="wucPopupMessageBox.ascx.cs" Inherits="wucPopupMessageBox" %>
<link href="css/ModelPopup.css" rel="stylesheet" type="text/css" />
<asp:LinkButton ID="LinkFake1" runat="server"></asp:LinkButton>
<asp:Panel ID="PanelMsg" runat="server" CssClass="modalPopupMsg" Style="display: none;">
<div class="popupHeader" style="text-align:left">
<span>
Message <span style="float: right">
<asp:ImageButton ID="imgPopupClose" runat="server" ImageUrl="~/images/close.png" /></span></span>
</div>
<div class="popupBody" style="text-align:left">
<table width="100%">       
<tr>
<td style="width: 60px" valign="middle" align="center">
<asp:Image ID="imgInfo" runat="server" ImageUrl="~/Images/Info-48x48.png" />
</td>
<td valign="middle" align="left">
<asp:Label ID="lblMsg" runat="server" Text=""></asp:Label>
</td>
</tr>
<tr>
<td colspan="2" align="right">
<asp:Button ID="btnOk" runat="server" Text="Ok" OnClick="btnOk_Click" />
</td>
</tr>
</table>
      
</div>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="PopupMsg" runat="server" DropShadow="false" PopupControlID="PanelMsg" 
CancelControlID="imgPopupClose" TargetControlID="LinkFake1" BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class wucPopupMessageBox : System.Web.UI.UserControl
{
    public string Message { get; set; }
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    public void ShowPopUp()
    {
        lblMsg.Text = Message;
        PopupMsg.Show();
    }
    public void btnOk_Click(object sender, EventArgs e)
    {
        PopupMsg.Hide();
    }
}

Comments/Suggestions are invited. Happy coding......!

Comments Post a Comment

suvi 2/13/2012 (IST) / Reply

uh bjmh jhkjh hguiy

trye 5/25/2012 (IST) / Reply

af

sathismoorthykumar 7/11/2012 (IST) / Reply

i want some support

Ken Lin 7/19/2012 (IST) / Reply

Requirement

ali 8/3/2012 (IST) / Reply

sd

a 8/9/2012 (IST) / Reply

v

Ram 10/11/2012 (IST) / Reply

sdg

naresh 10/13/2012 (IST) / Reply

help

xxxxxxxccccccccccccccccccccccccccccccc 12/12/2012 (IST) / Reply

ewwdfwef

vinoth 12/28/2012 (IST) / Reply

messagebox

ss 3/15/2013 (IST) / Reply

asdasd

alpesh 5/16/2013 (IST) / Reply

fdfd

uuuuu 8/16/2013 (IST) / Reply

hhhhhh

rtc 9/6/2013 (IST) / Reply

y