Quezon City University

IPT101 – INTEGRATIVE AND TECHONOLOGIES PROGRAMMING 1

In this laboratory activity we will

• Discuss the differences between HTML and ASP.NET controls

o HTML loads faster ... better for static pages
o ASP.NET controls must constantly interact with server
o HTML button control is coded in Javascript
▪ when you double click on it, you are put into HTML source onClick event
▪ you then must provide the code for the corresponding function eg. alert("Welcome");
o ASP.NET button control is coded in C# ... when you double click on it creates Event Handler
▪ code behind file ... aspx.cs

• Create a simple ASP.NET Web application that uses ASP.NET and HTML controls and incorporates C#
coding (enter a name and display a greeting) MyFirstWebApp.
o using labels,text boxes and button controls
o add HTML elements .... <HR> from the HTML controls in toolbox
o format text eg. font, color (CSS based) SimpleFormatting
▪ uses classes (internal style sheet)
▪ converts text to hyperlink (Format menu)
▪ adds an ASP.NET image control
• Visual Studio has a built-in viewer for ASP.NET pages you create... BUT
o You can't just open a dynamic page on your own computer (without VS) before it is posted
online as you can a regular HTML page.
o You must view a dynamic page through a Web Server that has an appropriate application
server running.
o ASP.NET is the server model we use. It runs in conjunction with Microsoft IIS Web Server ..
http://localhost
• Discuss the difference between server side code and client side code (view source in browser)
o Default.aspx (server-side) ... runat="server" tells Webserver that ASP.NET tags should be
processed before sending page to the browser
o Default.aspx(client-side) ... browser gets HTML generated by ASP.NET

Prepared by: Christian B. Escoto, MSCS

Instructor II
Directions: Just follow the procedure. Make sure that you have already installed the Visual Studio.

STEP 1: Open the Visual Studio. Go to the Search and type Visual Studio 2022 to quicky find the application.

STEP 2: Wait for the application to be loaded.

STEP 3: Choose Create a new project.

STEP 4: Choose ASP .Net Web Application (.NET Framework) then click Next.
STEP 5: Change the Project name. Type in MyFirstASPWebApp then click Create button.

STEP 6: Choose Empty project template. Make sure you check the Web Form and click Create button.

STEP 7: Wait for the project to be loaded.

STEP 8: In the Solution Explorer, right click on the name of the project MyFirstASPWebApp. Click Add then
choose New Item.

STEP 9: Make sure that you choose Web on the left pane then choose Web Form. Change the name of the
web form, type in the new name Default then click Add button.
STEP 10: In the Design Tab , Type in the word “Welcome to my first real ASP .Net web application !”.

STEP 10: Highlight the word then, Click the Block Format dropdown arrow and choose Heading 1 <h1> tag.

STEP 11: This is how it looks like now.

STEP 12: Press enter 4 times and type Enter your first name: .

STEP 13: Now, let’s check the underground part. Let’s switch to Source Tab to see the added code highlighted
below.
STEP 14: Lets go back to the Design Tab. You can find the Toolbox in the left pane. Choose the Standard
toolbox. Find the Textbox controller then drag and drop it beside the word Enter your first name.

STEP 15: This is how it looks like now. You can see the textbox now.
STEP 16: Lets switch to the Source tab to see the code when we add the textbox in the design tab the new
code was added in the source tab. See the code added highlighted below.

STEP 17: Go back to the Design tab. Click the textbox1 and then in the right pane you can see the Properties
of the textbox. Find the ID property then change it to TxtFirstName.
STEP 18: Press enter 2 times beside the textbox and type Enter your last name: .

Step 19: Lets go back to the Design Tab. You can find the Toolbox in the left pane. Choose the Standard
toolbox. Find the Textbox controller then drag and drop it beside the word Enter your last name.
STEP 20: Click the textbox 2 and then in the right pane you can see the Properties of the textbox. Find the ID
property then change it to TxtLastName.

STEP 21: In the Toolbox, find the Button controller then drag it to the Design tab and drop.
STEP 22: This is now it looks like.

STEP 23: Click the button controller then go to the Properties of the button controller. Change the name of
the button look for the Text property then change the name into GO.
STEP 24: Click the Button then go to the Properties of button then look for ID then change the ID name into
BtnGo.

STEP 25: In the toolbox, choose the Label controller and the drag it and drop to the deign tab.
STEP 26: This is now it looks like when you drag and drop the label in the design tab.

STEP 27: Click the Label controller then go to the Properties and look for the ID property then type in
LblResult.
STEP 28: In the property of Label, find the Text property and then delete the word label.

STEP 29: You can see now the name of the label in the design view is also the name of the ID property which is
LblResult.
STEP 30: Let’s switch to the underground part. Go to Source tab to see the code that generated while we are
creating the design in the design view. Please check and analyze the codes that are being generated.

STEP 31: Lets us make a horizontal ruler by typing in the tag <hr/>. See the image below. Then switch to the
design tab to see the result of the <hr/> tag.
STEP 32: This is how the < hr / > tag looks like. See image below.

STEP 33: Double click the button GO and you will be redirected to the C# part.
STEP 34: Make sure that you are inside the BtnGo button .This is where we will write the C# code..

STEP 35: Write the following code for the first name.

STEP 36: Write the following code for the last name.
STEP 37: Write the following code for the result.

STEP 38: Write the following code for result to be display in the label LblResult.
STEP 39: Go to File menu and don’t forget to SAVE ALL.

STEP 40: You may now be able to RUN the program by IIS Express, you may also choose to run the web page
using Google Chrome.
STEP 41: This is the final output. You may enter for the first name and last name then click the button GO to
display the result.

“First, solve the problem. Then, write the code.” – John

Johnson