1. Svetlin Nakov Telerik Corporation www.telerik.com

2. 1. Introduction to ASP.NET  ASP.NET Benefits 2. ASP.NET Architecture Overview  Separation of Presentation from Logic 3. ASP.NET Base Components  Web Forms  Web Controls 2

3. 4. ASP.NET Execution Model  Application Life Cycle  Page Life Cycle 6. Creating ASP.NET forms 7. Code-behind 8. Directives 3

4. 9. Controls Class Hierarchy 10. HTML Server Controls 11. Web Server Controls  Basic Web Controls  Validation Controls  List Controls  Rich Controls 12. Web Server Control Life Cycle 13. HTML Escaping 4

6.  Separate presentation from code  Object-oriented approach  Component-based development  Event-driven architecture  Code compilation  Extensible architecture  Built-in state management  Many others (data binding, validation, master pages, etc.) 6

8.  ASP.NET applications are executed via a sequence of HTTP requests and HTTP responses  Client Web browser request ASPX pages  The Web server executes the ASPX page and produce XHTML + CSS + JavaScript 8

9. Windows Server Internet Information Server (IIS) ISAPI Filters (aspnet_isapi.dll) ASP.NET runtime (aspnet_wp.dll / w3wp.dll) XML-basedconfiguration HttpApplication Cache HttpModules Session state Authentication … Session state Authentication … HttpHandlers ASP.NET pages ASP.NET Web services … Html Controls AJAX Web controls User controls …

10.  Traditional Web pages (static HTML)  Consist of static HTML, images, styles, etc.  Execute code on the client side  Simple operations  ASP.NET Web Forms  Execute code on the server side  Database access  Dynamic pages  Higher security level 10

11.  Traditional Web development keep HTML and programming code in one file (PHP, ASP, …)  Hard to read, understand and maintain  Hard to test and debug  ASP.NET splits the Web pages into two parts: .aspx file containing HTML for visualization  "Code behind" files (.cs for C#) containing presentation logic for particular page 11

12.  Class generated from the.aspx file does not derives directly from Page class  Derives from class defined in the "code behind", where it is easy to add methods, event handlers, etc.  Using "code behind" separates the presentation logic from UI visualization 12 System.Web.UI.Page TestForm.aspx.cs TestForm.aspx

13.  Steps to create a simple ASP.NET Web application: 1.Start Visual Studio 2.Create “New Web Site” 3.Add two text fields, a button and a label 4.Handle Button.Click and implement logic to calculate the sum of the values in the text fields 5.Display the results in the label 13

14. Live Demo

16.  Web Forms – deliver ASP.NET user interface  Web Control – the smallest part we can use in our Web application (e.g. text box)  "Code behind" – contains the server-side code  Web.config – contains ASP.NET application configuration  Machine.config – contains configuration for all applications on the ASP.NET server  Global.asax – class containing application level event handlers 16

17.  ASP.NET Web controls are the smallest component part  Deliver fast and easy component-oriented development process  HTML abstraction, but finally everything is HTML 17 Text="Click me!" OnClick="btn_Click" />

18.  Main settings and configuration file for ASP.NET  Text based XML document  Defines:  Connection strings to any DB used by app  The default language for child pages  Whether debugging is allowed 18 Minimal Web.config should look like this

19.  Text based XML document  Contains settings that apply to an entire computer 19

20.  Also known as ASP.NET application file  Located in the Web application root folder  Exposes application and session level events  Application_Start  Application_End  Session_Start  Session_End  … 20

21. Live Demo

23.  First call to particular page 23

24.  Any other call after the first 24

25. 1. IIS receives the HTTP request 2. IIS using ISAPI sends the request to aspnet_wp.exe 3. ASP.NET receives request for the first time 4. Basic ASP.NET objects are created for every request (e.g. Request, Response, etc.) 5. Request is associated with the HttpApplication object 6. HttpApplication process the request 25

26.  PreInit  Init  InitComplete  PreLoad  Load  LoadComplete  PreRender  PreRenderComplete  SaveStateComplete  Unload 26

27.  PreInit  Create or recreate controls, set the master page or theme  Init  InitComplete  PreLoad  Load  LoadComplete  PreRender  PreRenderComplete  SaveStateComplete  Unload 27

28.  PreInit  Init  All controls are initialized  Use it to set some control properties  InitComplete  PreLoad  Load  LoadComplete  PreRender  PreRenderComplete  SaveStateComplete  Unload 28

29.  PreInit  Init  InitComplete  Use it when you need all the control initialization done  PreLoad  Load  LoadComplete  PreRender  PreRenderComplete  SaveStateComplete  Unload 29

30.  PreInit  Init  InitComplete  PreLoad  Some processing before Load event  After this the Page object loads the view-state  Load  LoadComplete  PreRender  PreRenderComplete  SaveStateComplete  Unload 30

31.  PreInit  Init  InitComplete  PreLoad  Load  Here we do common processing (e.g. bind controls)  LoadComplete  PreRender  PreRenderComplete  SaveStateComplete  Unload 31

32.  PreInit  Init  InitComplete  PreLoad  Load  LoadComplete  PreRender  Executed after data binding  Make some final changes over controls  PreRenderComplete  SaveStateComplete  Unload 32

33.  PreInit  Init  InitComplete  PreLoad  Load  LoadComplete  PreRender  PreRenderComplete  Happens right before the page content is rendered  SaveStateComplete  Unload 33

34.  PreInit  Init  InitComplete  PreLoad  Load  LoadComplete  PreRender  PreRenderComplete  SaveStateComplete  Any changes over the page content are ignored  Unload 34

35.  PreInit  Init  InitComplete  PreLoad  Load  LoadComplete  PreRender  PreRenderComplete  SaveStateComplete  Unload  Page is unloaded from memory 35

36. Live Demo

38.  ASP.NET Web Form is a programmable Web page (.aspx file)  Acts as a user interface (UI) of an ASP.NET application  Consists of HTML, code and controls which are executed on a web server  The user sees the result in the form of HTML generated by the web server  The code and controls which describe the web form don’t leave the server 38

39.  The functionality of the Web form is defined by using three layers of attributes 39 <%@ Page Language="c#" Codebehind="TestWebForm.aspx.cs" Codebehind="TestWebForm.aspx.cs" Inherits="MyFirstWebApplication.WebForm"%> Inherits="MyFirstWebApplication.WebForm"%> My First WebForm My First WebForm

40.  Page attributes define global functionality 40 <%@ Page Language="c#" Codebehind="TestWebForm.aspx.cs" Codebehind="TestWebForm.aspx.cs" Inherits="MyFirstWebApplication.WebForm"%> Inherits="MyFirstWebApplication.WebForm"%> My First WebForm My First WebForm

41.  body tags define the appearance of a web page  MS_POSITIONING : FlowLayout, GridLayout 41 <%@ Page Language="c#" Codebehind="TestWebForm.aspx.cs" Codebehind="TestWebForm.aspx.cs" Inherits="MyFirstWebApplication.WebForm"%> Inherits="MyFirstWebApplication.WebForm"%> My First WebForm My First WebForm

42.  form attributes define how the groups of controls are going to be processed 42 <%@ Page Language="c#" Codebehind="TestWebForm.aspx.cs" Codebehind="TestWebForm.aspx.cs" Inherits="MyFirstWebApplication.WebForm"%> Inherits="MyFirstWebApplication.WebForm"%> My First WebForm My First WebForm

43.  Defines how the controls are going to be processed  In a Web form there can be several tags  Only one server-side tag 43 HTML version … …

…

…

ASP.NET version (only 1) … …

…

…

44.  id – form identifier  method - specifies the method of sending information back to the server  GET – in the URL  POST – within the body of the HTTP request  runat - tells the parser that the tag is not an HTML element but an ASP.NET server control 44

45. 45 WebFormTest WebFormTest "Microsoft Visual Studio 7.0"> "http://schemas.microsoft.com/intellisense/ie5"> HTML and controls go here HTML and controls go here

46. Live Demo

48.  Writing code in an ASP.NET Web form is done in three ways:  Mixed code method  The code is in the same file as the web content, mixed with the HTML code  This method is not recommended as the source code is hard to read and maintain  Inline code method  Code-behind method 48

49.  Writing code in an ASP.NET web form is done in three ways:  Mixed code method  Inline code method  The code is separated in a SCRIPT section in the same file  Code-behind method 49

50.  Writing code in an ASP.NET web form is done in three ways:  Mixed code method  Inline code method  Code-behind method  The code is in the code-behind page – a separate file from the HTML content  When using Visual Studio.NET this is the default method 50

51. 51 private void btn_Click(object sender, private void btn_Click(object sender, System.EventArgs e) System.EventArgs e) {...... } .", "width": "800" }

53.  A separate compiled file containing the program logic of the page  Each web page has its own code-behind page  Has the same name as the web page to which it is attached  The file extension is.aspx.cs  The two files are built into one when the application is started 53

54.  To associate an.aspx page to its code-behind class the @Page directive is used  VS.NET adds three attributes to the @Page directive:  Inherits – allows the.aspx page to derive from the code-behind class  Codebehind – used internally by Visual Studio.NET to associate the files  Src – contains the name of the code-behind page  Used if the application is not precompiled 54

55. 55 <%@ Page Language="c#" Inherits="MyProject.WebFormTest"Codebehind="WebFormTest.aspx.cs" Src="WebFormTest.aspx.cs" %>

56.  The Code-behind page can be either precompiled or just-in-time (JIT) Compiled  JIT compilation  A compilation at first request  Set by the Src attribute of the @Page directive  VS.NET doesn’t add it by default 56

57.  Precompilation  Avoids the delay at first request  Simplifies the deployment of the web application  The source code of the code-behind class is not necessary 57

59.  Provide control over many options affecting the compilation and execution of the web form  Important directives:  @Page – main directive of the page  @Import – imports a namespace into the  @Assembly – attaches an assembly to the form when it is compiled  @OutputCache – controls the ability of the forms to use cache  @Register – registers a user control to be used in a web form 59

60.  Defines a form specific (.aspx file) attributes used by the parser and the compiler of ASP.NET  Important attributes:  AutoEventWireup  Culture – a culture used when the page is generated  UICulture – a culture used for the visualization of data 60

61.  Important attributes:  Debug – whether the page is compiled with debug symbols in it  EnableSessionState – whether a session is supported  EnableViewState – whether to use "view state“ or not  ErrorPage – a page to which to redirect in case of unhandled exception 61

62.  Important attributes:  Language – states the program language used to script the page  Codebehind – points to the code-behind file where the page logics is stored  Smart-Navigation – improves user experience over post backs  Persists element focus and scroll position  Avoids flickers  Supported by IE 5.5 or later  Shouldn’t use it - problematic 62

63. Live Demo

64.  ASP.NET server controls  The smallest ASP.NET Component  Wrap an HTML UI element, or more complex UI  Component-oriented programming model  Executed and rendered at the server side  Example of ASP.NET server controls:       … 64

65.  Mandatory properties for all server controls:  runat="server"  ID="…"  Programming model based on events  Each user interaction causes and event  Programmer decides which events to handle  Browser-specific HTML is generated  Controls deliver appropriate HTML depending on browser type 65

67.  System.Web.UI.Control  Base for all controls  Properties – ID, Page, ViewState, Context, ClientID, Controls  Methods – Render(HtmlTextWriter writer) 67

68.  System.Web.UI.HtmlControls.HtmlControl 68

69.  System.Web.UI.WebControls.WebControl  System.Web.UI.TemplateControl 69

71.  HTML server controls are very simple extension of Control class  Look like traditional HTML  Defined by runat ="server"  Simple HTML seems like text on the server  If an HTML element is converted to HTML server control, a server side object is associated with it  Valid only inside a Web form tag: 71 … …

72. 72 void ButtonSubmit_Click(Object sender, EventArgs e){ void ButtonSubmit_Click(Object sender, EventArgs e){ Response.Write("Value: "+TextField.Value+" "); Response.Write("Value: "+TextField.Value+" "); } HTML Server Controls HTML Server Controls onserverclick="ButtonSubmit_Click" type="button"/> HTML Server Controls HTML Server Controls onserverclick= ButtonSubmit_Click type= button /> ", "description": "72 void ButtonSubmit_Click(Object sender, EventArgs e){ void ButtonSubmit_Click(Object sender, EventArgs e){ Response.Write( Value: +TextField.Value+ ); Response.Write( Value: +TextField.Value+ ); } HTML Server Controls HTML Server Controls onserverclick= ButtonSubmit_Click type= button /> ", "width": "800" }

73. Live Demo

74.  HtmlForm – …  HtmlForm – …  HtmlInputText –  HtmlInputText –  HtmlButton –  HtmlButton –  HtmlAnchor – …  HtmlAnchor – …  HtmlSelect –  HtmlSelect –  HtmlTable, HtmlTableCell, HtmlTableRow – …  HtmlTable, HtmlTableCell, HtmlTableRow – …  HtmlImage –  HtmlImage – ... 74

75.  HtmlGenericControl  Used for all other HTML elements    … 75

76. 76 void Page_Load(Object sender, EventArgs e) { void Page_Load(Object sender, EventArgs e) { this.MetaInfo.Attributes["name"] = "description"; this.MetaInfo.Attributes["name"] = "description"; this.MetaInfo.Attributes["content"] = "The page was this.MetaInfo.Attributes["content"] = "The page was generated on: " + DateTime.Now.ToString(); generated on: " + DateTime.Now.ToString();} … … … … ", "description": "76 void Page_Load(Object sender, EventArgs e) { void Page_Load(Object sender, EventArgs e) { this.MetaInfo.Attributes[ name ] = description ; this.MetaInfo.Attributes[ name ] = description ; this.MetaInfo.Attributes[ content ] = The page was this.MetaInfo.Attributes[ content ] = The page was generated on: + DateTime.Now.ToString(); generated on: + DateTime.Now.ToString();} … … ", "width": "800" }

77. Live Demo

79.  Web server controls are server UI controls that abstract the common HTML elements  Have own lifecycle and functionality  Come with.NET Framework  Located in System.Web.UI.WebControls namespace, inherit from the WebControl class  HTML Abstraction  Rendered HTML tags are quite different from the design-time markup 79

80.  Rich functionality  Type-safe programming capabilities  Automatic Web browser detection  AutoPostBack  Sumbit when the focus is lost  Support for themes 80

81. 81 tag_prefix determines unique namespace for the web control The name of the control Attributes are properties of the Web control Mandatory attribute runat="server"

82. 82 Text="" Visible="false" /> Text="Submit" OnClick="ButtonSubmit_Click" />… protected void ButtonSubmit_Click( object sender, EventArgs e) object sender, EventArgs e){ this.LabelResult.Text = this.LabelResult.Text = "You entered: " + this.TextBoxInput.Text; "You entered: " + this.TextBoxInput.Text; this.LabelResult.Visible = true; this.LabelResult.Visible = true;}

83. Live Demo

84.  The WebControl class defines properties, events and methods for all Web controls  Control the appearance  BackColor  ForeColor  BorderWidth  BorderStyle  BorderColor 84

85.  Control the behavior  Enabled  Visible  TabIndex  ToolTip  …  Not all controls support all these properties  See the documentation for details 85

86. Basic Web Controls

87. …

…

…

88.  Creates single-line or multiline text-box  Lets the user to enter text  Properties  Text  TextMode  SingleLine, MultiLine, Password  MaxLength  ReadOnly  AutoPostBack  Events  TextChanged – combined with AutoPostBack 88

89.  Display static text in a block  Allows programmatically to manipulate it  Properties  Text  AssociatedControlID – on click focus goes to the specified control  Events  TextChanged – combined with AutoPostBack 89 CAUTION: the Text is NOT HTML encoded before it is displayed in the Label control. This make it possible to embed script within HTML tags in the text.

90.  Display static text  Allows programmatically to manipulate it  Unlike the Label control, Literal does not let you apply styles to its content  Properties  Text  Renders the Text property value directly 90 CAUTION: the Text is NOT HTML encoded before it is displayed in the Literal control. This make it possible to embed script within HTML tags in the text.

91.  Implement IButtonControl  Properties  Text – button's title  CommandName – pass a command  CommandArgument – pass command arguments  PostBackUrl – posts back to specified page  CausesValidation – perform validation or not  ValidationGroup – which validation group to be validated 91

92.  Events  Click  Command  CommandName and CommandArgument are passed to code behind 92

93.  Different button types  Button  Creates a push button  Submit button by default  Different button types  ImageButton  Display an image that responds on mouse click  ImageURL – URL to displayed image  Both Click and Command events are raised 93

94.  Different button types  Command Button  Has command name associated ( CommandName property)  Programmatically determine which button is clicked in Command event handles  Used in templated controls, e.g. GridView 94

95.  Different button types  LinkButton  Same functionality as Button  Renders as hyperlink  Use Hyperlink if you want to link to another page  Renders JavaScript on the client browser 95

96. 96 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Untitled Page Untitled Page Text="Normal Button"/>

97. 97 OnCommand="OnCommand"/> OnClick="OnBtnClick"/> Text=""/>

98. 98 Live Demo

99.  The Panel control  Container for other controls  Rendered as  Rendered as  Useful for:  Displaying and hiding groups of controls  Generating and inserting controls at runtime 99

100.  Properties  ScrollBars  Modify visibility and position of scroll bars  Wrap  Value indicating whether the content wraps within the panel  GroupingText  Caption for the group of controls that is contained in panel control  DefaultButton  Button to be pressed by default (Enter) 100

101. Live Demo

102.  The PlaceHolder control  Reserves a space in the page control hierarchy  Used to add controls to the page at runtime  Does not produce any visible output  Controls  Use it to add, insert or remove controls from PlaceHolder Control 102

103.  Select between checked / unchecked  Properties  Checked  Text  Control caption  AutoPostBack  Automatically posts back the page when control state is changed 103

104.  CausesValidation  Whether validation is performed  ValidationGroup  Which validation group to be validated  Events  CheckChanged 104

105.  Creates a radio button on the Web Forms page  Properties  Text  GroupName  Allow a mutually exclusive selection from the group 105

106. Performing Control Validation

107.  The ASP.NET Web forms validation controls  Validate the values that are entered into other controls of the page  Two modes of validation  Client-side validation  Server-side validation  Validation is performed at page submit 107

108.  Most important validation controls:  RequiredFieldValidator  RangeValidator  CompareValidator  RegularExpressionValidator  CustomValidator  ValidationSummary 108

109. Live Demo

110. Displaying Lists of Items

111.  List Web controls  Display list of items, e.g. table of rows  Support binding to a collection  Display rows of data in templated format  Expose DataSourceID, DataSource, DataMember properties  Bind to collection that support IEnumerable, ICollection or IListSource 111

112.  ListBox  CheckBoxList  RadioButtonList  Repeater  DataList  GridView  DropDownList 112

113. Live Demo

114. Rich Controls

115.  Task-specific controls  Built with multiple HTML elements  Rich functionality  Examples:  Calendar  AdRotator 115

117.  Init  ViewState  Load  Send Postback Change Notification  Handle Postback events  PreRender  Save State  Render  Dispose  Unload 117

118.  Control initialize settings needed during incoming web request  Init event ( OnInit method) 118

119.  At the end of this phase ViewState property is automatically populated  Override LoadViewState method to customize state restoration  LoadViewState method 119

120.  Perform actions common to all requests  Server controls in the tree are created and initialized  Control state from previous round trip is restored including client – side data  Load event ( OnLoad method) 120

121.  Raise change events in response to state changes between previous and current postbacks  RaisePostDataChangedEvent method  IPostBackDataHandler should be implemented 121

122.  Handle client-side events caused postback  Raise appropriate events on the server  RaisePostBackEvent method  IPostBackEventHandler should be implemented 122

123.  Perform any updates before the control is rendered  Changes made in this phase can be saved  PreRender event ( OnPreRender method) 123

124.  ViewState property is persisted  Send to the client and back as a hidden field  SaveViewState method 124

125.  Generates the output which will be send to the client  Any changes to controls state made here are lost  Render() method 125

126.  Final clean up  Expensive resources should be released  Dispose() method 126

127.  Final clean up  Usually clean up is performed in previous phase so this event is not handled  UnLoad event ( OnUnLoad() method) 127

128. Live Demo

130.  HTML escaping is the act of replacing special characters with their HTML entities  Escaped characters are interpreted as character data instead of mark up  Typical characters to escape  – start / end of HTML tag  & – start of character entity reference  ', " – text in single / double quotes  … 130

131.  Each character could be presented as HTML entity escaping sequence  Numeric character references:  ' λ ' is λ, λ ; or λ ;  Named HTML entities:  ' λ ' is λ  ' < ' is <  ' > ' is >  ' & ' is &  " (double quote) is " 131

132.  Cross-site scripting (XSS) is a common security vulnerability in Web applications  Web application is let to display a JavaScript code that is executed at the client's browser  Crackers could take control over sessions, cookies, passwords, and other private data  How to prevent from XSS?  ALWAYS validate the user input  Perform HTML escaping when displaying text data in a Web control 132

133.  ValidateRequest attribute of Page directive  Checks all input data against a hard-coded list of potentially dangerous values  The default is true  Using it could harm the normal work on some applications  E.g. a user posts JavaScript code in a forum  Escaping is better way to handle the problem! 133

134.  HttpServerUtility.HtmlEncode  HTML encodes a string and returns the encoded string  Page.Server is instance of HttpServerUtility The following script The following scriptOutput: Web browser renders the following: 134 <%response.write(Server.HTMLEncode( "The image tag: "))%> "The image tag: "))%> The image tag: <img> The image tag: The image tag:

135. Live Demo

136. Questions?

137. 1. Start Visual Studio 2010 and make new Web Site. Look at the files generated and tell what's purpose of each file. Explain "code – behind" model. Print "Hell ASP.NET" from code – behind and from UI. Show automatic generated files in executing directory using Assembly.GetExecutingPath(). 2. Create a Web page which saves empty file in ProgramFiles directory. Configure directory security so IIS process to be able to write in there. 3. Catch all the events in page lifecycle using appropriate method or event handler. 137

138. 4. Do some kind of tracing of these events. 5. Create an HTML form that posts the contents of a textarea field to a server and the server prints it in another field. Don’t use code-behind. 6. Create an ASP.NET web form which posts the contents of a textarea field to a server and the server prints it in another field. 7. Use the src attribute of the @Page directive to create a page that doesn’t need to be precompiled. 138

139. 1. Using the HTML server controls create a random number generator Web application. It should have two input fields defining a range (e.g. [10..20]) and a button to generate a random number in the range. 2. Re-implement the same using Web server controls. 3. Define a Web form with text box and button. On button click show the entered in the first textbox text in other textbox control and label control. Enter some potentially dangerous text. Fix issues related to HTML escaping – the application should accept HTML tags and display them correctly. 139

140. 4. Make a simple Web form for registration of students and courses. The form should accept first name, last name, faculty number, university (drop-down list), specialty (drop-down list) and a list of courses (multi- select list). Use the appropriate Web server controls. After registration you should display summary of the entered information as formatted HTML. use dynamically generated tags (,, …). 5. Implement the "Tic-tac-toe" game using Web server controls. The user should play against the computer which should implement some kind of intelligence. 140

141. 6. Make a simple Web Calculator. The calculator should support the operations like addition, subtraction, m 6. Make a simple Web Calculator. The calculator should support the operations like addition, subtraction, multiplication, division, square root and module. Also the calculator should be able to work with decimal numbers. Validation is essential! 141