ASP.NET Server Controls

1. ASP.NET Server Controls Presented By: Robin Lilly iLogbook

2. Agenda • Introduction • Basic control authoring topicsImplementing properties • Rendering • Raising Events • Extending existing controls • Compositing existing controls

3. Agenda • Build some real world examples • 2 ADA controls • Label • <label for=<%=ClientID%>Name</label>, • Textbox • Inherited textbox that implements onfocus & onblur • Inspect a Shopping Cart • Composite Control • Inspect code • CreateChildControls() • BackButton prevention via session state • Properties • UI Type Editor • Events • State Management – View State and Session

4. What Is A Server Control? • A server control is a .NET component that is used to generate the user interface of an ASP.NET Web application. • It is implemented as a managed class deriving directly or indirectly from the System.Web.UI.Control base class.

5. What Is A Server Control?Speaking More Practically… • A Web user interface element • Renders into HTML, script or a different markup format • Allows customization of rendering • A Web user interface component • Exposes properties, events and methods and is programmable • Provides higher level abstractions • Performs post-back processing • Handles differences between browsers • Consistent programming model • A RAD component that offers adesign-time experience

6. 2 Ways To AuthorServer Controls • User Controls • Simple, declarative authoring model (.ascx file) • Scoped to a single application • Well suited to static content and layout • “Custom” or Compiled Controls • Code-based authoring model (.cs or .vb class file) • Easily shared across applications • Well suited to dynamic or programmatic generation of content and layout • More complex, but also more capabilities

7. Setting up your Solution • Use a WebControlLibrary project to create custom compiled controls • Initialize the Version attribute • Add a Web app to test controls • Solution > Add New > Web Application • Add a ToolBox reference • Customize Toolbox > Browse

8. Rendering • Override Render to representative markup • Use HtmlTextWriter API to implement rendering logic public override void Render(HtmlTextWriter writer) { writer.RenderBeginTag(HtmlTextWriterTag.Span); writer.Write(Text); writer.RenderEndTag(); }

9. Custom Toolbox Glyph • Bitmap file with same base name as control class in the same namespace • TextBoxADA • Build Action = “Embedded Resource” • Image properties: • File type supported is bitmap • 16x16 pixels • Lower-left pixel is used to determine transparency • Adds an extra professional touch

10. Building Controls In Visual Studio .NET • Setting up your Solution • Choosing a Tag Prefix • Choosing a Toolbox Glyph • Debugging your Control

11. What is the ADA? • Defines web accessibility • American Disabilities Act or US Section 508 compliance http://www.section508.gov/http://www.usdoj.gov/crt/ada/adahom1.htm • Universities and Governments are required to implement.

12. Some Requirements for ADA • Input controls must have a description of the input item.

13. Requirements for ADA • Lets see it in action http://localhost/serverregistration/registration2.aspx

14. ADALabel • Simple, minimal control • Renders a <label for=clientid>Name</label> • Inherits from LiteralControl • Metadata on properties • Demonstrates state management • Uses ViewState in property implementation • Demonstrates basic rendering • Render Method

15. ADATextBox • Simple, minimal control • Renders in TextBox • onfocus="if(this.value=='Enter Serial Number')value='';" • onblur="if(this.value=='')value='Enter Serial Number';“ • Inherits from LiteralControl • Inherits from TextBox • Demonstrates state management • Uses ViewState in property implementation • Demonstrates basic rendering • AddAttributesToRender method

16. ADATextBox • Metadata on properties • Declarative way of specifying behavior • Property editing in property browser • Property persistence • Conversion of types to/from strings • Metadata can be applied to events, methods and types as well

17. demo ADATextBox ADALabel State managed properties, Rendering

18. Composite Control • Contains Table, TableRows and TableCells, Textbox, Button • Implements the standard composite control pattern • Implements INamingContainer • Overrides Controls property to ensure child controls • Overrides CreateChildControls to implement logic of creating child controls

19. Why Our own Shopping Cart at UTEP • Needed to call our own credit card api – TOUCHNET internally • Needed to be reusable by all programmers • Handle financial accounting transactions differently. • Nothing existed that solved the problems

20. Shopping Cart Composite

21. CreateChildControls

22. AddDataGrid

23. AddDataGrid (cont)

24. AddDataGrid (cont)

25. Event Implementation • Standard event pattern has two parts • Event declaration • On<Event> protected virtual method Public Event FinishShopping as ShoppingEventHandler Protected Sub OnFinishShopping(E as ShoppingEventArgs) RaiseEvent FinishShopping(Me,E) End Sub

26. Events Implemented • SuccessShopping • CancelShopping • FinishShopping

27. ShoppingEventArgs

28. Shopping Session Table • Exists to prevent Recharges • Hitting the Back in Browser and then recharging the card for the same purchase

29. Session State Table • CreateSessionShoppingCart

30. Shopping Session Table • IsSessionShoppingCartExist

31. Session State Procedures • DeleteOldShoppingCartSessions delete SessionShoppingCart where CreateDate < DateAdd(day,-7,GetDate())

32. Add Item to Cart

33. demo Shopping Cart

34. CartData

35. MySession

36. EmptyCart • Used after Finish Shopping?

37. AddCreditCard

38. AddCreditCard

39. AddCreditCard (cont)

40. AddCreditCard

41. AddCreditCard(cont)

42. Successful Charge

43. Charge Credit Card Button

45. Some of Public Style Properties • ItemHeaderText - get/set • DescriptionHeaderText – get/set • QuantityHeaderText – get/set • PriceHeaderText – get/set • AmountHeaderText – get/set • DisplayQuantity – get/set • DisplayGrid – get/set • DataGridCSSClass – get/set DataGrid Style • ValidateCSSClass – get/set Validator Styles • RequireCSSClass – get/set Required Validator Styles • DisplayErrorStar – get/set Bool • DataGridBackColor – get/set Color • DataGridHeaderColor – get/set Color • DataGridForeColor – get/set Color

46. State Management • Session vs. View State • View State: • Override various methods to perform custom state management • TrackViewState • SaveViewState • LoadViewState • Required any time you have nested objects like Styles or collection properties • Call on IStateManager implementation of these objects to include their state as part of Control’s state

47. Key Points • Controls provide an abstraction and reusability mechanism for web apps • ASP.NET provides a rich framework for creating server controls • Create specialized derived controls to make incremental changes toexisting controls • Use composition to leverage existing controls in more specialized scenarios • Think about your Markup!!!!!

48. Essential Resources Developing Microsoft ASP.NET Server Controls and Components ISBN 0-7356-1582-9 Download • Source Code • Design Guidelines http://www.microsoft.com/mspress/books/5728.asp • ASP.NET Forums at http://www.asp.net/forums • MSDN and .NET Framework SDK Documentation

49. Download http://www.ilogbook.com/ Samples

50. Questions… And Answers