Server-side Programming using ASP .NET Web Forms

1
Server-side ProgrammingusingASP .NET Web Forms

• Yingcai Xiao

2
Part I Programming the Internet
3
Programming the Internet

• The Internet as a Computer
• Every computer on the Internet is a CPU
• Transmitting data/information in a standardized
  way is the key
• Analogy of Internet Protocols
• IP gt Binary (low-level Internet transmission
  protocol)
• HTTP gt Assembly (high-level Internet
  transmission protocol)
• HTML gt High Level Language (for writing
  web-pages)
• An international language everyone understand

4
Internet Protocol

• IP Internet Protocol
• data transmission protocol (standard) for the
  Internet.
• The Internet is a computer network based on the
  Internet Protocol.
• Each computer on the Internet is identified by
  its Internet Address 130.101.10.134 or
  wp.cs.uakron.edu
• Data transmitted between computers on the
  Internet as packet.
• Each packet has an IP header followed by data.
• The first 2 entries in an IP header are the
  receivers address and the senders address. IP
  is similar to postal mailing (Packet Switching),
  not phoning (Circuit Switching).
• IPv4 (32bit addressing, 4B), IPv6 (48bit
  addressing, 256T)
• The headers are in the standard IP format,
  platform-independent.
• Data (any type) is transmitted over the Internet
  bit-by-bit. No restrictions on what can be
  transmitted.
• Binary data are platform-dependent. Binary data
  transmitted from one computer to another computer
  may not be readable by the receiver if it has a
  different binary data format than the sender.

5
Hypertext Transfer Protocol

• Can we make it platform-independent?
• The World Wide Web is an application built on the
  Internet using the Hypertext Transfer Protocol in
  which only text data is permitted to be
  transmitted.
• HTTP (Hypertext Transfer Protocol)
• Tim Berners-Lee ("father of the Web") and RFC
  2068
• (www.w3.org/Protocols/rfc2068/rfc2068).
• Entirely text based ASCII (8-bits) or Unicode
  (16-bits).
• Platform independent
• Defines how Web browsers and Web servers
  communicate.
• 7 instructions defined in HTTP 1.1. GET, POST,
• Transmitted over TCP/IP (Transport Control
  Protocol/Internet Protocol).
• Web applications are implemented over the
  Internet using HTML and other Web languages.

6
HTML

• HTML (Hypertext Markup Language)
• Defines syntax and semantics of the Web
  language.
• Entirely text based (platform independent)
• Hypertexts are tagged in lt gt, not to be
  displayed. They are metadata describing regular
  text. (http//www.w3schools.com/tags/)
• Browsers are GUI-based HTML interpreters.
• HTML 4.01 became XHTML 1.0 in 2000
• simple.html
• lthtmlgt
• ltbodygt
• Hello, world
• lt/bodygt
• lt/htmlgt

7
Computing over the Internet

• Client-Side
• Thin client
• Only a browser is needed.
• The browser renders a html page on the client
  computer.
• HTML (static), DHTML (dynamic), HTML5 (dynamic
  and multi-medium).
• Programming with embedded scripts JavaScript, .
  Dynamic and computational.
• Ajax (asynchronous JavaScript XML)
  asynchronous.
• Plugins VRML (3D Web)
• Java Applet transmit the application to the
  client and run it there. Too much to transmit for
  large distribution lists.

8
Computing over the Internet

• Client-Side
• Thick client
• Client program installed prior, no need to
  download at runtime.
• Runs like any other program on the client, but
  can talk to the server when needed.
• .NET Remoting, Windows Communication Foundation
  (WCF),
• Java's Remote Method Invocation (RMI)
• Common Object Request Broker Architecture (CORBA)

9
Computing over the Internet

• Server-Side
• Web pages are generated by server side programs
  at runtime. Dynamic contents and heavy-duty
  computing.
• Server Scripts
• Perl, PHP, .
• Does not scale well. (each client needs a process
  to service)
• Server VMs
• .NET ASP (Active Server Page), JSP (Java Server
  Page),
• All clients are served by a single process. The
  process will create a thread to serve each
  client.

10
Computing over the Internet

• Server-Side
• CMS (Content Management Systems) web contents
  are managed at server side on demand.
• Dejango CMS, Joomla.
• Server-Client Communication
• Important for Internet based computing.
• HTTP channel (slower, works for both thin and
  thick clients).
• TCP/IP channel (faster, works only for thick
  clients).

11
What happens when browsing a web page on a
server?

• http//www.wintellect.com/simple.html
• Start a client (a browser).
• Type in the URL (Unified Resource Locator).
• Internets Domain Name System (DNS) converts
  www.wintellect.com into an IP address
  (66.45.26.25).
• The browser opens a socket (IP) connection to
  the server using default port 80 (mailbox ).
  http//www.wintellect.com80/simple.html

12

• What happens when browsing a web page on a
  server?

• The browser transmits an HTTP request to the
  server.
• GET /simple.html HTTP/1.1
• Accept /
• Accept-Language en-us
• Accept-Encoding gzip, deflate
• User-agent Mozilla/4.0.(compatible MSIE.6.0
  Windows NT 5.1)
• Host www.wintellect.com
• Connection Keep-Alive
• blank line

13

• What happens when browsing a web page on a
  server?

The server transmits an HTTP response
back. HTTP/1.1 200 OK Server Microsoft-IIS/5.0 D
ate Wed, 24 Oct 2001 141237 GMT Content-Type
text/html Accept-Ranges bytes Last-Modified
Wed, 24 Oct 2001 140053 GMT ETag
"d02acf81975cc11a78" Content-Length 46 blank
line lthtmlgt ltbodygt Hello, world lt/bodygt lt/htmlgt
14

• What happens when browsing a web page on a
  server?

• Upon receiving the response, the browser parses
  the HTML and displays the resulting Web page.
• This is just a static page.
• To compute, we need get the data from the client
  user. A client form is needed. HTML form serves
  the purpose.

15

• HTML Forms

http//winserv1.cs.uakron.edu/xiaotest/Calc.html lt
htmlgt ltbodygt ltform methodpostgt
ltinput type"text" name"op1" /gt
ltinput type"text" name"op2" /gt ltinput
type"submit" value" " /gt lt/formgt
lt/bodygt lt/htmlgt
16

• Whats happening?

No action to send anything to the server when the
user types values in the text fields. But when
the submit button (ltinput typesubmitgt) is
clicked, the browser submits the form along with
any input in the forms controls. POST
/calc.html HTTP/1.1 Content-Length 11 blank
line op12op22
17
Part II Server Side Programming
18

• Web Server

• Deploying a Web Page on an IIS server.
• IIS Internet Information Services
• Server winserv1.cs.uakron.edu
• Deploying Directory C\Inetpub\wwwroot
• Access URL http//winserv1.cs.uakron.edu/
  (case insensitive)
• Server-Side Processing
• Common Gateway Interface (CGI)
• CGI applications write HTTP responses to
  standard output (stdout) on the server, which
  are then forwarded to the client browser.
• Defines a low-level programmatic interface
  between Web servers and applications that run on
  Web servers.
• CGI applications can be written in any
  programming language.
• CGI applications read the input accompanying
  postbacks through server environment variables
  and standard input (stdin).
• Slow, restarts a process on every request.

19

• ISAPI

• ISAPI Internet Server Application Programming
  Interface
• ISAPI extensions are Windows DLLs hosted by
  IIS.
• Theyre referenced by URL just like HTML files
  (for example, http//www.wintellect.com/calc.dll)
  .
• IIS forwards HTTP requests to an ISAPI DLL by
  calling a special function exported from the
  DLL.
• The DLL generates HTTP responses.
• Faster than CGI (run in the same process as
  IIS).
• Once loaded, they remain in memory.
• Theyre difficult to write.
•  

20

• Active Server Pages (ASP)

• Active Server Pages (ASP)
• Introduced in 1996.
• Dynamically generates HTML on Web servers.
• Allows HTML and scripts / languages to be mixed.
• The embedded script code are between the lt and
  gt tags.
• When an Active Server Page is requested, ASP
  server parses the page and executes any scripts
  contained inside it.
• Scripts access the input by using the Request
  object.
• Scripts write HTML to the HTTP response using the
  Response object, which is sent to the client by
  the Web server along with the static HTML.
• ASP integrates with ActiveX Data Objects (ADO).
• Interpreted, slow.
• Lacks encapsulation.

21

• Calc.asp

lt_at_ Language"VBScript" gt lthtmlgt ltbodygt
ltformgt ltinput type"text" name"op1"
value"lt Request ("op1") gt"/gt
ltinput type"text" name"op2" value"lt Request
("op2") gt" /gt ltinput type"submit"
value" " /gt lt If Request
("op1") ltgt "" And Request ("op2") ltgt "" Then
a CInt (Request ("op1")) b
CInt (Request ("op2")) Response.Write
(CStr (a b)) End If gt lt/formgt
lt/bodygt lt/htmlgt
22
Part III ASP.NET
23

• APS.NET

• ASP
• Microfofts equivalent of JSP
• Code on the server that dynamically generates
  HTML for the clients at runtime.
• JSP Java Server Page
• Java code on the server that generates HTML for
  the clients.
• HTML contents can be dynamically generated at
  runtime
• ASP.NET
• ASP based on the .NET framework, one of the most
  popular web programming techniques. Code on the
  server that dynamically generates HTML for the
  clients at runtime.

24
ASP.NET
HTTP
25
Web Forms

• Web Forms are GUI-based EDP (Event Driven
  Programming) web pages built around controls and
  event handlers.
• .NET web forms are processed on the server side.
• Web forms use HTML, HTTP and IP to transmit and
  display GUI into a client web-browser.

26

• ASP.NET Web Forms

• ASP.NET Web Forms
• GUI for Web applications
• Object-oriented (encapsulation, inheritance,
  polymorphism)
• Event driven (EDP)
• Server-side processing (dynamic generation of
  HTML)
• Compiled code, faster
• HTML embedding tag ltasp \gt
• (processed on the server side)
• File extension .aspx
• To deploy on winserv1
• copy Examples/c5/calc.aspx to
• C\Inetpub\wwwroot\xiaotest
• To access
• http//winserv1.cs.uakron.edu/xiaotest/calc.aspx

27
Calc.aspx
lthtmlgt ltbodygt ltform RunAt"server"gt
ltaspTextBox ID"op1" RunAt"server" /gt
ltaspTextBox ID"op2" RunAt"server" /gt
ltaspButton Text" " OnClick"OnAdd"
RunAt"server" /gt ltaspLabel ID"Sum"
RunAt"server" /gt lt/formgt
lt/bodygt lt/htmlgt ltscript language"C"
RunAt"server"gt void OnAdd (Object sender,
EventArgs e) int a Convert.ToInt32
(op1.Text) int b Convert.ToInt32
(op2.Text) Sum.Text (a b).ToString
() lt/scriptgt
28

• When Calc.aspx is accessed by a client

• An ASP.NET server page contains two parts static
  HTML code and dynamic embedded APS.NET code.
• ASP.NET-enabled web server processes the ASP.NET
  code in the server page. (Tomcat does not support
  ASP.NET but Mono does)
• It instantiates TextBox, Button, and Label
  objects (the classes are defined in
  System.Web.UI.WebControls).
• Each object dynamically renders itself into
  HTML.
• The dynamically generated HTML is merged into
  the static HTML.
• The resulting HTML is returned to the client as
  an HTTP response.

29

• Calc.aspx as seen by the client

lthtmlgt ltbodygt ltform name"_ctl0"
method"post" action"calc.aspx" id"_ctl0"gt
ltinput type"hidden" name"__VIEWSTATE"
value"dDwxOTE0NDY4ODE2Ozs" /gt ltinput
name"op1" type"text" id"op1" /gt
ltinput name"op2" type"text" id"op2" /gt
ltinput type"submit" name"_ctl1" value "
/gt ltspan id"Sum"gtlt/spangt lt/formgt
lt/bodygt lt/htmlgt note there are also hidden
and div (section) tags.
30

• When Calc.aspx is accessed by a client

When the button is clicked, the input
from op1 and op2 are posted to the server
and directed to calc.aspx (since
action"calc.aspx"). On the server side,
ASP.NET notifies the Button object in calc.aspx
and the Button responds by firing a Click event.
ASP.NET receives the event and subsequently
invokes its handler OnAdd ( ). Sum.Text (a
b).ToString () renders the result into the
Sum label in ltspan id"Sum"gtlt/spangt as
HTML. The dynamically generated HTML is merged
with the static HTML (parts not in server side
tags). The resulting HTML is sent to the
client browser. Use the client browsers
View-gtPage Source menu to see the final HTML code
received by the client. (Mac Tools-gtWeb
Developer-gtPage Source)
31

• ASP.NET Controls

• Two types Web Controls and HTML Controls
• Web Controls
• Class names are prefixed with asp.
• Classes are from System.Web.UI.WebControls.
• The name of the object is defined by the ID
  attribute.
• ASP Web controls are rendered into HTML.
• ASP Web controls are highly programmable.
• They support methods, properties, events.
• ltaspTextBox Text"2" ID"op1" runat"server" /gt
• This web control initializes the textbox to
  display 2. Any public property of a control can
  be used this way.

32

• ASP.NET Controls

Control properties can be accessed from
server-side scripts (code between the ltscriptgt
and lt/scriptgt tags). Read a control property by
scripts int a Convert.ToInt32
(op1.Text) Write a control property by scripts
Sum.Text (a b).ToString () Event-driven
programming. Controls fire events when users
click on them. Wiring an event to an event
handler is accomplished by prefixing the event
name with On. ltaspButton Text" "
RunAt"server" OnClick"OnAdd" /gt
33

• ASP.NET Controls

Exception handling can be added in the
handlers. void OnAdd (Object sender, EventArgs
e) try int a Convert.ToInt32
(op1.Text) int b Convert.ToInt32
(op2.Text) Sum.Text (a b).ToString
() catch (FormatException)
Sum.Text Format Error"
34

• The Web Forms Programming Model

Three principles of the Web Forms programming
model A Web forms user interface is
declared using a combination of HTML and
server controls. Server controls fire events
that can be handled by server-side scripts.
Server-side scripts in ASP.NET are compiled to
CIL and executed by the CLR on the
server. RunAtserver must be used in every tag
that ASP.NET is to process
35

• Web Controls

AdRotator Displays rotating banners in Web forms
Button Generates submit buttons
Calendar Displays calendars with selectable dates
CheckBox Displays a check box in a Web form
CheckBoxList Displays a group of check boxes
CompareValidator Validates user input by comparing it to another value
CustomValidator Validates user input using the algorithm of your choice
36

• Web Controls

DataGrid Displays data in tabular format
DataList Displays items in single-column or multicolumn lists using HTML templates
DropDownList Generates HTML drop-down lists
HyperLink Generates hyperlinks
Image Displays images in Web forms
ImageButton Displays graphical push buttons
Label Generates programmable text fields
LinkButton Generates hyperlinks that post back to the server
37

• Web Controls

ListBox Generates HTML list boxes
Literal Generates literal text in a Web form
Panel Groups other controls
RadioButton Displays a radio button in a Web form
RadioButtonList Displays a group of check boxes
RangeValidator Verifies that user input falls within a specified range
RegularExpressionValidator Validates user input using regular expressions
Repeater Displays items using HTML templates
38

• Web Controls

RequiredFieldValidator Verifies that an input field isnt empty
Table Generates HTML tables
TextBox Generates text input fields
ValidationSummary Displays a summary of validation errors
Xml Displays XML documents and optionally formats them using XSLT
39

• HTML Controls

• ASP.NET HTML controls mimic the original HTML
  tags. (They are processed on the server side.
  They are not HTML tags which are processed by the
  client browser.)
• e.g. ltinput type"text" RunAt"server" /gt
• HTML controls are used like HTML tags.
• An HTML control is an instance of
  System.Web.UI.HtmlControls.HtmlInputText.
• ASP.NET sees the RunAtserver attribute and
  creates an HtmlInputText object.
• The HtmlInputText object, in turn, emits an
  ltinput typetextgt tag thats ultimately
  returned to the browser.
• HTML controls (server side) have properties and
  can generate events which make them more
  powerful than HTML tags (client side).
• Without RunAt"server, HTML controls become
  HTML tags.

40

• HTML Controls

Tag Corresponding HTML Control
lta runatservergt HtmlAnchor
ltbutton runatservergt HtmlButton
ltform runatservergt HtmlForm
ltimg runatservergt HtmlImage
ltinput typebutton runatservergt HtmlInputButton
ltinput typereset runatservergt HtmlInputButton
ltinput typesubmit runatservergt HtmlInputButton
41

• HTML Controls

ltinput typecheckbox runatservergt HtmlInputCheckBox
ltinput typefile runatservergt HtmlInputFile
ltinput typehidden runatservergt HtmlInputHidden
ltinput typeimage runatservergt HtmlInputImage
ltinput typeradio runatservergt HtmlInputRadioButton
ltinput typepassword runatservergt HtmlInputPassword
ltinput typetext runatservergt HtmlInputText
ltselect runatservergt HtmlSelect
42

• HTML Controls

lttable runatservergt HtmlTable
lttd runatservergt HtmlTableCell
ltth runatservergt HtmlTableCell
lttr runatservergt HtmlTableRow
lttextarea runatservergt HtmlTextArea
Any other tag with runatserver HtmlGenericControl
43

• The HTML controls version of Calc.aspx

lthtmlgt ltbodygt ltform runat"server"gt
ltinput type"text" id"op1" runat"server" /gt
ltinput type"text" id"op2"
runat"server" /gt ltinput type"submit"
value" " OnServerClick"OnAdd" runat"server"
/gt ltspan id"Sum" runat"server" /gt
lt/formgt lt/bodygt lt/htmlgt ltscript language"C"
runat"server"gt void OnAdd (Object sender,
EventArgs e) int a Convert.ToInt32
(op1.Value) int b Convert.ToInt32
(op2.Value) Sum.InnerText (a b).ToString
() lt/scriptgt
44
Part IV ASP.NET Internals
45

• How does an ASP.NET enabled server process an
  ASPX file?

• When ASP.NET processes the first HTTP request for
  an ASPX file
• It creates class representing the dynamic code of
  the file.
• It compiles it, loads it, creates an object for
  it.
• The object initializes itself and processes
  page-level events.
• The object generates HTML output to be sent to
  the client.
• The object remains in the server memory to
  process further requests to the page.
• When the ASPX file is modify, ASP.NET
  automatically repeats steps 1-4.

46

• How does a ASP.NET enabled server process an ASPX
  file?
• (Details)

When ASP.NET processes the first HTTP request for
an ASPX file 1. It creates a Page class deriving
from class System.Web.UI.Page. 2. It copies the
code in the ASPX file to the Page-derived class.
3. A method (e.g. OnAdd) in a ltscriptgt block
becomes a member method of the derived
class. 4. ASP.NET compiles the derived class and
places the resulting DLL in a system folder and
caches it there. C\WINNT\Microsoft.NET\Framework
\vn.n.nnnn\Temporary ASP.NET Files. 5. ASP.NET
instantiates an object of the derived Page class
and executes it by calling a series of methods
on it. 6. The Page object instantiates any
controls declared inside it and solicits their
output.
47

• Page-Level Events

• As the Page object executes, it fires a series of
  events (page-level events) that can be processed
  by server-side scripts
• Init, which is fired when the page is first
  instantiated, and
• Load, which is fired after the pages controls
  are initialized but before the page renders any
  output.
• Implicit wiring of Page events to handlers by
  defining handlers names as Page_EventName.
• ltaspDropDownList ID"MyList" RunAt"server" /gt
• . . .
• ltscript language"C" runat"server"gt
• void Page_Load (Object sender, EventArgs e)
• if (!IsPostBack) // if it is not from the
  client
• for (int i0 ilt5 i) // list 5 days
  
• DateTime date
• DateTime.Today new TimeSpan
  (i, 0, 0, 0)
• MyList.Items.Add (date.ToString ("MMMM dd,
  yyyy"))
• lt/scriptgt

48

• ASP.NET Compilation Directives _at_ 

Must be positioned at the top of an ASPX file.
_at_ Page Defines general attributes and compilation settings for ASPX files (e.g. Language)
_at_ Control Defines general attributes and compilation settings for ASCX files
_at_ Import Imports a namespace
_at_ Assembly Enables linkage to assemblies, not linked to by default
_at_ Register Registers user controls and custom controls for use in a Web form
_at_ OutputCache Exerts declarative control over page caching and fragment caching
_at_ Reference Adds a reference to an external ASPX or ASCX file
_at_ Implements Identifies an interface implemented by a Web page
49

• Separating Static Code from Dynamic Code

1. ASPX files are in text files, anyone can read it.
2. When a company sells its ASPX server programs, it
   does not want people to see their source code.
3. How? Code-behind is designed to protect the
   source code.
4. For the static code in HTML, we cant do anything
   about it.
5. Dynamic code in C or other .NET languages can be
   separated out and compiled into DLLs.
6. Only the static HTML code and the DLLs are
   delivered to the customs.

50

• Code-behind with C

• 1. Create a CS file (e.g. Examples/C5/Lander/Lande
  r.cs) containing code that would normally appear
  between ltscriptgt and lt/scriptgt tags. Make each of
  these source code elements members of a class
  (e.g. LanderPage) derived from System.Web.UI.Page.
  
• 2. In your Page-derived class, declare protected
  fields whose names mirror the IDs of the controls
  declared in the ASPX file (e.g. Lander.aspx). At
  run time, ASP.NET maps these fields to the
  controls of the same name.
• Compile the CS file into a DLL.
• In a Visual Studio Command Prompt window, run the
  following
• csc /targetlibrary Lander.cs

51

• Code-behind in Web forms coded in C

4. Place the HTML portion of the Web
formeverything between the lthtmlgt and lt/htmlgt
tagsin an ASPX file (e.g. Lander.aspx).
5. Include in the ASPX file an _at_ Page directive
containing an Inherits attribute that identifies
the Page-derived class in the DLL. When a request
arrives for that page at run-time, ASP.NET
derives a child class from this class to create
the form. e.g. lt_at_ Page Inherits"LanderPagegt 6
. To use the source code without recompiling
lt_at_ Page Inherits"LanderPage" Src"Lander.cs"
gt 7. Code embedded has to be in C, VB .NET,
or JScript. Code-behind can be in any other
language supported by .NET.
52

• Code-behind in Web forms coded in C

• To deploy the program
• move the ASPX file to Inetpub/wwwroot/xiaotest/L
  ander and
• the DLL to Inetpub/wwwroot/xiaotest/Lander/bin.
• The program can be accessed the same way as other
  ASP.NET programs
• http//winserv1.cs.uakron.edu/xiaotest/Lander/La
  nder.aspx
• In order for
• http//winserv1.cs.uakron.edu/xiaotest/Lander/Lan
  der.aspx
• to work, the Lander directory has to be
  converted to a Web Application, which instructs
  ASP.NET to find Lander.dll under the
  applications bin directory.

53

• Create a Web Application in IIS

• winserv1 -gt Sites -gt Default Web Site
• Right-click-gtAdd Application
• Alias xiaotestLander
• Application pool defualtAppPool
• Physical path C\inetpub\wwwroot\xiaotest\Lander
  
• http//winserv1.cs.uakron.edu/xiaotest/Lander/Land
  er.aspx
• Existing directories can be converted to Web
  Applications
• winserv1 -gt Sites -gt Default Web Site-gtxiaotest
• Right-click on Lander
• Convert to Application
• Application pool defualtAppPool
• http//winserv1.cs.uakron.edu/xiaotest/Lander/Land
  er.aspx

You need to be an administrator to use IIS
54

• Web Forms and Visual Studio .NET

Development of Web forms using Visual Studio
.NET Create a Web Application project Use
forms designer to design forms by drag-and-drop
controls from a palette onto the forms. Edit
the HTML. Write event handlers by
double-clicking controls and filling in empty
method bodies. Compile and run applications by
executing simple menu commands.
55

• Summary

• Web Programming, Client Side, Server Side, HTTP,
  HTML, HTML Forms, CGI, ISAPI, ASP, ASP.NET,
  ASP.NET Forms, ASP.NET Controls, IIS, Web Forms
  Programming Model, Page-Level Events, Code
  Behind.
• Principles
• What are they?
• How do they work? (internals, static structures,
  dynamic data/event flow.)
• Practice
• Explain the logic, output, and internal working
  of a given code segment.
• Find errors in a given code segment.
• Write a simple program to perform a given task.