Web Application and Development Digital Media Department Unit Credit Value : 4 Essential Learning time : 120 hours Digital Media Department Politeknik Brunei WEBFORMS

Introduction to Web Forms Configuration – Client Side Scripting State Management Contents 2

Web Forms the heart and soul of ASP.NET. Are the User Interface (UI) elements that give your Web applications their look and feel. Similar to Windows Forms in that they provide properties, methods, and events for the controls that are placed onto them. Web Forms 3

However, these UI elements render themselves in the appropriate markup language required by the request e.g. HTML. If you use Microsoft Visual Studio®.NET, you will also get the familiar drag-and-drop interface used to create your UI for your Web application. Web Forms 4

Web Forms are made up of two components: the visual portion (the ASPX file) the code behind the form, which resides in a separate class file. ASP.NET Web Forms 5

6 Browser IIS Internet Information Services ASP.NET WebForms.NET Language (VB, C#, C++, etc) WebControls

Web Forms and ASP.NET were created to overcome some of the limitations of ASP. These new strengths include: Separation of HTML interface from application logic A rich set of server-side controls that can detect the browser and send out appropriate markup language such as HTML Less code to write due to the data binding capabilities of the new server-side.NET controls Web Forms Purposes 7

Event-based programming model that is familiar to Microsoft Visual Basic® programmers Compiled code and support for multiple languages, as opposed to ASP which was interpreted as Microsoft Visual Basic Scripting (VBScript) or Microsoft Jscript® Allows third parties to create controls that provide additional functionality Web Forms Purposes 8

In simple words, Web Forms seem just like a workspace where you draw controls. In reality, they can do a whole lot more. But normally you will just place any of the various controls onto the Web Form to create your UI. The controls you use determine which properties, events, and methods you will get for each control. Web Forms Purposes 9

There are two types of controls that you can use to create your user interface: HTML controls Web Form controls. Control Interface10

HTML controls mimic the actual HTML elements that you would use if you were using Front Page or any other HTML editor to draw your UI. You can use standard HTML elements in Web Forms, too. For example, if you wanted to create a text box, you would write: HTML Control11

Using Visual Studio.NET, choose a TextField control from the HTML Toolbox tab and draw the control where you want it on the HTML page. Any HTML element can be marked to also run as an HTML control when the Web Form is processed on the server by adding "runat=server" to the tag: HTML Control12

ButtonReset ButtonSubmit Button Text FieldText AreaFile Field Password FieldCheckBoxRadio Button TableImageListBox DropdownHorizontal Rule HTML Control13  Web Form Code Example: Button Text Field Password Field Table

Some of the common client-side events: Client-side Events14 ControlDescription OnBlurText Area OnChangeContents of the control are changed OnClickControl is clicked on OnFocusControl receives focus OnMouseOverMouse moves over this control

15 Web Form controls are created and run on the Server just like the HTML controls. After performing whatever operation they are designed to do, they render the appropriate HTML and send that HTML into the output stream.

16 For example, aDropDownList control will allow you to bind to a data source, yet the output that is rendered is standard and tags when sent to a browser.

17 All Web Form controls inherit from a common base class, namely the System.Web.UI.WebControls class. This base class implements a set of common properties that all of these controls will have. Some of these common properties are: BackColorEnabled FontForeColor VisibleWidth

18 The list of some Web Form server side controls and the server-side events that you can respond to with each control ControlCommonly Used Server-side Events LabelNone TextBoxTextChanged ButtonClick, Command LinkButtonClick, Command ImageButtonClick

19 All of these controls change their output based on the type of browser detected for the user. If the user's browser is IE, a richer look and feel can be generated using some DHTML extensions. If a down-level browser is detected (something other than IE), normal HTML 3.2 standard is sent back to the user's browser.

20 Validates data on the client browser, before the user submits the data to the back-end server. If the user fills in some data into a group of controls on an HTML page, you normally have to send all the data back to the server so it can be validated by either your ASP or ASP.NET code.

RequiredFieldValidator CompareValidator RangeValidator RegularExpressionValidator CustomValidator Field Validator Controls 21  These Field Validator controls allows you to check the user’s input without a round trip back to the server

22 In addition to the built-in controls in the.NET Framework, you can also build your own custom controls. For example, you may wish to create a menu system where each menu item is built from a database.

Page Events Pages are structured using events Enables clean code organization Avoids the “Monster IF” statement Less complex than ASP pages Code can respond to page events E.g. Page_Load, Page_Unload Code can respond to control events Button_Click Textbox_Changed 23

Page life cycle Textbox1_Changed Button1_Click Initialize Load Page Page Clean up Page_Load Page_Unload Page_Init Server control events Page_render Handle Event 24

Page Loading Page_Load fires at beginning of request after controls are initialized Input control values already populated protected void Page_Load(Object s, EventArgs e) { message.Text = textbox.Text; } 25

Page Loading Page_Load fires on every request Use Page.IsPostBack to execute conditional logic If a Page/Control is maintaining state then need only initialize it when IsPostBack is false protected void Page_Load(Object s, EventArgs e) { if (! Page.IsPostBack) { // Executes only on initial page load Message.Text = "initial value"; } // Rest of procedure executes on every request } 26

Server Control Events Change Events By default, these execute only on next action event, e.g. OnTextChanged, OnCheckedChanged Change events fire in random order Action Events Cause an immediate postback to server E.g. OnClick 27

Server Control Events Works with any browser No client script required, no applets, no ActiveX ® Controls! 28

Page Unloading Page_Unload fires after the page is rendered Useful for logging and clean up protected void Page_Unload(Object s, EventArgs e) { MyApp.LogPageComplete(); } 29

Configuration Client Side Scripting 30

Add functionality and interactivity to our website HTML is limited to displaying and formatting content Client-side scripting also reduced burden on servers. Data validation can be performed at client side via web browser instead at web server Client Side Scripting 31

It also extends browser capabilities such as those offered by Shockwave for animation Basically in client-side scripting, all processing are done at client side through the web browser Client Side Scripting 32

Improve/better user experience: Allow for more interactivity by promptly responding to users' actions. Immediate response as scripts are executed by web browser. Improve website usability if browser supports scripting technology. Developers have more control over the appearance and behavior of widgets. Advantages of Client Side Scripting33

Not all browsers support script and some users even have this feature turned off. Websites relying on script solely may become non-functional or look erroneous. Require rigorous testing as scripts may behave differently on different browsers / browser versions. Writing your own script takes considerable amount of time and effort. Disadvantages of Client Side Scripting 34

Since developers have direct control over widget appearance and behavior, their design might affect web usability. For example a widget that looks like a “submit” button but with different function or effects. Disadvantages of Client Side Scripting 35

State Management 36

A new instance of the Web page class is created each time the page is posted to the server. In traditional Web programming, this would typically mean that all information associated with the page and the controls on the page would be lost with each round trip. For example, if a user enters information into a text box, that information would be lost in the round trip from the browser or client device to the server. State Management 37

To overcome this inherent limitation of traditional Web programming, ASP.NET includes several options that help you preserve data on both a per-page basis and an application-wide basis. These features are as follows: View state Hidden fields Query strings Session state State Management 38 ◦ Control state ◦ Cookies ◦ Application state ◦ Profile properties

View state, control state, hidden fields, cookies, and query strings all involve storing data on the client in various ways. However, application state, session state, and profile properties all store data in memory on the server. State Management 39

Client-Based State Management Options The following are options for state management that involve storing information either in the page or on the client computer. For these options, no information is maintained on the server between round trips. View State Hidden Fields Query Strings State Management40  Control State  Cookies

Server-Based State Management Options With server-based state management, you can decrease the amount of information sent to the client in order to preserve state, however it can use costly resources on the server. The following are three server-based state management features Application State Session State State Management 41  Profile Properties

Contact For Tutorial and Notes Cikguhadi.com or PB LMS Digital Media Department