1. Building Custom Controls with ASP.NET and the Microsoft ®.NET Framework Rames Gantanant Microsoft Regional Director, Thailand ramesg@puumsoft.co.th

2. What We Will Cover Developing Web custom controls Developing Web custom controls Creating a control designer Creating a control designer Control rendering Control rendering Event handling Event handling Developing composite controls Developing composite controls

3. Session Prerequisites Level 200 Basic knowledge of C# Basic knowledge of C# Basic knowledge of EventHandling in.NET Basic knowledge of EventHandling in.NET Familiarity with the.NET Framework Familiarity with the.NET Framework Understanding of object-oriented programming Understanding of object-oriented programming Basic HTML / WYSIWYG experience Basic HTML / WYSIWYG experience

4. So Why This Presentation? Benefits of designing custom controls Benefits of designing custom controls Code reuse Code reuse Quick page development Quick page development Make easy changes to the site through controls Make easy changes to the site through controls

5. Agenda Web user controls versus custom controls Web user controls versus custom controls Creating a simple Web custom control Creating a simple Web custom control Implementing a control designer for design- time rendering Implementing a control designer for design- time rendering Rendering methods and how to use them Rendering methods and how to use them Handling postback events Handling postback events Developing a composite control Developing a composite control

6. Agenda Web user controls versus custom controls Web user controls versus custom controls Creating a simple Web custom control Creating a simple Web custom control Implementing a control designer for design- time rendering Implementing a control designer for design- time rendering Rendering methods and how to use them Rendering methods and how to use them Handling postback events Handling postback events Developing a composite control Developing a composite control

7. Web User Controls Versus Custom Controls Web user controls are compiled dynamically at run time Web user controls are compiled dynamically at run time Web user controls cannot be added to the Toolbox Web user controls cannot be added to the Toolbox The only way to share a Web user control between applications is to put a separate copy in each application The only way to share a Web user control between applications is to put a separate copy in each application Custom controls have full visual design tool support for consumers Custom controls have full visual design tool support for consumers

8. Creating a Simple Custom Control Inheriting from WebControl versus Control Inheriting from WebControl versus Control Consuming the control in a Web application Consuming the control in a Web application Adding a custom property to the control Adding a custom property to the control

9. Demonstration 1 Creating a Simple Custom Control

10. Agenda Web user controls versus custom controls Web user controls versus custom controls Creating a simple Web custom control Creating a simple Web custom control Implementing a control designer for design- time rendering Implementing a control designer for design- time rendering Rendering methods and how to use them Rendering methods and how to use them Handling postback events Handling postback events Developing a composite control Developing a composite control

11. Creating a Simple Web Custom Control WebControl provides typical Web user control properties WebControl provides typical Web user control properties Adding the control and Web application project within the same solution helps with developing and debugging Adding the control and Web application project within the same solution helps with developing and debugging The control can be added to the toolbox and even to the global assembly cache, allowing ease of use for multiple developers The control can be added to the toolbox and even to the global assembly cache, allowing ease of use for multiple developers

12. Creating a Simple Web Custom Control Creating an icon for the control helps distinguish it when added to the toolbox Creating an icon for the control helps distinguish it when added to the toolbox

13. Agenda Web user controls versus custom controls Web user controls versus custom controls Creating a simple Web custom control Creating a simple Web custom control Implementing a control designer for design- time rendering Implementing a control designer for design- time rendering Rendering methods and how to use them Rendering methods and how to use them Handling postback events Handling postback events Developing a composite control Developing a composite control

14. Demonstration 2 Implementing a Control Designer for Design-Time Rendering

15. System.Design.dll provides the base class for design-time rendering System.Design.dll provides the base class for design-time rendering GetDesignTimeHtml() overrides the default design-time rendering output GetDesignTimeHtml() overrides the default design-time rendering output Design-time and run-time HTML output are separate entities Design-time and run-time HTML output are separate entities Designer class is specified in the controls attribute list Designer class is specified in the controls attribute list

16. Agenda Web user controls versus custom controls Web user controls versus custom controls Creating a simple Web custom control Creating a simple Web custom control Implementing a control designer for design- time rendering Implementing a control designer for design- time rendering Rendering methods and how to use them Rendering methods and how to use them Handling postback events Handling postback events Developing a composite control Developing a composite control

17. Demonstration 3 Rendering Methods and How to Use Them

18. Override the Render() method when inheriting from Control Override the Render() method when inheriting from Control Override RenderContents() method when inheriting from WebControl Override RenderContents() method when inheriting from WebControl

19. Rendering Methods and How to Use Them Default “base-element” for a control is the element Default “base-element” for a control is the element Specify which base-class constructor should be called when creating instances of the derived class, such as base(HtmlTextWriterTag.A) for an element Specify which base-class constructor should be called when creating instances of the derived class, such as base(HtmlTextWriterTag.A) for an element Use AddAttributesToRender() method to add HTML attributes and styles to the control Use AddAttributesToRender() method to add HTML attributes and styles to the control

20. Agenda Web user controls versus custom controls Web user controls versus custom controls Creating a simple Web custom control Creating a simple Web custom control Implementing a control designer for design- time rendering Implementing a control designer for design- time rendering Rendering methods and how to use them Rendering methods and how to use them Handling postback events Handling postback events Developing a composite control Developing a composite control

21. Demonstration 4 Handling Postback Events

22. IPostBackEventHandler defines the method ASP.NET server controls must implement to handle postback events IPostBackEventHandler defines the method ASP.NET server controls must implement to handle postback events Define the click event Define the click event Invoke delegates registered with the click event Invoke delegates registered with the click event Define the method of IPostBackEventHandler that raises change events Define the method of IPostBackEventHandler that raises change events

23. Handling Postback Events Page.GetPostBackEventReference() obtains a reference to a client-side script function that causes, when invoked, the server to post back to the page Page.GetPostBackEventReference() obtains a reference to a client-side script function that causes, when invoked, the server to post back to the page

24. Agenda Web user controls versus custom controls Web user controls versus custom controls Creating a simple Web custom control Creating a simple Web custom control Implementing a control designer for design- time rendering Implementing a control designer for design- time rendering Rendering methods and how to use them Rendering methods and how to use them Developing a composite control Developing a composite control

25. Demonstration 5 Developing a Composite Control

26. INamingContainer interface identifies a container control that creates a new ID namespace within a Page object's control hierarchy (that is, it will provide a unique namespace for any server controls that it contains in the.aspx file) INamingContainer interface identifies a container control that creates a new ID namespace within a Page object's control hierarchy (that is, it will provide a unique namespace for any server controls that it contains in the.aspx file) EnsureChildControls() determines whether the server control contains child controls. If it does not, it creates child controls EnsureChildControls() determines whether the server control contains child controls. If it does not, it creates child controls

27. Developing a Composite Control CreateChildControls() notifies server controls that use composition-based implementation to create any child controls they contain in preparation for posting back or rendering CreateChildControls() notifies server controls that use composition-based implementation to create any child controls they contain in preparation for posting back or rendering

28. Developing a Composite Control Main Differences Between a Web User Control and a Custom Control Minimal design-time support for authoring Minimal design-time support for authoring Authored programmatically in an object- oriented programming language that targets the common language runtime Authored programmatically in an object- oriented programming language that targets the common language runtime Compiled and persisted as an assembly (.dll) Compiled and persisted as an assembly (.dll)

29. Session Summary WebControl derives from Control and exposes properties common to Web user controls WebControl derives from Control and exposes properties common to Web user controls Adding the control and Web application project in the same solution makes it easier to debug, rebuild, and test while developing Adding the control and Web application project in the same solution makes it easier to debug, rebuild, and test while developing The control can be added to the toolbox and even to the global assembly cache to make it easy for multiple developers to use on different machines The control can be added to the toolbox and even to the global assembly cache to make it easy for multiple developers to use on different machines

30. Session Summary, Continued Composite controls are compiled and persisted as an assembly (.dll) Composite controls are compiled and persisted as an assembly (.dll) RaisePostBackEvent enables a server control to process an event raised when a form is posted to the server RaisePostBackEvent enables a server control to process an event raised when a form is posted to the server

31. For More Information… MSDN ® Web site at MSDN ® Web site at  msdn.microsoft.com ASP.NET ASP.NET  www.asp.net

32. Microsoft, Windows, the Windows logo, MSDN, Visual Basic.NET, Visual Studio.NET, Microsoft Press, are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries. The names of actual companies and products mentioned herein may be the trademarks of their respective owners.