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
