Mock tests, Interview questions, Tutorials and Tech news
 
 
Home > Programming / tutorials > ASP.NET programming tutorial for beginner – Part-I

ASP.NET programming tutorial for beginner – Part-I

November 12th, 2009 Leave a comment Go to comments

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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)

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’

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

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

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

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. We will create the required table in SQL Server and show how to connect the web application with the database in Part-II.

Beginner’s tutorial for programming with ASP.NET  – Part-2

Be Sociable, Share!
  1. Ruhi
    July 9th, 2014 at 07:10 | #1

    as i m fresher ..this tutorial helps me allot..thank you..

  2. April 24th, 2014 at 14:18 | #2

    Copy paste the link into your facebook post. Or click on any sharing button on any given post

  3. sam abraham
    February 27th, 2014 at 11:40 | #3

    very Nice

  4. ritu
    February 24th, 2014 at 04:26 | #4

    how to share website link to facebook..
    plz give some idea.or its related code.

  5. September 24th, 2013 at 08:42 | #5

    How to change dashboard submenus labels?

  6. anilkumar
    July 26th, 2013 at 06:33 | #6

    Is required field validator is present in visual studio 2008?

  7. richa
    July 20th, 2013 at 11:26 | #7

    pls tel me about databace connection with vb.net

  8. SOhan
    May 1st, 2013 at 02:17 | #8

    Unable to find control id ‘TextBox1′ referenced by the ‘ControlToValidate’ property of ‘RequiredFieldValidator1

  9. Prachi
    April 12th, 2013 at 06:35 | #9

    Awesome tutorial. It is very much beneficial for beginners you mentioned all point very clearly and concisely .Really great work.

  10. nimesh
    April 4th, 2013 at 05:28 | #10

    it’s very good

  11. alina
    March 27th, 2013 at 00:50 | #11

    its great..thank u

  12. swamyreddy
    March 23rd, 2013 at 03:55 | #12

    ie is very useful for biggeners thnks

  13. sahir
    March 8th, 2013 at 10:51 | #13

    hi, i wanna all tutorials plz help me

  14. Oshan
    March 8th, 2013 at 10:36 | #14

    Good work!!! Keep it up. Good luck for your future works ! :D

  15. sakshi
    February 23rd, 2013 at 01:56 | #15

    for begineer it is best and plz try to add more about asp.net

  16. Ayesha.M
    February 20th, 2013 at 12:20 | #16

    Good Tutorial,Elaborate a little bit further

  17. kishor
    February 20th, 2013 at 00:52 | #17

    Thanks so much

  18. Sonali
    February 19th, 2013 at 01:44 | #18
  19. Sonali
    February 19th, 2013 at 01:43 | #19

    It’s Very good

  20. Sonali
    February 19th, 2013 at 01:42 | #20

    It’s Very good Tutorial for beginner.

  21. Ammar
    February 15th, 2013 at 01:57 | #21

    Good Tutorial….

  22. Rajesh.A
    February 7th, 2013 at 05:54 | #22

    its verry good understanding notes for every person try to update more notes

  23. sebastian
    January 29th, 2013 at 05:37 | #23

    very helpful

  24. vanu
    January 28th, 2013 at 06:08 | #24

    Wow!!! its great. nice to learn. very easy to understand.

  25. January 26th, 2013 at 02:44 | #25

    reply me quickly please………

  26. January 26th, 2013 at 02:41 | #26

    i want use validation how much asp.net validation ……….i m confuse ,,,,,,,,,

  27. January 16th, 2013 at 03:57 | #27

    ASP.NET is a Microsoft technology. .NET provides tools and libraries that enable developers to create Windows software much faster and easier. .Net supports more than 40 languages and it runs on any platform. In this post, given example is very useful for beginner. Thanks for sharing worth information.

  28. January 13th, 2013 at 05:24 | #28

    Terrific post but I was wondering if you could write a litte more on this subject?
    I’d be very thankful if you could elaborate a little bit further. Appreciate it!

  29. sasikumar
    January 5th, 2013 at 04:23 | #29

    thanks so much………..$$$

    i learn many things from her

    good job……..

  30. January 3rd, 2013 at 02:22 | #30

    Thank u so much!!!!!!!!!!!

  31. sankar
    December 31st, 2012 at 02:19 | #31

    it’s good

  32. December 29th, 2012 at 05:23 | #32

    I am fresher in ASP.NET programmer. Thanks for sharing valuable tutorial.

  33. siddhi
    December 27th, 2012 at 23:33 | #33

    This is so nice tutorial…………..

  34. haseena
    December 26th, 2012 at 10:26 | #34

    good tutorial……..

  35. winjoy
    December 16th, 2012 at 12:24 | #35

    excellent!!!…..i learned it so fast……….Thank you very much

  36. aswin
    December 13th, 2012 at 02:14 | #36

    awesme

  37. Anil
    December 12th, 2012 at 20:52 | #37

    Very good tutorial.Just one thing is missing which is that it should have running example also so that we can also see the how it will implement..Overall it is awsome.

  38. revathi
    November 28th, 2012 at 23:51 | #38

    i didnot receive anything in the template window while opening….y

  39. Dheeru
    November 17th, 2012 at 05:16 | #39

    Wow ,great i learned about .net thanks

  40. November 15th, 2012 at 05:31 | #40

    Its a wellcome developement geting all this over the net. than you

  41. vhino
    November 6th, 2012 at 23:12 | #41

    Thanks.its clean and clear..

  42. Idrees Murtaza
    October 30th, 2012 at 14:18 | #42

    thanks i learn many things from here

  43. saran
    October 4th, 2012 at 23:50 | #43

    it is very great tutorial,

Comment pages
1 2 965
  1. November 12th, 2009 at 15:22 | #1
  2. January 5th, 2010 at 14:56 | #2

Get Adobe Flash playerPlugin by wpburn.com wordpress themes