Click here to Skip to main content
11,482,039 members (65,484 online)
Click here to Skip to main content

Login/SignUp Screen Using AJAX ModalPopupExtender

, 3 Apr 2008 CPOL 220.6K 12.5K 89
Rate this:
Please Sign up or sign in to vote.
How to implement a login/signup screen using the AJAX ModalPopupExtender.

LoginModalPopup

SignupScreen.JPG

Introduction

I want to take this opportunity to introduce a sample application which shows how to use the ModalPopupExtender for logging and signup for any ASP.NET web application. In this quick demonstration, I am going to show you how we can implement a modal dialog box using AJAX in ASP.NET. A modal dialog box (formally called a ModalPopupExtender) is extremely essential in today’s applications as it avoids redirecting to a new page just to login or signup users. A simple example is shown here illustrates how to implement the same.

Background

I was looking around to see samples of how to use the ModalPopupExtender for login and signup for my site...but I could not find any. So finally, I ended up creating this login sample application so it might be useful for everyone.

Using the Code

To start with, let's try to understand the ModalPopupExtender.

ModalPopup Description

The ModalPopupExtender allows a page to display 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 that can have a custom style applied to it. When displayed, only the modal content can be interacted with; clicking on the rest of the page does nothing. When the user is done interacting with the modal content, a click of an OK/Cancel control dismisses the modal content and optionally runs a custom script.

ModalPopup Properties

The control is initialized with this code. The display on the modal popup element is set to None to avoid a flicker on render. The italic properties are optional:

<ajaxToolkit:ModalPopupExtender ID="MPE" runat="server"
    TargetControlID="LinkButton1"
    PopupControlID="Panel1"
    BackgroundCssClass="modalBackground" 
    DropShadow="true" 
    OkControlID="OkButton" 
    OnOkScript="onOk()"
    CancelControlID="CancelButton" 
    PopupDragHandleControlID="Panel3" />
  • TargetControlID - The ID of the element that activates the modal popup
  • PopupControlID - The ID of the element to display as a modal popup
  • BackgroundCssClass - The CSS class to apply to the background when the modal popup is displayed
  • DropShadow - Set to True to automatically add a drop-shadow to the modal popup
  • OkControlID - The ID of the element that dismisses the modal popup
  • OnOkScript - Script to run when the modal popup is dismissed with the OkControlID
  • CancelControlID - The ID of the element that cancels the modal popup
  • OnCancelScript - Script to run when the modal popup is dismissed with the CancelControlID
  • PopupDragHandleControlID - The ID of the embedded element that contains the popup header/title which will be used as a drag handle
  • X - The X coordinate of the top/left corner of the modal popup (the popup will be centered horizontally if not specified)
  • Y - The Y coordinate of the top/left corner of the modal popup (the popup will be centered vertically if not specified)
  • RepositionMode - The setting that determines if the popup needs to be repositioned when the window is resized or scrolled

This shows how you define the ModalPopupExtender for login and signup screen buttons:

<modalpopupextender id="ModalPopupExtenderLogin" 
  runat="server" targetcontrolid="Loginlnk" 
  popupcontrolid="LoginPanel" backgroundcssclass="modalBackground" 
  dropshadow="true" okcontrolid="LoginBtn" önokscript="ok()" 
  cancelcontrolid="CancelBtn" />

<modalpopupextender id="ModalPopupExtenderSignup" runat="server" 
  targetcontrolid="Signuplnk" popupcontrolid="SignupPanel" 
  backgroundcssclass="modalBackground" dropshadow="true" 
  okcontrolid="JoinBtn" önokscript="okJoin()" 
  cancelcontrolid="CancelBtn2" />

Installation

Download the AJAX Toolkit Version 1.0.20229 from this link: http://www.codeplex.com/AtlasControlToolkit/Release/ProjectReleases.aspx?ReleaseId=11121.

Also, you need ASP.NET AJAX Extensions 1.0 for ASP.NET 2.0...you can get it from this link: http://www.asp.net/ajax/downloads/.

Once you have all those, open the sample project in VS2005, and it should work.

History

  • April 3rd 2008. Initial version published.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Pramod S Kumar
Software Developer (Senior) NYCEDC
United States United States
Pramod has been a software developer for more than 6 years now mostly working on Ajax ASP.NET web applications.

Comments and Discussions

 
Question5 Stars For It Pin
Member 1068504313-Dec-14 5:56
memberMember 1068504313-Dec-14 5:56 
Generalajax login form Pin
Binu19851-Jul-14 2:23
memberBinu19851-Jul-14 2:23 
Questionwhich tag prifix will use in loginmodalpopup extender? Pin
tanu rathi18-Feb-13 22:27
membertanu rathi18-Feb-13 22:27 
GeneralMy vote of 5 Pin
csharpbd10-Nov-12 12:40
membercsharpbd10-Nov-12 12:40 
Questionhow to add a login modal popup on click of a image button and then redirecting it to a new page consisting of menus.. Pin
check6.manoZr29-Aug-12 21:58
membercheck6.manoZr29-Aug-12 21:58 
I m trying to build a web application in which i want the user to login through a click of imagebutton on my homepage which will generate a modal popup login page and after login, it will redirect it to a new page which'll hav menus like visitor records, in/out transport records, business delegates records, reports etc.. pls tell me about button controls used here..help me out pls.. ..thanks in advance..
GeneralMy vote of 5 Pin
manoj kumar choubey16-Feb-12 1:35
membermanoj kumar choubey16-Feb-12 1:35 
GeneralMy vote of 5 Pin
gitukurikesu4-Nov-11 22:27
membergitukurikesu4-Nov-11 22:27 
QuestionVB.Net ,Database connectivity as not been working Pin
jaya;akshmi4-Aug-11 21:42
memberjaya;akshmi4-Aug-11 21:42 
GeneralModal PopUp Extender when Radio button list Pin
karthikvadugan25-Oct-10 3:02
memberkarthikvadugan25-Oct-10 3:02 
GeneralMy vote of 1 Pin
Parimal@Cybage12-Oct-10 20:40
memberParimal@Cybage12-Oct-10 20:40 
Generalshow validation on pop up Pin
niravsahayata19-Apr-10 22:09
memberniravsahayata19-Apr-10 22:09 
GeneralMy vote of 1 Pin
suresh suthar25-Dec-09 2:05
membersuresh suthar25-Dec-09 2:05 
Generalpopup does not work with master page Pin
santoshvreddy10-Dec-09 2:15
membersantoshvreddy10-Dec-09 2:15 
General[My vote of 1] I just hate it when you try to download a project and its not compiled Pin
tbenami16-Oct-09 21:51
membertbenami16-Oct-09 21:51 
GeneralMy vote of 2 Pin
AJFK7-Jul-09 8:13
memberAJFK7-Jul-09 8:13 
GeneralModal in Web Content Page Pin
Member 370337722-Mar-09 23:34
memberMember 370337722-Mar-09 23:34 
GeneralKeeping modal dialog until server side validation is complete. Pin
Raghu Karupakala23-Jan-09 22:22
memberRaghu Karupakala23-Jan-09 22:22 
Questionhow can i use ajax modal popup on ascx? Pin
Member 415722921-Dec-08 3:46
memberMember 415722921-Dec-08 3:46 
AnswerRe: how can i use ajax modal popup on ascx? Pin
Pramod S Kumar13-Jan-09 6:56
memberPramod S Kumar13-Jan-09 6:56 
GeneralRe: how can i use ajax modal popup on ascx? Pin
sandeep k27-Feb-09 2:08
membersandeep k27-Feb-09 2:08 
QuestionHow can i make this work on Master page Pin
T.Ashraf20-Dec-08 5:39
memberT.Ashraf20-Dec-08 5:39 
AnswerRe: How can i make this work on Master page Pin
Pramod S Kumar13-Jan-09 6:58
memberPramod S Kumar13-Jan-09 6:58 
Generalclearing the modalpoup Pin
venudreamsb4u27-Oct-08 7:29
membervenudreamsb4u27-Oct-08 7:29 
QuestionHow to get rid from infinte scroolbar in page behind of modalpopup when the screen resolution is changed? Pin
s a n t o s h25-Sep-08 22:27
members a n t o s h25-Sep-08 22:27 
GeneralWorking Example of Modal Dialog Pin
mayurmv4-Sep-08 6:06
membermayurmv4-Sep-08 6:06 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150520.1 | Last Updated 3 Apr 2008
Article Copyright 2008 by Pramod S Kumar
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid