ASP.NET and Visual Studio 2013

ASP.NET and
Visual Studio 2013

Visual Studio

•
An
integrated

development

environment

(IDE)

•
Includes
:

–
A
built
-
in web
-
server

for
development

and
testing

–
Integrated debugger

–
Toolbars and
windows

can

be

customized

–
Can show
different

windows

for the
development

process

showing

a form and the
controls

(GUI)
and
another

showing

the
code
.

Visual Studio

•
Creating

a new
webapplication
:

–
File

New

Web

site

•
Choose

the template ASP.NET Web Site (C#)

–
You

can

choose

the
FrameWork

version

–
You

can

choose

the location

•
File system(
wil

use

the
built

in webserver), HTTP, FTP

–
Web
applications

are

also

called

”Solutions”

•
Every

solution has
its

one

directory

–
In Solution
explorer

right
click

on the
second

line and
select

add

•
Select Web form

Visual Studio

•
Solution
explorer

–
Web.config

•
Contains

configuration

for the
application

•
Eg.
Connectionsstring

for data
access

–
Default file
extension

for a webform is .
aspx

–
Other

files …..

•
Source
window

–
The
main

developing

area

containing

the
code

or GUI elements

•
Toolbox

(
View

Toolbox

–

Contains

a list of
controls

grouped

into

categorizes

(Standard,
HTML, Navigation,
Validation
, Data
access
…….
a
nd more)

–
Can drag and drop
controls

into

the source
window


Introduction to ASP.NET

5

Web applications in general

•
Web applications are divided into two parts

–
The server part

–
The client part

•
The server part is usually programmed as
“extensions” to an HTTP server

•
The client part is usually executed by a web browser

•
The HTTP protocol is used for communication
between the client and the server

Introduction to ASP.NET

6

Some web application frameworks

•
Sun/Oracle Java Servlets + JSP

•
PHP

•
CGI (Common Gateway Interface)

–
Very old

•
Ruby on Rails

•
Microsoft ASP.NET

•
Microsoft ASP

–
From before ASP.NET

Overview

of the .NET
framework

•
.NET is a
collection

of
technologies

•
.NET is
language

neutral

–
components
can

be

written

in
many

different

languages

•
.NET
languages

–
VB.NET, C#,F#, C++/CLI, Jscript.NET and more

•
Pro/
Cons

–
Easy

for programmers to
change

to .NET

–
Complicates

maintainance

if

SW is programmed in
many

different

languages

Common Language Runtime (CLR)

•
The
execution

technology

–
Provides languge
-
neutral services for
processing

and
executing

.NET software

•
Every

.NET
language

has a compiler to
translate

to a
common

intermediate

languages

–
(MSIL) Microsoft
Intermediate

Language or (CIL) Common
Intermediate

Language

•
After

compilation

all CIL programs have the same form

–
Before

execution
, CIL programs
are

incrementally

compiled

to
maschine

code

for the host
maschine

by a Just In Time
(JIT) Compiler

What

is the .NET Framework

The
common

Language
InfraStructure

•
Because

.NET
allow

multilanguage

developemnt
, all the
languages

most
adhere

to
common

characteristics

•
Common Language
Infrastructure


–
Common Type System

•
Defines

types
supported

by the .NET
languages

–
Common Language
Specification

•
Features
supported

by all .NET
languages

•
The .NET Framework
includes

a large
collection

of
class

Libraries

–
Framework Class (FCL)
includes

API for data
access
,
windows

features and more



ASP.NET
Compilation

CIL


Web sites or Web
application

Demo

•
Download Visual Studio Web developer 2012
Express

•
Implement

a new
webApplication

HelloWorld


Demo

•
Hello

world

website

•
Start with an
empty

website in C#

•
TextBox
, Label, Button

•
Event handler
button_click

TimeLeft2


public partial class
timeLeft

:
System.Web.UI.Page


{


TimeSpan

timeSpan
;


string
msg
, days, hours, minutes
;


protected void
Page_Load
(object sender,
EventArgs

e)


{


DateTime

rigthnow

=
DateTime.Now
;


DateTime

newYears

= new
DateTime
(2014,1,1);


//compute the difference in time/date


timeSpan

=
newYears.Subtract
(
rigthnow
);


//compute and display the differences in days, hours,


// and minutes


days =
timeSpan.Days.ToString
();


msg

=
string.Format
("Days : {0}, ", days);


hours =
timeSpan.Hours.ToString
();


msg

+=
string.Format
("Hours : {0}, ", hours);


minutes =
timeSpan.Minutes.ToString
();


msg

+=
string.Format
("
Minutes

: {0}, ",
minutes
);


Label1.Text =
msg
;


}


}

Assignment

•
Insert the fields and the method
page_load

from the
TimeLeft2 into your class.

•
Add a new Label and make sure that the time left to
New Year is added to the new Label

•
Change the code, so that seconds left to New Year are
presented in the label.

•
The Page class contains a property,
IsPostBack
, that you
can use to only execute part of the code first time
when the page is loaded.

•
Use the
IsPostBack

property to only calculate the time
left to New Year when the page is loaded
firsttime
.

C#

•
Was designed to the .NET technology

•
A lot of the C#
syntask

was borrowed from
other languages, Java and C++

•
Single inheritance

•
Interfaces

•
Garbage collection

•
Absence of global variables

•
If you are in doubt of the syntax


write java


Introduction

to ASP.NET

•
ASP
–

A
ctive
S
erver
P
ages

•
Technology for building dynamic Web documents

•
Supported by code executed on the server

•
Programming
code

is
placed

in a
code

behind

file.

•
ASP.NET produces HTML,
JavaScript,etc
. to be shown /
executed on the client side

–
By the browser

•
ASP.NET
document

–

compiled

in a
specific

.NET
programming

language

–
Resides

in an
assembly

(unit for
compiled

classes
)

•
A .
dll

file (
dynamic

link
library
)



ASP.NET documents

•
Includes:

–
HTML/XHTML

–
ASP.NET specific markup

–
Directives

•
Most common is the
Page

–
Render blocks: <% programming code %>

–
Script elements

•
r
unat
=“server
”

Code/behind files

•
Separates programming code from markup

•
Separating logic from presentation

•
Example timeleft2.aspx

•
Implement

a new website (
empty
)
following

the
codeexample

timeleft2.aspx p.516/517

–
Implement

the website with a
code

behind

file

ASP.NET &
programming

models

•
There

are

3
programming

models




Developing

Enviroments

ASP.NET controls
/Server
controls

•
ASP.NET controls have code that are executed
on the server, also called server controls/web
controls

•
The compilation process translates all Server
controls into HTML elements

•
Need to add controls from the Toolbox

–
Start a website and add a
webform

•
Different kinds of controls:

–
Standard, Validation, Data, Navigation and more



Examples

of Controls

•
Button

•
Calendar

•
CheckBox

•
CheckboxList

•
DropDownList

•
Label

•
And
many

more

Life
cycle

of a simple ASP.NET
Document

•
Two kinds of requests:

–
Initial request


document displayed to the user

–
Post back, when the form have been changed

•
From the form back to the server

•
Property:
isPostBack

= true
if

postback

•
ASP.NET stores the
state

of the
controls

in a
hidden

control

named

ViewState

Introduction to ASP.NET

26

viewState

•
HTTP is stateless

•
ASP.NET keeps track of the state between
postbacks

–
Hidden FORM field where the state of other
FORM fields is kept

–
Encoded, but not encrypted

–
Decoded at the server side

Demo Controls

Assignment

Greeting

application

•
Implement

a web
application

looking

like

figure

12.4 and
showing

the
greeting

and
the age in
twoLabel

controls
. Start with an
empty

web site.




•
Implement

the web
application

using

a
code

behind

file.

•
Run the program. In the browser, right
click

in the

window

and
select

view

source. Find the
ViewState


and
copy

the
value

into

another

file.

•
Go back to the browser
window

and
enter

a
name

and

an age. Press
submit

button
.

What

happened

on the server
after

the
submit
.

•
In
the browser, right
click

in the
window

and
select

view

source
.

•
Find the
ViewState

and
copy

the
value

into

the
other

file

next

to the
previous

viewstate
.

•
Do the
two

viewStates

have the same
value
. Yes/no.
Explain
.


Introduction to ASP.NET

29

Events

•
Many

ASP.NET
controls

sends

events

–
Button has a ”
button_click
” event, etc.

–
Page has ”
page_load
” event, etc.

–
TextBox

has ”
textChanged
” event

•
Event handlers (
methods
)
are

usually

placed

in
the
codebehind

file

•
Event
code

are

executed

at the server

–
Events generate a HTTP
request
/
response


Events

•
Page
-
level

events

–
Are
created

at
specific

times in the
life

cycle

of the source
document

•
Init
, is
raised

after

a
document

class

is
instantiated

•
Load
, is
raised

just
after

the
instance

has
its

state

from the form
data and
ViewState

•
Prerender
, is
raised

just
before

the
instance

is
executed

to
construct

the
client

response

document

•
Unload
, is
raised

just
beofre

the
instance

is
discarded

–
AutoEventWireUp
, implicit
registration

is done
automatically

–
Handler
names

(
methods
):

•
Page_load
,
Page_Unload
,
Page_Prerender
,
Page_Init


Control Events

•
Are
handled

on the server by event handlers
(
methods
)

•
Many

are

raised

on the
client

–
Some

events
cause

immediate

postback to the
server (postback event)

–
Some

events
are

delayed

until

the
next

postback
to the server (non postback event)

–
Not all events
can

be

handled

on the server
because

of the
frequency

(
MouseOver

is
handled

on the
client
)




Control events

•
Controls with postback events

–
Button, Menu

•
Controls with non postback events

–
Checkbox
,
TextBox
,
RadioButton


•
Application/
assignment

postback and non
postback events

•
Assignment

for Page
level

events


Demo

•
Add

an
page_load

eventhandler to the
Hello

World website.

•
In the
page_load

method

initialize

textBox1
and textBox2 with
values
.

•
Add

a
DropBox
/
CheckBox

list


List Controls

•
Web list
controls
:

–
DropDownList
,
CheckBoxList
,
RadioButtonList

•
Common
characteristics
:

–
Items in the list is
ListItem

objects

–
SelectedIndex

and
SelectedItem

properties
references to the
index

and
value

–
Items
,
collection

of
ListItems

–
ListItem

objects

have a
Selected

property

–
Raise

the
SelecetedIndexChanged

event


Assignement

List
controls

•
Create

a new web
application

Controls.

•
C
reate

a new webform and
call

it controls.aspx.

•
Use

this

webform to
Implement

the
document

shown

on page
538 and
described

on page 533
–

538.

•
Use

the
controls

TextBox
,
DropDownList

and a
Label and put the C#
code

in
code
-
behind

file.

•
Use

the
property

window

or the short cut menu
on the
controls

to
add

the
ListItems

•
Set
autoPostBack

to true


Assignment