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