How to Create an ASP.NET Modal Popup Login
 
Published: 15 Sep 2009
Unedited - Community Contributed
Abstract
In this article, Yi demonstrates how to create a modal popup login page in ASP.NET. By using Login controls, AJAX Extensions, and the AJAX Control Toolkit, you can easily accomplish this task without much coding. The demo project is based on Visual Web Developer Express 2008 and the .NET Framework 3.5. It also assumes you have installed the AJAX Control Toolkit.
by Yi Liu
Feedback
Average Rating: 
Views (Total / Last 10 Days): 66624/ 103

Introduction

In this article, I will demonstrate how to create a modal popup login page in ASP.NET. By using Login controls, AJAX Extensions and Toolkit, you can easily accomplish this task without much coding.

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.

Walkthrough

Let’s get started by creating a new website, and then add a MasterPage. Based on the MasterPage, add a ContentPage and rename it to Login.aspx. You should have files similar to Listing 2 by then.

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

Summary

In this article, you learn to create a modal popup login page. AJAX makes it easy to implement. With UpdatePanel, the page won’t post back if login failed. By adding your own authentication logic, you can expand this demo easily to real world application.

Reference

Polished Popups

http://www.aspnetpro.com/articles/2009/05/asp200905so_f/asp200905so_f.asp

This article only shows you how to create a modal popup confirm dialog, not a login dialog. And the panel doesn’t set Style="display: none"; the hidden panel is visible when first time loaded.

 



User Comments

No comments posted yet.






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2021 ASPAlliance.com  |  Page Processed at 2021-02-25 3:05:52 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search