Ajax ModalPopupExtender example to open login form in popup window in asp.net
Introduction: In this article i am
going to demonstrate with example How to use ModalPopupExtender control of Ajax in asp.net
to open the log in form in popup on click of link or button. Similarly you can open the registration form/sign up form,change password form or any kind of form in the pop up using ModalPopupExtender.
 |
| Click on image to enlarge |
Modal Popup Extender control can be used to show something in popup or we can also show modal dialog box because it prevents the user from interacting with the rest page. So whenever the login button is clicked then the log in form will be displayed in popup that will be in center of the screen(By default).It is now being widely used because of its eye catching features.
Below are some of the properties of the ModalPopupExtender control that i have used and can be set as per requirement.
- TargetControlID – Here set the Id of the element that triggers the modal popup e.g. In our case Id of the HyperLink control.
- PopupControlID – Here set the Id of the element to display as a modal popup e.g. in our example id of the Panle control.
- BackgroundCssClass – This is the CSS class to apply styles to the background when the modal popup is displayed.
- DropShadow – Set it to True if you want to automatically add a drop-shadow to the modal popup control.
- CancelControlID - The ID of the element that cancels the modal popup e.g. in our case Id of the Close button.
Implementation: Let's create an application to see it working.
- In the <Head> tag of the design page (.aspx) create the styles as:
<style type="text/css">
#loginform
{
min-width:200px;
height:110px;
background-color:#ffffff;
border:1px solid;
border-color:#555555;
padding:16px 16px;
border-radius:4px;
-webkit-box-shadow: 0px
1px 6px rgba(75, 31, 57, 0.8);
-moz-box-shadow:
0px
1px 6px rgba(75, 31, 57, 0.8);
box-shadow:
0px 1px 6px rgba(223, 88, 13, 0.8);
}
.modalBackground
{
background-color:#333333;
filter:alpha(opacity=80);
opacity:0.8;
}
.txt
{
color:#505050;
}
.redstar
{
color: #FF0000;
}
</style>
- So create a style sheet to give the styles to the Modal Popup Extender that we are going to create. So to add style sheet in the website go to website menu and click Add New item.. -> Select StyleSheet.css and leave the name as it is (i.e Stylesheet.css)
- In the Stylesheet.css paste the following and save the file
#loginform
{
min-width:200px;
height:110px;
background-color:#ffffff;
border:1px solid;
border-color:#555555;
padding:16px 16px;
border-radius:4px;
-webkit-box-shadow: 0px
1px 6px rgba(75, 31, 57, 0.8);
-moz-box-shadow:
0px
1px 6px rgba(75, 31, 57, 0.8);
box-shadow:
0px 1px 6px rgba(223, 88, 13, 0.8);
}
.modalBackground
{
background-color:#333333;
filter:alpha(opacity=80);
opacity:0.8;
}
.txt
{
color:#505050;
}
.redstar
{
color: #FF0000;
}
- In the <Head> tag of the design page(.aspx) set reference to style sheet. So in the <Head> tag paste the line <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
- Now In the <Form> tag of the design page (.aspx) places a ScriptManager control from the AJAX Extension category of the Visual Studio’s Toolbox. Place a HyperLink control, Two TextBox controls and a Two Button controls. Note I have also implemented RequiredFieldValidator validation control to avoid the chances of empty form submission. Also place ModalPopupExtender control from the AjaxControlToolkit. If you have not installed the AjaxControlToolkit then read the article How to install AjaxControlToolkit in Visual Studio.
<div>
<asp:ScriptManager ID="ScriptManager1"
runat="server">
</asp:ScriptManager>
<table>
<tr>
<td width="1100px"
height="600px"
align="center"
valign="middle"><asp:HyperLink ID="btnLogin" runat="server" NavigateUrl="#">Login</asp:HyperLink></td>
</tr>
</table>
<asp:ModalPopupExtender
ID="ModalPopupExtender1"
TargetControlID="btnlogin"
PopupControlID="popUpPanel"
CancelControlID="btnclose"
BackgroundCssClass="modalBackground"
DropShadow="true"
runat="server">
</asp:ModalPopupExtender>
<asp:Panel ID="popUpPanel"
runat="server">
<div id="loginform">
<table>
<tr>
<td><span class="txt">Username:
</span><span class="redstar">*</span></td>
<td><asp:TextBox ID="txtUserName"
runat="server"
placeholder="
UserName"
Width="186px"></asp:TextBox>
<asp:RequiredFieldValidator
ID="rfvUserName"
runat="server"
ErrorMessage="Please enter
User Name" ControlToValidate="txtUserName"
Display="Dynamic" ForeColor="Red"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td><span class="txt">Password:
<span class="redstar">*</span> </span></td><td><asp:TextBox ID="txtPwd" runat="server"
TextMode="Password"
placeholder="
Password" Width="186px"></asp:TextBox>
<asp:RequiredFieldValidator
ID="RequiredFieldValidator1"
runat="server"
ControlToValidate="txtPwd"
Display="Dynamic"
ErrorMessage="Please
enter Password" ForeColor="Red" SetFocusOnError="True"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td></td><td><asp:Button ID="btnSubmit"
runat="server"
Text="Login"
/><asp:Button ID="btnclose"
runat="server"
Text="Close"
CausesValidation="false"
/></td>
</tr>
<tr>
<td> </td><td><span class="txt"> New User? Click Here For</span> <a href="#">Sign Up</a><b></b></td>
</tr>
</table>
</div>
</asp:Panel>
</div>
Note: Have you noticed the line <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %> added automatically next to the very first line in the design page. Actually it registers the Ajax Control on placing ModalPopupExtender control on design page.
No comments:
Post a Comment