BAIT2113 Web Application Development Chapter 1

Practical 1

Step 1: Create ASP.NET Web Page

1. Open the Microsoft Visual Studio 2017 or later.

2. If the environment setting dialog box prompts up, please choose create a new
project.

3. Choose ASP.NET Web Application (.NET Framework) – Language C#

To Learn Programming, You Must Try To Fall in Love with Programming 

BAIT2113 Web Application Development Chapter 1

4. Configure your new project. Fill up project details and click Create.

Project Name

Choose location to
store your project

Solution name

5. Select Empty to proceed.

Select Empty

To Learn Programming, You Must Try To Fall in Love with Programming 

BAIT2113 Web Application Development Chapter 1

6. You will get this Integrated Development Environment (IDE):

Toolbox that Development pane: Solution explorer:

contained ASP.NET Interface Design and Can view the files
controls coding Environment and properties

Step 2: Create new web form

1. Right click on Solution Name. Go to Add New Item.

To Learn Programming, You Must Try To Fall in Love with Programming 

 BAIT2113 Web Application Development Chapter 1

2. You will get this window.

1. Choose
Visual C#
then Web

2. Web Form Name 3. Click Add to add

new form

3. New web form added at solution explorer

To Learn Programming, You Must Try To Fall in Love with Programming 

BAIT2113 Web Application Development Chapter 1

Step 3: Drag & drop the ASP.NET controls

1. From the Standard toolbox drag a Label, TextBox and Button controls, then design it
as shown below:

Step 4: Shift between Design, Source and Code-behind view

1. Look at the bottom of your development pane, try to shift between Design & Source
view:

Design Source
View View

To Learn Programming, You Must Try To Fall in Love with Programming 

BAIT2113 Web Application Development Chapter 1

2. Go to Solution explorer, then expand the WebForm1.aspx web file, then double-click
the WebForm1.aspx.cs. So this is code-behind view:

Step 4: View & change the properties of the ASP.Net controls

1. Shift back to Design view mode.

2. Open the Properties Window. You can find it under the View menu (scroll down to
the bottom if you can’t find it on top) or press F4.

3. Left click the textbox, then go to the Properties Window, change the ID to txtName.

4. Change the button ID to btnSubmit.

To Learn Programming, You Must Try To Fall in Love with Programming 

BAIT2113 Web Application Development Chapter 1

5. Change the button Text property to Submit.

To Learn Programming, You Must Try To Fall in Love with Programming 

BAIT2113 Web Application Development Chapter 1

Step 5: Compile the web form

1. Press F5 to start the debugging or press the button:

Press green arrow button

To Learn Programming, You Must Try To Fall in Love with Programming 