1. ASP.NET 4 Unleashed Chapter 1

3. .aspx page: contains C# script and HTML code including tags. Listing 1.1 FirstPage.aspx

4. Resulting HTML sent to browser. Listing 1.1 FirstPage.aspx Browser’s rendering of HTML code.

5. Elements of an ASP.NET Page Directives – controls compilation Code declaration – contains application logic in C# or VB ASP.NET controls – most need to appear within a tag in HTML portion Literal text and HTML tags – anything you can put in an HTML document See pages 41-51

6. Directives Preprocessing instructions that affect overall behavior of pages and controls. Directives have attributes that you can set for affecting behavior Syntax: begin with @ symbol…..embed in tags with attributes:

7. Every.aspx page will have a Page directive. One attribute of this directive indicates the language of its underlying code. Listing 1.1 FirstPage.aspx

8. Listing 1.2 SendMail.aspx The Import directive is used if you need to import a namespace. Namespace  a collection of related classes. In the Java world these are called packages.

9. Directives in ASP.NET

10. If the C# (or VB) code is held in the.aspx file, then it will be contained withing a tag that is specified to run on the server. Here we have code written in C#. Listing 1.1 FirstPage.aspx

11. An.aspx page is a web page, so it will contain HTML code (and could also contain JavaScript). So, you will see and and tags, among others. Listing 1.1 FirstPage.aspx

12. Unlike regular web pages, though,.aspx pages also include Web Server Controls. These will be represented by tags of various sorts. This is a Label, which ultimately renders a tag in the final HTML that is sent to the client’s browser. Listing 1.1 FirstPage.aspx

13. The id attribute of the tag determines the name of the corresponding C# or VB object in the corresponding code. Listing 1.1 FirstPage.aspx

14. Page_Load is an event-handler method of the Page class. This is triggered when a page is going to be loaded. Note the DateTime class…you should be familiar with this from CIS 221. You used many.NET framework classes then. Listing 1.1 FirstPage.aspx

16. Buttons and User-Generated Events

17. Listing 1.6 ShowButtonClick.aspx.aspx code C# code

18. Listing 1.6 ShowButtonClick.aspx Resulting HTML sent to browser. Browser’s rendering of HTML code. BEFORE THE BUTTON CLICK

19. Listing 1.6 ShowButtonClick.aspx Resulting HTML sent to browser. Browser’s rendering of HTML code. AFTER THE BUTTON CLICK

20. Listing 1.6 ShowButtonClick.aspx This is the even-handler method for the button click The Button web server control represented in an tag. The Button control’s OnClick attribute identifies the name of the method that will be invoked when the button is clicked.

21. Listing 1.6 ShowButtonClick.aspx Note that the Label initially has no text. However, when the button is clicked, the C# code assigns a value into the Label’s Text property, which will cause the text to appear.

22. Listing 1.6 ShowButtonClick.aspx A Button control renders an HTML input tag. A Label control renders an HTML span tag.

23. More with Buttons

24. Listing 1.7 ButtonCounters.aspx.aspx code

25. Listing 1.7 ButtonCounters.aspx Resulting HTML sent to browser. Browser’s rendering of HTML code. BEFORE THE BUTTON CLICK

26. Listing 1.7 ButtonCounters.aspx Resulting HTML sent to browser. Browser’s rendering of HTML code. AFTER SOME BUTTON CLICKS

27. Listing 1.7 ButtonCounters.aspx Like the Label control, Button controls have a Text property that can be initialized in the.aspx code and dynamically altered during runtime.

28. Listing 1.7 ButtonCounters.aspx In this example, both Button controls trigger the same event-handler. So, the event-handler needs to determine which button generated the event. The sender parameter is a reference to the event- generating control (like e.getSource() in Java event- handler methods) The code in the Button_Click method casts sender as a Button in order to set its Text property value. Note how the value is set by converting to a number, adding to that number, then converting back to a string.

29. Web Controls in the API Almost all Web control classes are in the System.Web.UI.WebControls Namespace. System.Web.UI.WebControls Almost all of the Web Controls are subclasses of WebControl

30. Image Buttons and Event Arguments

31. Listing 1.8 ShowEventArgs.aspx.aspx code

32. Listing 1.8 ShowEventArgs.aspx Resulting HTML sent to browser. Browser’s rendering of HTML code. BEFORE BUTTON CLICK

33. Listing 1.8 ShowEventArgs.aspx Resulting HTML sent to browser. Browser’s rendering of HTML code. AFTER BUTTON CLICK

34. ViewState An ASP.NET approach to maintaining state between postbacks Keeps track of values in WebControl properties as you progress through postbacks Accomplished by automatically creating a hidden input tag and setting values, then using these values during postback

35. Listing 1.9 ShowViewState.aspx.aspx code

36. Listing 1.9 ShowViewState.aspx Resulting HTML sent to browser. Browser’s rendering of HTML code. BEFORE BUTTON CLICK ViewState is an ASP.NET feature that enables the server controls to retain their state values across the form posts. For every ASP.NET Web Form, there will be a hidden form field called _VIEWSTATE. No matter whether the form contains any control or not, this hidden field exists as long as there is a form tag and the runat attribute set to server. The value of this hidden field contains all the state values of all the controls that are participated in the ViewState.

37. Listing 1.9 ShowViewState.aspx Resulting HTML sent to browser. Browser’s rendering of HTML code. AFTER BUTTON CLICK Note that the value of the _VIEWSTATE tag has changed…this is because values of server controls have been modified.

38. Listing 1.9 ShowViewState.aspx Resulting HTML sent to browser. Browser’s rendering of HTML code. AFTER BUTTON CLICK The _EVENTVALIDATION tag is a security feature. It verifies whether a postback from a control on client-side is really from that control and not from a malicious person trying to break your application..

39. For more on _VIEWSTATE and _EVENTVALIDATION Read this link: http://msdn.microsoft.com/en- us/magazine/cc163512.aspx http://msdn.microsoft.com/en- us/magazine/cc163512.aspx NOTE: you can disable View State for the whole page. In the @ Page directive, enter this attribute: enableviewstate=“false”

41. Listing 1.11 DisableViewState.aspx You can disable individual controls of the page. A Web Control’s EnableViewState property can be set to false

42. Listing 1.11 DisableViewState.aspx Resulting HTML sent to browser. Browser’s rendering of HTML code. BEFORE BUTTON CLICK

43. Listing 1.11 DisableViewState.aspx Resulting HTML sent to browser. Although Label2’s values are updating, Label1’s are not, because it’s View State has been disables. AFTER 3 BUTTON CLICKS

45. Listing 1.10 ShowTrace.aspx Trace attribute in @Page directive causes the page to display with detailed software trace information.

46. Listing 1.10 ShowTrace.aspx This example makes use of Calendar control.

47. Listing 1.10 ShowTrace.aspx Resulting HTML sent to browser. Note: some JavaScript is generated

48. Browser’s rendering of HTML code.

51. The Control Tree Every web page (html or.aspx) is a hierarchy of elements containing other elements containing other elements – The same is true for all markup documents (e.g. XML) Every element in an.aspx page is represented by ASP.NET via control classes (Web controls, HTML controls, or Literal controls) The trace shows the hierarchy of controls…this is called the Control Tree

52. Listing 1.13 ShowControlTree.aspx.aspx code

53. Listing 1.13 ShowControlTree.aspx HTML tags with runat=“server” are represented as HtmlControls.

54. Listing 1.13 ShowControlTree.aspx tags are represented by their corresponding WebControl-derived class.

55. Listing 1.13 ShowControlTree.aspx Text in the document that is not an element with runat=“server” are represented as LiteralControls.

56. Listing 1.13 ShowControlTree.aspx.This example makes use of a DropDownList, populated with ListItems. Resulting HTML Resulting HTML after select

57. Listing 1.13 ShowControlTree.aspx Resulting HTML sent to browser.

58. More About HTMLContols

59. Listing 1.5 HtmlControls.aspx Note: by indicating runat=“server for an HTML element you turn it into an HtmlControl object. Therefore, you can manipulate its properties at runtime.

60. Resulting HTML sent to browser. Browser’s rendering of HTML code. Listing 1.5 HtmlControls.aspx

62. Code-behind Files In large-scale applications, it’s best to separate the HTML/ASP code from the underlying C#/VB code. Code separation makes it possible for User Interface developers to work independently of Programmers. In.NET, this is accomplished through the use of code-behind files

63. Listing 1.14 FirstPageCodeBehind.aspx Here we have the.aspx code (HTML with tags only…no C# or VB code).

64. Listing 1.15 FirstPageCodeBehind.cs This is a separate file. Program code is completely separated from HTML code.

65. Listing 1.15 FirstPageCodeBehind.cs Code-behind classes are partial classes. A partial class indicates that other parts of the class (e.g. the.aspx stuff) can be defined elsewhere. The code-behind class is a subclass of Page, which is a class in the System.Web.UI namespace.

66. Listing 1.15 FirstPageCodeBehind.cs The using keyword in C# is identical to the import keyword in Java. Using namespaces is the same as importing packages.

67. Listing 1.15 FirstPageCodeBehind.cs Resulting HTML sent to browser. Browser’s rendering of HTML code. BEFORE BUTTON CLICK

68. Listing 1.15 FirstPageCodeBehind.cs Resulting HTML sent to browser. Browser’s rendering of HTML code. AFTER BUTTON CLICK

69. Page Events

70. Important Page Events Init – Occurs when the page is initialized (i.e. loaded from its first access from the browser), which is the first step in the its lifecycle. No controls within the page have been created yet, so they cannot be accesses or used. Load – Occurs every time the browser accesses the page (including during postback). By now controls in the page have been created and are available for use. Unload – Occurs when the page is unloaded from memory. This is time to do cleanup operations. Others: Prerender, Disposed, CommitTransaction, AbortTransaction, Error, DataBinding See page 44

71. Listing 1.16 ShowPageEvents.aspx Order of event handler processing: 1)Load 2)Button click (only if submit) 3)PreRender

72. Listing 1.16 ShowPageEvents.aspx Resulting HTML sent to browser. Browser’s rendering of HTML code. BEFORE BUTTON CLICK

73. Listing 1.16 ShowPageEvents.aspx Resulting HTML sent to browser. Browser’s rendering of HTML code. AFTER BUTTON CLICK

74. Postback Postback means the Page is being requested via an HTTP Post (typically by clicking a submit button) When the page loads, you may want to do something ONLY if it is not a Postback (i.e. first time you come to the page) isPostback property can be used

75. Listing 1.17 ShowIsPostBack.aspx This code will not happen if the submit button was clicked. Using a dropdown list. No initialization of items in the markup.

76. Listing 1.17 ShowIsPostBack.aspx Data binding a web control. In this case, a DropDownList is databound to an ArrayList

77. Listing 1.17 ShowIsPostBack.aspx Resulting HTML sent to browser. Browser’s rendering of HTML code. BEFORE SELECTION

78. Listing 1.17 ShowIsPostBack.aspx Resulting HTML sent to browser. Browser’s rendering of HTML code. AFTER SELECTING ORANGES (the obvious choice)

80. Listing 1.18 ShowError.aspx.aspx code

81. Listing 1.18 ShowError.aspx Resulting HTML sent to browser.

83. Listing 1.18 ShowError.aspx Browser’s rendering of HTML code. Not an error if you’re Chuck Norris

85. Listing 1.21 PageTrace.aspx.aspx code

86. Listing 1.21 PageTrace.aspx Resulting HTML sent to browser.

93. Listing 1.21 PageTrace.aspx Browser’s rendering of HTML code.