Dynamic Web Programming BUILDING WEB APPLICATIONS USING ASP.NET, AJAX AND JAVASCRIPT

Transcription

1 Dynamic Web Programming BUILDING WEB APPLICATIONS USING ASP.NET, AJAX AND JAVASCRIPT

2 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

3 Building Web Applications Using ASP.NET, AJAX And JavaScript 3. ADVANCED C# PROGRAMMING

4 3.1 EVENTS IN ASP.NET 44 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.

5 3.1 EVENTS IN ASP.NET 45 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.

6 3.1 EVENTS IN ASP.NET 46

7 3.1 EVENTS IN ASP.NET 47 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.

8 3.2 PROGRAMMING C# METHODS 48 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.

9 3.2 PROGRAMMING C# METHODS 49

10 3.2 PROGRAMMING C# METHODS 50

11 Building Web Applications Using ASP.NET, AJAX And JavaScript 4. ASP.NET WEB FORMS

12 4.1 PAGE PROCESSING 51 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.

13 4.1 PAGE PROCESSING 52 HTML Form and ASP classic vs. ASP.NET The next example demonstrates the evolution from an HTML form over ASP classic to ASP.NET.

14 4.1 PAGE PROCESSING 53

15 4.1 PAGE PROCESSING 54 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.

16 4.1 PAGE PROCESSING 55 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

17 4.1 PAGE PROCESSING 56

18 4.1 PAGE PROCESSING 57 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!

19 4.1 PAGE PROCESSING Request 58 Page Processing, First Request Request page (HTTP Get) First Request Create web page based on original markup in aspx file Run initialization code (Page_Load event, for example) Workstation Response Serialize dynamic information in View State Web Server Return rendered page back to client Render page objects to HTML Request Request page (HTTP Get) Create web page based on original markup in aspx file Page Processing, Postback Request Workstation Postback Request Deserialize and apply View State data Run event handling code Response Serialize dynamic information in View State Web Server Return rendered page back to client Render page objects to HTML

20 4.1 PAGE PROCESSING 59 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.

21 4.2 WEB FORM PROCESSING 60 Web Page processing on the server. Page Framework Initialization: Page Framework Initialization User Code Initiliazation 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. Browser makes request Workstation Browser receives response Render page in HTML Validation Event Handling Automatic Data Binding Cleanup Server Page Destroyed

22 4.2 WEB FORM PROCESSING 61 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.

23 4.2 WEB FORM PROCESSING 62 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:

24 4.2 WEB FORM PROCESSING 63 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.

25 4.2 WEB FORM PROCESSING 64

26 4.2 WEB FORM PROCESSING 65