Introduction
The term .Net gives us a feeling that it is something to do only with the Internet or network related applications. Though .Net provides strong environment for creating such applications, it is also possible to create many other types of applications (Windows form based applications, Console applications, Windows custom controls etc.)
.Net is Microsoft’s development model in which software becomes platform and device independent and data becomes available over the Internet. The .Net framework is the heart of .Net. Central to the .Net framework is its runtime execution environment known as the Common Language Runtime (CLR) and the code running under the control of the CLR is often termed as Managed Code.
In this tutorial we will show how to create a dynamic data driven web application in .Net environment and we also focus on understanding basic ASP.Net components for web application.
Problem Statement for this tutorial
We will create a web application which asks user to provide user id and password (both are required fields).We will store some user ids and corresponding passwords in database table. If a user id and password matches with the database entry at the back end then the user will be redirected to Welcome page, otherwise he /she will be prompted a Invalid Login message.
Approach
We will divide this into two parts. In first part we discuss how to create and design the web pages in VS 2008, how to add web controls in the pages, available validation controls and their features etc.
In second part we show the procedure to connect the web application with SQL Server and discuss about the ADO.Net controls and finally compile and run the application to verify its correctness.
Requirements
• Windows XP Professional with Service Pack 2/Windows Vista
• Internet Explorer 6 or later/Any Web Browser
• Visual Studio 2005/2008 Professional
• SQL Server 2005/2008 Developer Edition
• IIS (Internet Information Service) version 5.0 or later
Here we have set up the example with Visual Studio 2008 and SQL Server 2005 environment. But you can also proceed with VS 2005 version.
Installation
Both Visual Studio and SQL Server are not free. You need to purchase it from Microsoft but you can download the trial versions of both of these software from Microsoft. Here are the links:
• http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=83c3a1ec-ed72-4a79-8961-25635db0192b (Visual Studio 2008 Professional Edition Trial Version)
• http://www.microsoft.com/sqlserver/2005/en/us/trial-software.aspx (Download the developer version of SQL Server 2005)
If you are working in Windows XP then you need to install IIS in your machine. Go to
‘Start->Settings->Control Panel’.
Click On ‘Add/Remove Programs’ and then select ‘Add/Remove Windows Components’. Now from the Windows Component Wizard select Internet Information Services and click ‘next’ to proceed. You need to insert Windows XP Professional CD to complete the set up.
IIS 7.0 is included with Windows Vista.
Creating the Web Application
Once you launch the VS 2008 you will be presented with a window similar to the screen shot below:
Figure-1: Start Page of VS 2008
The Start Page is the first page you see whenever you launch Visual Studio 2008 and this page guides you as you start projects, as well as search for help or resources. From the screen shot you can see the Recent Projects box at the left side of the page. This box contains the latest projects on which we have worked. From this box you can also create a new project or open an existing project that is not listed. The Getting Started box allows you to create new projects from existing code , create new web sites, pull up the MSDN help application. If you close the Start page from Document Window you can reactivate the Start Page by selecting View->Other Windows->Start Page option.
Now close the Start Page and from the Visual Studio Menu go to
File->New->Web Site
like Figure-2(below)
Figure-2: Create New Web site from the Menu
Now you will see another window appears to select the template. Select the ASP.Net Web Site template and name it as “TutorialExample” like the screenshot below. Set the Language at the right side as Visual C# (it is the language that will be used at the code behind page which will be discussed later). You may also set it as Visual Basic but here we have used C# to show the example.
Figure-3: Create the “TutorialExample” web site
Now the Default.aspx page will be opened like the screenshot below. The Solution Explorer (at the right side) which provides an organized view of the project contains one folder (App_Data) and two files.
Figure-4: Default page and the Solution Explorer
The App_Data folder is the default directory for database but here we will not use this folder as we will use separate SQL Server database. Application and directory level settings are stored in Web.Config file. Each Web Application has at least one Web.config file.
Now select the Default.aspx file in the Solution explorer and press F2 to rename it as Login.aspx (Screen shot below).
Figure-5: Rename Default.aspx as Login.aspx
The document window is where you create the ASP.NET pages. This section of the IDE enables you to create ASP.NET pages either by dragging and dropping elements onto a design surface or by directly coding them. Visual Studio 2008 offers three views of a page: Design, Split and Source view but Visual Studio 2005 offers only two views: Design and Source. Figure-6 shows the document window in VS 2008 with Split View.
Figure-6: Split View of Login.aspx page in the document window
Now we will add server controls in our Login page. But before doing that we will briefly discuss what is a server control. ASP.NET server controls are components that run on the server and encapsulate UI and other related functionality . Server controls include Buttons, Text Boxes, Drop Down Lists etc. The following is an example of Button server control:
Server controls have a runat=”server” attribute. This means that the logic in the control runs on the server and not on the user’s browser. Server controls are different from HTML controls in that they run only on the client’s browser and have no action on the server. Another feature of server controls is that the view state, the settings and the user input of the control are automatically saved when the page is sent back and forth between the client and the server. Traditional HTML controls are stateless and revert to their default setting when the page is returned from the server to client.
Now let’s add web server controls within a table in our Login page. Place the following code in the source view to create a table first. Please look at Figure-7 to add a table.
Figure-7: Add a 3x3 table in the Login Page
Now if you go to the Design view you will find a table like Figure-8.
Figure-8: Table in the Design view
You can also change the style of this table (like set border, change border color ,width etc.) from the Design view. As an example we will just set a border for this table. Select the table in the design view and press ‘F4’. It will open the Properties Window which controls the properties of any item that is a part of your application. Now change the border type as shown in Figure-9:
Figure-9: Change the Border type of the table
You may also change the other properties from this window as experiment.
Now we will add controls within this table. At the right bottom of the page you can find an icon called ‘ToolBox’ which basically allows you to use a drag and drop operation on the controls in this application. When you click on it , you can find the available tools grouped by category. Please have a look on Figure-10 for details.
Figure-10: Tools grouped by Category in the Toolbox
Now expand the standard category which consists of Web Server Controls and drag a ‘TextBox’ control from it and drop it in the second column of the first row like Figure-11.
Figure-11: A TextBox is added in the second column of first row
Now add another TextBox in the column below and a Button at the last like Figure-12.
Figure-12: Text Box and Button Controls are added
Then write ‘Name’ and ‘Password’ like Figure-13: in the Table
Figure-13: Name and Password added
Now Select the button control and press F4 to view the properties window. In properties change the ‘Text’ property from ‘Button’ to ‘Submit’ (shown in Figure-14)
Figure-14: Change the Text property of the Button control
After changing this property the design view of Login page will be like Figure-15
Figure-15: ‘Submit’ button Added
At last we will add validation controls for two text boxes. The ASP.Net page framework includes different types of validation controls . Here we are adding small description of different types of validation controls:
•CompareValidator: Compares an input control to another input control
•CustomValidator: Allows you to write your own code to create the validation expression.
•RangeValidator: This can verify that the user input is between two values.
•RegularExpressionValidator: Verifies that the entry matches a pattern that has been specified by a regular expression.
•RequiredFieldValidator: Checks whether a value has been entered into a control or not.
•ValidationSummary: Displays a summary of all of the validation errors for all of the validation controls on the page.
In our application user need to provide both ‘Name’ and ‘Password’ and these are required fields. So we will add two RequiredFieldValidator for the two TextBoxes. Now drag two ‘RequiredFieldValidator’ from the ‘Validation’ category of ToolBox and place them at the last column of the first two rows of the table.
Here is the screenshot:
Figure-16: Two RequiredFieldValidators are added
Now select the two RequiredFieldValidators one by one and set the ‘ControlToValidate’ property as ‘TextBox1’ and ‘TextBox2’ respectively . Set the ‘ErrorMessage’ property of both of them as ‘Required’. Please look at the screenshot below for details:
Figure-17: Change the properties of the RequiredFieldValidator1 (same for the second)
As a result of this if an user press the ‘Submit’ button keeping the TextBox1 or TextBox2 blank, then he/she will get a ‘Required’ message beside the appropriate TextBox .
At last we will add a asp:label control below the table. If a user enters a wrong ‘Name’ or ‘Password’ then this control will show the proper error message. From the properties window set the ‘ForeColor’
‘Red’ and leave ‘Text’ blank as shown in Figure-18.
Figure-18: Change the ‘ForeColor’ and ‘Text’ properties of ’ Label1’
So our Login.aspx page is ready. Now we will add another web page called ‘Welcome.aspx’ into our project. This page will contain just one one ‘label’ control which will show a welcome message after successful login.
To add another web page in our project just right click on the project in the Solution Explorer and select ‘Add New Item’ (Shown in Figure-19)
Figure-19: Select ‘Add New Item’ to add another page
From the appeared templates select ‘Web Form’ and Name it as ‘Welcome.aspx’ (screenshot below)
Figure-20: Add ‘Welcome.aspx’ page in the project
Now in the design view drag and drop a ‘Label’ control from the toolbox and change the properties like the attached snapshot.
Figure-21: Add welcome label in ‘Welcome.aspx’ page
Now designs of both the pages are ready now and it is the end for Part-I Article. We will create the required table in SQL Server and show how to connect the web application with the database in Part II Article.