asp.net part1

7/30/2019 ASP.net Part1

1/17

IntroductionThe 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, itis also possible to create many other types of applications (Windows form based applications,

Console applications, Windows custom controls etc.)

.Net is Microsofts 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 CommonLanguage 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 beredirected 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 anddiscuss 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


2/17

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 developerversion 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 tocomplete 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 shotbelow:

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 youcan see the Recent Projects box at the left side of the page. This box contains the latest projectson 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->StartPage option.

Now close the Start Page and from the Visual Studio Menu go to File->New->Web Site likeFigure-2(below)
http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=83c3a1ec-ed72-4a79-8961-25635db0192bhttp://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=83c3a1ec-ed72-4a79-8961-25635db0192bhttp://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=83c3a1ec-ed72-4a79-8961-25635db0192bhttp://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=83c3a1ec-ed72-4a79-8961-25635db0192bhttp://www.microsoft.com/sqlserver/2005/en/us/trial-software.aspxhttp://www.microsoft.com/sqlserver/2005/en/us/trial-software.aspxhttp://www.microsoft.com/sqlserver/2005/en/us/trial-software.aspxhttp://www.skill-guru.com/blog/wp-content/uploads/2009/11/Figure-1.jpghttp://www.microsoft.com/sqlserver/2005/en/us/trial-software.aspxhttp://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=83c3a1ec-ed72-4a79-8961-25635db0192bhttp://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=83c3a1ec-ed72-4a79-8961-25635db0192b


3/17

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 Sitetemplate 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.

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.
http://www.skill-guru.com/blog/wp-content/uploads/2009/11/Figure-3.jpghttp://www.skill-guru.com/blog/wp-content/uploads/2009/11/Figure-2.jpghttp://www.skill-guru.com/blog/wp-content/uploads/2009/11/Figure-2.jpg


4/17

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 inWeb.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).
http://www.skill-guru.com/blog/wp-content/uploads/2009/11/Figure-5.JPGhttp://www.skill-guru.com/blog/wp-content/uploads/2009/11/Figure-5.JPG


5/17

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 andSource 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 andencapsulate UI and other related functionality . Server controls include Buttons, Text Boxes,

Drop Down Lists etc. The following is an example of Button server control:
http://www.skill-guru.com/blog/wp-content/uploads/2009/11/Figure-6.jpg


6/17

Server controls have a runat=server attribute. This means that the logic in the control runs on

the server and not on the users browser. Server controls are different from HTML controls in

that they run only on the clients browser and have no action on the server. Another feature ofserver 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 isreturned from the server to client.

Now lets add web server controls within a table in our Login page. Place the following code inthe 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.
http://www.skill-guru.com/blog/wp-content/uploads/2009/11/Figure-7.jpg


7/17

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 ofany 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.
http://www.skill-guru.com/blog/wp-content/uploads/2009/11/Figure-9.jpghttp://www.skill-guru.com/blog/wp-content/uploads/2009/11/Figure-8.jpghttp://www.skill-guru.com/blog/wp-content/uploads/2009/11/Figure-9.jpghttp://www.skill-guru.com/blog/wp-content/uploads/2009/11/Figure-8.jpg


8/17


9/17


10/17


11/17


12/17

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 ofthem as Required. Please look at the screenshot below for details:


13/17

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 orPassword 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.


14/17

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)


15/17

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)


16/17

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 theproperties like the attached snapshot.

Figure-21: Add welcome label in Welcome.aspx page


17/17

Now designs of both the pages are ready now and it is the end for Part-I. We will create the

required table in SQL Server and show how to connect the web application with the database in

Part-II.

Beginners tutorial for programming with ASP.NETPart-2
http://www.skill-guru.com/blog/2009/11/12/beginner%E2%80%99s-tutorial-for-programming-with-asp-net-part-ii/http://www.skill-guru.com/blog/2009/11/12/beginner%E2%80%99s-tutorial-for-programming-with-asp-net-part-ii/http://www.skill-guru.com/blog/2009/11/12/beginner%E2%80%99s-tutorial-for-programming-with-asp-net-part-ii/http://www.skill-guru.com/blog/2009/11/12/beginner%E2%80%99s-tutorial-for-programming-with-asp-net-part-ii/http://www.skill-guru.com/blog/2009/11/12/beginner%E2%80%99s-tutorial-for-programming-with-asp-net-part-ii/http://www.skill-guru.com/blog/2009/11/12/beginner%E2%80%99s-tutorial-for-programming-with-asp-net-part-ii/

asp.net part1

Documents