How to Create an ASP.NET Modal Popup Login

The demo project is based on Visual Web Developer Express 2008 and .NET Framework 3.5. It also assumes you have installed AJAX Toolkit. You can download source code from here.

[Download Sample]

Listing 1 – Login page with modal popup

Key features of this project include:

·         Place login part in MasterPage and content in ContentPage.

·         Utilize Login, LoginStatus controls.

·         Use ModalPopupExtender and UpdatePanel to avoid postback.

·         Take advantage of Forms Authentication.

Listing 2 - Files created for the project

web.config

To restrict anonymous access and allow only authenticated user, we need to add a few lines in web.config file. Note that the authentication mode is set to Forms.

<authentication mode="Forms"/>
<authorization>
      <deny users="?"/>
      <allow users="*"/>
</authorization>

MasterPage.master

Now go to MasterPage.master and we will do the most important work here. Follow steps below.

1.    Add a ScriptManager on MasterPage, which enables the website to run AJAX.

2.    On the same page, create a LoginStatus and place it right above ContentPlaceHolder.

3.    Right click the LoginStatus and select Add Extender. Choose the ModalPopupExtender.

4.    Right below the ContentPlaceHolder, create a Panel. Within the ContentPlaceHolder, add a UpdatePanel.

5.    At last, put a Login control in the UpdatePanel.

In design view, you should get a page similar to Listing 3.

Listing 3 – design view of Login.aspx

However, to make things work we have to add a few more lines. First, let’s add two styles in the markup; we will use them very soon. The first style is for the transparent background on top of regular content. Second one tells how the small popup dialog looks like.

<style type="text/css">
        .modalBackground {
            background-color: Gray;
            filter: alpha(opacity=30);
            opacity: 0.3;}
        .modalPopup {
            width: 250px;
            height: 150px;
            background-color: #076DAB;
            color: #FFFFFF;
            border-color: #000000;
            border-width: 1px;
            border-style: solid;
            text-align: center;
            cursor: move;
            font-size: medium;}
</style>

Next, go to ModalPopupExtender’s properties: set the style for BackgroundCssClass and assign the panel ID to PopupControlID. As a result, the extender markup should look like:

<cc1:ModalPopupExtender ID="LoginStatus1_ModalPopupExtender" 
runat="server" 
DynamicServicePath=""
Enabled="True" 
TargetControlID="LoginStatus1" 
BackgroundCssClass="modalBackground"
PopupControlID="Panel1">
</cc1:ModalPopupExtender>

Go to the panel’s markup (NOT UpdatePanel): set the CssClass.

<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Style="display: none">

It is worth to note that if you don’t set the display style to none, users will have an unpleasant experience: the popup dialog would flash in and out when it is loaded first time. You may also wonder why not to place this style into CssClass. Doing that will keep the popup from showing forever!

Now we are going to work on the Login control a little bit. Here is the markup for it.

<asp:Login ID="Login1" 
runat="server" 
DestinationPageUrl="~/Login.aspx" 
DisplayRememberMe="False"
TitleText="" 
UserNameLabelText="Employee:" 
OnAuthenticate="Login1_Authenticate"
FailureText="Incorrect employee or password" 
Width="100%" 
VisibleWhenLoggedIn="False">
</asp:Login>

We have almost everything but a Cancel button. Change to design view again. Click on Login control and select Convert to Template. Drag and drop a Button next to Login button. We make it as a Cancel button. The OnClick event handler will be implemented later.

<asp:Button  ID="btnCancel" runat="server" OnClick="btnCancel_Click" Text="Cancel" />

Go to source view. This time we will move around those controls in the Login template to make it pretty. Our work on MasterPage.master is done. Let’s visit the C# code behind it.

Listing 4 – Finished Login.aspx

MasterPage.master.cs

Copy and paste following codes to this file. Explanations are in comments.

using System;
using System.Web.UI.WebControls;
using System.Web.Security;
 
public partial class MasterPage : System.Web.UI.MasterPage
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // Popup dialog won't fire if user is already in.
        if (Request.IsAuthenticated)
        {
            LoginStatus1_ModalPopupExtender.Enabled = false;
        }
        else
        {
            LoginStatus1_ModalPopupExtender.Enabled = true;
        }
    }
 
 
    // Authenticate user's crendential if Login button is clicked.
    protected void Login1_Authenticate(object sender, AuthenticateEventArgs e)
    {
        // You can add authentication logic here.
        e.Authenticated = ((Login1.UserName == "test") && 
            (Login1.Password == "test"));
 
 
        // Continue to display the popup dialog and failure text if login failed.
        if (!e.Authenticated)
        {
            LoginStatus1_ModalPopupExtender.Show();
        }
    }
 
    // Hide the popup dialog if Cancel button is clicked.
    protected void btnCancel_Click(object sender, EventArgs e)
    {
        LoginStatus1_ModalPopupExtender.Hide();
    }
}

At last, I add a few texts and a horizontal rule to this page. Listing 5 and 6 are the login failure page and success page. It’s done!

Listing 5 – Login failure

Listing 6 – Login success