.Net Helper: Create a Modal Popup using the Ajax Modal Popup Extender

Hello All,

Here is the sample application for creating a MODAL POPUP for this I am going to use the Ajax ModalPopupExtender control. Before using this you must ensure that the Ajax control tool kit in install in the machine Or make a reference for the AjaxControlToolkit.dll in the application.

Make use of a ScriptManager control in the page is mandatory , so make sure you have used the Script manager control inside the page, If you are using a MASTERPAGE place this Script Manger tag inside the master page. it will be like..

<asp:ScriptManager ID="ScriptManager1" runat="server">
asp:ScriptManager>

Now place the controls inside a PANEL or a DIV which you want to display like the modal pop up and you can also set the background of the panel or the DIV. for example I am using the Login controls as a PopUp

<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Enter userName:-" ForeColor="White">asp:Label>
td>
<td>
<asp:TextBox ID="txtname" runat="server" Text="">asp:TextBox>
td>
tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text="Enter Password:-" ForeColor="White" >asp:Label>
td>
<td>
<asp:TextBox ID="txtPass" runat="server" Text="">asp:TextBox>
td>
tr>

In order to make use of the Ajax control what you have to do is make reference of the Ajax DLL in the application. And the page in which you are going to use the control REGISTER the control like this, to provide a control prefix name.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxtoolkit" %>

After that you need to make use of the ModalPopupExtender control like this...

<ajaxtoolkit:modalpopupextender backgroundcssclass="modalBackground" dropshadow="False"
okcontrolid="btnOk" cancelcontrolid="btnClose" runat="server" popupcontrolid="Panel1"
id="ModalPopupExtender1" targetcontrolid="btnPOPUP" />

Here Every Property has Its Mening..

1. backgroundcssclass -- Defines the CSS used for the popup.

2. dropshadow -- Used to set the Shadow Effect, the popup area will become like a Shadow

3. okcontrolid -- Used to set the Ok control or submit control for popup

4. cancelcontrolid -- Used to set the Cancel control for popup

5. popupcontrolid -- Defines the Panle or DIV which will be display like popup.

6. id -- Define the Id of the extender control

7. targetcontrolid -- This defines the control by whihc the pop up will be invoked.

I hope you understood the property and how to use the control, Below are the actual file for the sample application..

Master Page File.

lt;%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">

<style type="text/css">
.modalBackground {
background-color:#414141;
filter:alpha(opacity=70);
opacity:0.7;
}
</style>
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div class="page">
<div class="header">
<div class="title">
<h1>
My ASP.NET Application
</h1>
</div>
<div class="loginDisplay">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
[ <a href="~/Account/Login.aspx" ID="HeadLoginStatus" runat="server">Log In</a> ]
</AnonymousTemplate>
<LoggedInTemplate>
Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
[ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ]
</LoggedInTemplate>
</asp:LoginView>
</div>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
</Items>
</asp:Menu>
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
</div>
<div class="footer">

</div>
</form>
</body>
</html>

The Default.aspx file code.

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxtoolkit" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:Button ID="btnPOPUP" runat="server" Text="Display PopUp" />
<ajaxtoolkit:modalpopupextender backgroundcssclass="modalBackground" dropshadow="False"
okcontrolid="btnOk" cancelcontrolid="btnClose" runat="server" popupcontrolid="Panel1"
id="ModalPopupExtender1" targetcontrolid="btnPOPUP" />
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Style="display: none;">
<table>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Enter userName:-" ForeColor="White"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtname" runat="server" Text=""></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text="Enter Password:-" ForeColor="White" ></asp:Label>
</td>
<td>
<asp:TextBox ID="txtPass" runat="server" Text=""></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnOk" runat="server" Text="Ok" />
</td>
<td>
<asp:Button ID="btnClose" runat="server" Text="Close Me" />
</td>
</tr>
</table>
</asp:Panel>
</asp:Content>

Now please take a look of the output of the application.

First Screen

Second Screen

Please Decode the files using a HTML DECODER (http://centricle.com/tools/html-entities/) to get the actual file. Hope you have like this article, Please feel free to post your ideas and the comments.

Yours,

Anil Kumar Pandey

.Net Helper

Pages

Friday, September 3, 2010

Create a Modal Popup using the Ajax Modal Popup Extender

No comments:

Post a Comment

Kontera

Kontera