Lab 03 ASP.NET Basics

baasopchoppySecurity

Nov 5, 2013 (3 years and 9 months ago)

60 views

1


Lab
03



ASP.NET Basics


You will create
your

first ASP.NET
dynamic web
application and post it on
Lucius
. Complete the steps below.


Part 1



Getting Started


1.

Open VS (Start, All Programs, Microsoft Visual Studio 20
10)
.

Choose: File, New, Project.


2.

Specify type, location, and name of project.


a.

Make sure “.NET Framework 4” is displayed in the dropdown at the top.

b.

On the “New Project” dialog, drill down to Visual C#, Web, ASP.NET

Empty

Web Application

c.

Uncheck “Create directory for solution”

d.

Choose
“Browse” and navigate to the folder where you want create your project.

e.

Type the “Name” of the Project

(use Lab
03; however, I have used HelloWorldWebSite in the figure below
)
.
This name will be the name of (a) the project folder, (b) the name of the projec
t, (c) the name of the
solution, and (d) the name of the default namespace (similar to package in Java)



2


3.

Create a web
form
.


a.

Right
-
click the project in the Solution Explorer. Choose: Add, New Item.

b.

Choose: Web,
Web Form
, and give the file the name:
default.
aspx
. Choose,
Add
.


4.

Add some content


a.

Make sure the page is displayed in Design view.

b.

Type: “Lab
03



Your Name”

(The figure below shows “Lab 02”).




5.

Build and run your application (Ctrl+Shift B, Ctrl+F5)




6.

Build and run your application (
Ctrl+Shift B, Ctrl+F5) again to make sure it still works.


Part 2



Add some Controls


7.

Add a button and a Label


a.

Open the ToolBox, use the Standard tab

b.

Drag a Button onto the design

c.

Drag a Label onto the design

d.

Rearrange so that it looks like this:




8.

Build and run your application (Ctrl+Shift B, Ctrl+F5).
You can press the button, but nothing happens.




3


9.

Change some Button properties


a.

Select the button and make sure the Properties

window is

displayed (right
-
click the Button and choose View
Properties i
f necessary)


b.

Change the “ID” property to:
btnCompute




c.

Change the “Text” property to:
Square Root
. This will change the text that is displayed on the face of the
button.




10.

Change some Label properties


a.

Select the Label and make sure the Properties are

displayed (right
-
click the Label and choose View
Properties if necessary)


b.

Change the “ID” property to:
lblAnswer
. We won’t change any more properties now.
Later, w
hen the button
is pressed we will
use code to
replace the Label’s

“Text” property with a me
ssage.


11.

Build and run your application (Ctrl+Shift B, Ctrl+F5). You can press the button, but
still,
nothing happens.

4


12.

Add some functionality to the Button


a.

Double
-
click the Button in Design view.


Notice these things:


i.

T
he “code
-
behind” page

is
opened. This is a separate file with
a similar

name as
default.aspx
except that it is named:
default.aspx.cs.
The
cs
denotes the
language that we are using, C#
.
This file contains the code for the
page.

ii.

A
n “event handler” (a method)
was created with th
e name:
btnCompute_Click.
This event
-
handler
is called when the Button is pressed when the program is running.


b.

Next, we will write code in the event
-
handler that will display the square root of 169.
Write this code in the
event
-
handler:


lblAnswer.Text =
"answer = "

+
Math
.Sqrt(169);




13.

Build and run your application (Ctrl+Shift B, Ctrl+F5). Test.


Before data entry

After data entry



5


Part 3



Add another Control


14.

Add
a TextBox so the user can enter a number.


a.

Return to the web page (default.aspx) in
Design view.

b.

Use the Toolbox to add a TextBox to the page. Reposition it so that it is between the Button and the Label.




c.

Use the Properties window to set the “ID” property for the TextBox to:
txtInput


15.

Change the Button event handler so that it
retriev
es the number entered and then
display
s

the square root of
the number.


a.

Return to the code
-
behind page (default.aspx.cs). Either (a) open it from Solution Explorer, (b) click the tab,
or (c) double
-
click the Button.


b.

Replace the code in the event handler (
btnCompute_Click) with:



String

strInput = txtInput.Text;


double

dblInput =
Convert
.ToDouble(strInput);


lblAnswer.Text =
"Square Root = "

+
Math
.Sqrt(dblInput);


Study this code to understand what it is doing.


16.

Build and

run your applicatio
n (Ctrl+Shift B, Ctrl+F5). Test by supplying a number. Then test by putting in a
string.


Numeric Input

String Input







6


Part 4



Add a Validator Control


17.

Add input validation


a.

Return to the web page (default.aspx) in Design view.

b.

Open the Toolbox, open the Validation tab. Drag a RangeValidator on the page




c.

Select the RangeValidator in Design view and then change these properties from the Properties Window:


Property

Value

ControlToValidate

txtInput

ErrorMessage

Input must be
positive

ForeColor

Red

MaximumValue

Double.MaxValue

MinimumValue

0


18.

Build and run your application (
Ctrl+Shift B, Ctrl+F5). Test with a number and then with a string.


String Input






7


Part 5


Explore the Debugger


The Debugger is used to step through your code, line
-
by
-
line. You start by specifying a breakpoint(s). Then, you run
the program in debug mode and the code runs until it gets to the breakpoint where it stops execution and waits
input from you as to how to
proceed. At that point, you can inspect the value of variables and controls, step line
-
by
-
line through the code, advance to the next breakpoint, step into or over method calls,
etc
. The debugger is an
important to that you must learn to use.


19.

Add a
Breakpoint


a.

Return to the code
-
behind page
(default.aspx.cs).

b.

Find the Page_Load event handler.
There is no code in the method;
however, we could place code here.

c.

Click in the margin to the left of the
opening brace ({). A red circle will
appear. This is
a Breakpoint. When we
run the program in Debug mode,
execution will stop there. Then, we
can step through the program.





20.

Run program in Debug mode
. At any time, if things aren’t working right, or as described, simply choose: Debug,
Stop Debugging and ret
urn to this step.


a.

Choose: Debug, Start Debugging (or press F5).

The browser will be displayed but there will be nothing on the
page. VS will be similar to the figure shown on the right. The yellow highlight means the program execution
has been halted just

before this line has been executed.


Browser

Visual Studio




8


b.

Choose: Debug, Step Over (or press F10)
. Notice the yellow highlight has moved indicating that the previous
line of code has been executed (the brace!)
. Had there been code in Page_Load
, we could have stepped
through it by continuing to press F10. The purpose was to show you that the very first thing that happens on
the server is that the Page_Load event code is run (in this case there is none).


Browser

Visual Studio




c.

Step over
again (
e.g.
press F10)
. Now, the page is loaded and the browser shows the full page.


Browser

Visual Studio






9


d.

Type in a number and press the Button
. The code executes and again stops at the Page_Load

event. When
you pressed the button, the page did a “post
-
back” to the server. Notice that the Page_Load event runs
every time a post
-
back occurs.


Browser

Visual Studio




e.

Press F10.

As before, the code in Page_Load is executed (but we have none yet).


Browser

Visual Studio






10


f.

Press F10 again and notice that execution advances to the button event handler,
btnComput_Click
. Now, we
are about to run the code in the event
-
handler.


Browser

Visual Studio




g.

Hover
your
mouse over “Text” in the line

with “txtInput.Text”. Not
ice that the value you typed in is
displayed (
e.g.
87 from the example above).




h.

Display the Locals window. It may already be displayed. If not, look for a “Locals” tab along the bottom left
of your screen.

It looks like this:




i.

Expand
the
“this”

reference. “this” is the instance (obect) that represents the running page. Thus, “this” is
an object and inside it it contains references to all the variables and controls we have defined in the page
(class).

j.

Scroll down to “txtInput”

and expand.

k.

Then, s
croll down to “Text” and see the value 87.

11





l.

Redisplay the code
-
behind file (click the tab if necessary). Press F10 three times:




m.

Display the Immediate Window. Type: 4 * dblInput
. Then, press Enter. Notice

that “dblInput” is a loca
l
variable defined in the event
-
handler. The immediate window allows

you
to

compute with variables that are
in scope.
You could also see the value in an array (or any variable),
e.g.
myArray[3] and Enter.
It is probably
hard to see why this is usef
ul, but
it is from time
-
to
-
time, as a debugging technique.




n.

Press F10 two more times and the result is shown in the browser. If you press the Button again, the
debugging continues. To end the debugging choose: Debug, Stop Debugging (or press Shift + F5).




12


Not
es:



Debug, Step Over (F10) will step over a method call. It will run the method but not step through the
code.



Debug, Step Into (F11
) will step into a method call so that you can step through the code in the method.
On the last line of the method, it will
step back to the caller.



Debug, Continue (F5) will step to the next Breakpoint.



Debug, Step Out will step out of a method call



Part 6


A
Question

for You!


21.

Make sure the debugger is closed (Debug, Stop Debugging).


a.

Add these lines to the Page_Load even
t:



double

x = 169.0;


txtInput.Text = x.ToString();




b.

Run the program, press Enter. Then, change the input value and press Enter. The answer is always 13.


c.

Use the debugger to figure out what is going on. Type your answer into
your web page.




13


Part 7


P
ost your Web Page on
Lucius


22.

Remote to Lucius. Copy
only
these files to your Lab0
3

folder:


default.aspx

default.aspx.cs

d
efault.aspx.designer.cs


23.

Open VS 2010 on Lucius. Choose: File, Open,
Web Site

(NOT Project!) and then choose your root folder (
e.g.
yourID).

Navigate to the Lab03 folder and open
default.aspx.


24.

Now, we need to make a change so that your code will run on Lucius. In the page directive, you will change
“CodeBehind” to “CodeFile
”. To do this,


a.

Open your page (
default.aspx
) in Source view

b.

Find the very first line:


<%
@

Page

Language
="C#"

AutoEventWireup
="true"

CodeBehind
="default.aspx.cs"


Inherits
="Lab2._default"

%>


c.

Change “CodeBehind” to “CodeFile” as shown below:


<%
@

Page

Language
="C#"

AutoEventWireup
="true"

CodeFile
="default.aspx.cs"


Inherits
="Lab2._default"

%>


In general, you’ll need to do this for EVERY .aspx page in your project. This one only has one, so you are done.



25.

Check your Lab03 folder and make sure the page
is there. If not, right
-
click the folder, Add Existing, and select
the files.


26.

Test thoroughly.


27.

Open your
course
home
page
and add a link
to Lab
03
.