Tutorials » AspNet tutorials »

User Tracker: Login Page

You will expand your UserTracker project here and add a Login page.

In the previous chapter, you created a new project called "UserTracker". We are going to expand it to have some real features!

Create a Login page

When VS.NET created the project, it created a default page called "WebForm1.aspx". Right click on this file in solution explorer and rename it to "Login.aspx". Note that when you rename the aspx file, the code behind file also will get renamed.

Add controls to Login page

We are going to add some controls to the login page. You can drag and drop controls from Toolbox to the page when the page is in design mode. For time being, copy paste the following code to the aspx page when it is in HTML mode.

<asp:Label id="lblMessage" style="Z-INDEX: 101; LEFT: 95px; POSITION: absolute; TOP: 58px" runat="server" Width="194px" Font-Bold="True" ForeColor="#C00000"></asp:Label>

<asp:Panel id="pnlName" style="Z-INDEX: 102; LEFT: 13px; POSITION: absolute; TOP: 130px" runat="server" Width="398px" Height="46px">

<asp:Label id="Label1" runat="server">Enter your name:</asp:Label>
<asp:TextBox id="txtName" runat="server"></asp:TextBox>
<asp:Button id="btnProceed" runat="server" Text="Proceed"></asp:Button>


<asp:HyperLink id="HyperLink1" style="Z-INDEX: 103; LEFT: 17px; POSITION: absolute; TOP: 211px" runat="server" NavigateUrl="ShowNames.aspx">Show Names</asp:HyperLink>

NOTE: Make sure you copy the above code within the <Form></Form> tags in the aspx file.

If you switch to Design mode after copying the above code, the designer will look like this:

Controls in Login Page

The above code sample adds the following controls to the page:

1. lblMessage - This is a Label control, used to display some messages. We have changes xomep properties like Forecolor, Font-Bold etc.

2. pnlName - This is a Panel control. A panel is an invisible control, used to just group some other controls. In this page, our panel includes another label, textbox and a button. If we set some properties like Visible = False for the panel, it will hide all controls within the panel. So, if we want to hide several controls at the same time, we can put all of them in the panel and just set panel.Visible = False

3. Label1 - This Label control has the static text "Enter your name:".

4. txtName - This Textbox control will be used to accept inputs from user.

5. btnProceed - This Button control will be used to submit the form, after user enters the name.

6. HyperLink1 - This is a HyperLink control used to give hyperlinks to other pages. In our case, we use this link to navigate to our next page.

Compile and Run the project

We have added all the required controls to the login page. Now, let us see it in action. Compile and run the web application by pressing Ctrl + F5. You can see that the Login page is launched with all the controls in it.

You can enter some text in the textbox and press the button. Since we have not added any code to the event handlers, nothing much will happen.

You will add code to the event handlers in the next chapters and see more functionality of this page.

Next Chapter: Add life to Login page
Previous Chapter: User Tracker project
More Chapters: ASP.NET Tutorials
More Tutorials: Tutorial Index

Top Contributors
    Last 7 Daysmore...

    Awards & Gifts

    Online Members

    sathya ramesh
    Copyright © SpiderWorks Technologies Pvt Ltd., Kochi, India