Login/SignUp Screen Using AJAX ModalPopupExtender


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.

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

DropShadow Set
to True to automatically add a dropshadow
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

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s