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 window 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.
But it always recommended to place all the styles into the style sheet so that they can be used throughout the project. So remove the styles from the <Head> tag because we will create the styles in the style sheet.
- 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.
Now run the application and check .
Now over to you:
"If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned for more technical updates."
"If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned for more technical updates."
21 comments
Click here for commentsThat's a simple one but its really good. I was looking for it. I'm gonna change few of its code and will use it for my under construction website.. thanks for this post, it helped me alot.
Replythanks yar its good and very much comprehensive
ReplyThanks for your appreciation..stay tuned and stay connected
ReplyHey. i CopY these code but not worked....do u have solution...
Replythe code is completely working..i suggest you to read the article thoroughly and recheck your project and let me know.
Replythank....... my problem is solved
Replyit is always nice to hear that my article helped anyone..stay tuned and stay connected for more useful updates..
Replyone ... thousand examples. What about the behind code?
Replycheck the TargetControlID="btnlogin" and HyperLink ID="btnLogin", both have different name.. but after the changing code , again not working... actually im new in ajax.. i read ur instruction every thing... install ajax completely... i read instruction step by step.. thaks...
Replythe code is completely working..But if you are facing problems then send me your sample website on my email id lalit24rocks@gmail.com. I will check and make corrections if required.
Replyits good articale but here button click event would not fire..please help ..how to solve its
ReplyIt is working perfectly thank you very much....
Replyi am glad you enjoyed the article..keep reading and stay connected for more updates like this..:)
ReplyThanks!!
ReplyYour welcome ..keep reading for more useful updates like this..:)
Replynice
Replyvery nice articles and i request you to provide source code with the articles
Replyhey button click event is not working....please help
ReplyBecause there is no code behind the button click...this article just demonstrates how to open login form in popup window
Replynice and easy
ReplyThanks for your valuable feedback..stay connected and keep reading
ReplyIf you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..