Embed Size (px)
Citation preview
BUILDING WEB APPLICATIONS USING
ASP.NET, AJAX AND JAVASCRIPT
Dynamic Web Programming
AGENDA
3. Advanced C# Programming
3.1 Events in ASP.NET
3.2 Programming C# Methods
4. ASP.NET Web Forms
4.1 Page Processing
4.2 Web Form Processing
Building Web Applications Using ASP.NET, AJAX And JavaScript
3. ADVANCED C# PROGRAMMING
3.1 EVENTS IN ASP.NET
ASP.NET uses event-driven programming model. Developer
identifies set of events the application should monitor and
defines how to react to them.
Three categories of events:
Application-level events(Application_Start, Application_End,
Session_Start)
Page-level events (Page_Init, Page_Load, Unload)
Control-level events (Click, Text_Changed)
At the control level, there are two types of events:
Postback events: Trigger automatically a postback, such as a button.
Non-postback events: Fire only when the page is posted back to the
server or if AutoPostBack property is set to true.
Using Web Developer, you can create events in three different
ways.
44
3.1 EVENTS IN ASP.NET
Type it by hand: Add a method to the page class specifying the correct
parameters. Then link the control and the event property to the method.
Double-click a control in design view: Visual Web Developer will create the
default event method for that control.
Choose event property from Properties window: Select the control, in
Properties window select the event property and double-click inside the
property to create the event handler.
Visual Web Developer uses automatic wire-up as indicated in
page directive:
All page event handlers are connected automatically based on name of
the event (Page_Load)
All control event handlers are connected using attributes in control tag.
Attribute has same name as event prefixed with On.
Event Handler Structure:
You can write your own event method as long as you use the same
signature one event method for many controls.
45
3.1 EVENTS IN ASP.NET
46
3.1 EVENTS IN ASP.NET
Generic event handler
method that can be used
with any button control
Event handlers need two arguments:
Object argument pointing to the object that initiated the event.
EventArgs object holding additional information about the object/event.
In many case EventArgs is simply empty. ImageButton control
sends extra information providing X and Y properties
representing the location where the image was clicked.
47
3.2 PROGRAMMING C# METHODS
Break large, spaghetti code into smaller units.
C# class code is divided into chunks known as methods.
Method is
equivalent
to function, procedure, subroutine used in other languages.
Access modifier: public, private, protected, internal.
Keyword static is used to make the method static rather than an
instance method.
Return_type is either a set to void (no return value at all) or a
type, such as data type or object type.
Event handler method is always of return type void a protected!
For non-void methods,
you must use return.
48
3.2 PROGRAMMING C# METHODS
49
3.2 PROGRAMMING C# METHODS
50
Building Web Applications Using ASP.NET, AJAX And JavaScript
4. ASP.NET WEB FORMS
4.1 PAGE PROCESSING
Web Forms is entirely unique to ASP.NET. Almost like coding a
Windows application using control-based interface.
Most important goal of development of ASP.NET was to simulate
the rich UI of client-server applications. However, web
applications are very different:
Web apps execute on the server: Dynamic form generation,
database operations, etc. must take place on the server. Some
tasks, such as data validation can be handled on the client
using JavaScript.
Web apps are stateless: Once a page is processed and sent
back to the client, the server will release all its memory related
to this page and destroy the object. This is great for scalability,
but it is not seamless for a second page request.
51
4.1 PAGE PROCESSING
HTML Form and ASP classic vs. ASP.NET
The next example
demonstrates the
evolution from an HTML
form over ASP classic to
ASP.NET.
52
4.1 PAGE PROCESSING
53
4.1 PAGE PROCESSING
ASP.NET Event Model
Basic steps of the event model:
Page is requested for the first time. ASP.NET creates page/objects,
initialization code executes, page is rendered.
User changes data and clicks a button ( postback)
ASP.NET intercepts the page, re-creates the page/objects exactly the
same way they were in last time the page was sent.
ASP.NET checks what triggered the postback and raises events. ASP.NET
modifies the page to display new information.
Modified page is rendered back to the client.
54
4.1 PAGE PROCESSING
Automatic Postbacks
Statelessness has been overcome in ASP.NET, ASP.NET
remembers stuff between postbacks.
Yet one more problem exists, pages are processed on the server.
If you check or uncheck a checkbox, to react to this event
immediately, the page must be sent back to the server.
In an HTML form, you can only post by using a submit button. In
ASP.NET, the button control performs automatic postbacks.
But no other control can do that. To overcome this problem,
every web control has a property named AutoPostBack. When
turned on, it will cause an automatic postback when changes
occur.
This may not be always practical Mouse, Keyboard events
55
4.1 PAGE PROCESSING
56
4.1 PAGE PROCESSING
View State
To overcome statelessness, ASP.NET uses ViewState.
ViewState in ASP.NET stores certain information in a serialized
string in a hidden control on a web form page.
When a user enters some data on a web form and the page posts
back, ASP.NET receives all the data that the user entered.
ASP.NET will then reconstruct the page based on the original state
(markup code) and then uses the information the user entered to
modify the page.
Besides data on a form, form itself
may have already been modified
from its original state (colors, text,
etc.). ASP.NET keeps track of all
these changes in ViewState!
57
4.1 PAGE PROCESSING
Page Processing,
First Request
Page Processing,
Postback Request
58
Workstation
Web Server
Request
Response
Create web page based on original
markup in aspx file
Run initialization code (Page_Load event,
for example)
Serialize dynamic information in View
State
Render page objects to HTMLReturn rendered page
back to client
Request page (HTTP
Get)
First Request
Workstation
Web Server
Request
Response
Create web page based on original
markup in aspx file
Run event handling code
Serialize dynamic information in View
State
Render page objects to HTMLReturn rendered page
back to client
Request page (HTTP
Get)
Postback Request
Deserialize and apply View State data
4.1 PAGE PROCESSING
Using ViewState is great as it frees up the server from storing
that information for every page from thousands of users.
However, it comes with a price, every time the page is rendered,
the ViewState information is sent along with the page, making
the page size potentially very large and slowing the transmission
of the page over the network.
Programmer needs to optimize page processing. You can turn off
ViewState on a control basis. Keep in mind that a small amount
of information is stored for every control, the control state.
ASP.NET uses ViewState only with page and control properties. It
does not take the same steps with member variables and other
data that you may use.
But you can place any additional information into ViewState
yourself and then later retrieve it.
59
4.2 WEB FORM PROCESSING
Web Page processing
on the server.
Page Framework
Initialization:
ASP.NET creates page
and controls based on
your markup in aspx
page.
Furthermore, if the page
is posted back, it
deserializes the
ViewState information.
60
WorkstationServer
Browser
makes
request
Page
Framework
Initialization
User Code
Initiliazation
Validation
Event
Handling
Cleanup
Browser
receives
response
Page
Destroyed
Render page
in HTMLAutomatic
Data Binding
4.2 WEB FORM PROCESSING
User Code Initialization
At this stage, Page_Load event is fired.
Page_Load always fires, regardless of whether page is requested
for the first time or posted back.
Use Page.IsPostBack property to
distinguish between first time
request and subsequent request.
First time request, load data from database, on postbacks, skip
this step since ViewState contains all that information!
Even changing controls programmatically will count as a change
and is stored in ViewState. Therefore, try to set control
properties in aspx page. If programmatic change is needed, turn
of ViewState of that control.
61
4.2 WEB FORM PROCESSING
Validation
ASP.NET includes validation controls to validate other controls.
These fire after page is loaded but before event processing.
In general, these controls are self-sufficient, no need to respond
to validation events, simply check Page.IsValid in other event.
Event Handling
Postback events: Button, Image, Link controls
Non-postback events: Changing selection in a control or text in a
textbox control.
Remember, events are processed on the server. Everything in
ASP.NET occurs in stages, events are batched together.
Example: Textbox (AutoPostBack=false), submit button
Following events are processed on the server:
62
4.2 WEB FORM PROCESSING
Automatic Data Binding
Data Source controls are automatically updated and queried as
part of life cycle.
Changes to data(inserts, deletes, updates) are performed and
posted to the database after all control events have been
handled but before Page.PreRender event.
After Page.PreRender event fires, data source controls perform
query operations and insert data into any linked controls.
Limitation: None of the event handlers will have access to the
most recent data! Page.PreRender event is the last event before
page is rendered.
Cleanup
Page is rendered, cleanup begins, Page.Unload is fired.
63
4.2 WEB FORM PROCESSING
64
4.2 WEB FORM PROCESSING
65
