asp.net part1
Post on 14-Apr-2018
235 Views
Preview:
TRANSCRIPT
-
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
-
7/30/2019 ASP.net Part1
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 -
7/30/2019 ASP.net Part1
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 -
7/30/2019 ASP.net Part1
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 -
7/30/2019 ASP.net Part1
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 -
7/30/2019 ASP.net Part1
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/30/2019 ASP.net Part1
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 -
7/30/2019 ASP.net Part1
8/17
-
7/30/2019 ASP.net Part1
9/17
-
7/30/2019 ASP.net Part1
10/17
-
7/30/2019 ASP.net Part1
11/17
-
7/30/2019 ASP.net Part1
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:
-
7/30/2019 ASP.net Part1
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.
-
7/30/2019 ASP.net Part1
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)
-
7/30/2019 ASP.net Part1
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)
-
7/30/2019 ASP.net Part1
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
-
7/30/2019 ASP.net Part1
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/
top related