DEV401 Developing ASP.NET Server Controls - Part II: Adv Topics Tony Goodhew Product Manager Microsoft Corp

Agenda Introduction Build a real-world control – DataBoundTable Simplified version of ASP.NET DataGrid Control authoring topics covered Composition DataBinding Styles State Management Templates Control Designer topics covered DataBinding in the designer Template Editing in the designer

ASP.NET Control Gallery Lots of ISV-written controls are available Extensibility is a feature

Quick Review A server control is a programmable Web user interface component From Part I (DEV 300) Simple properties (ColoredLabel) Events (ActiveLabel) Client-side behavior (HoverLabel) Extending controls (BulletedList) Compositing controls (RequiredTextField)

DataBoundTable Tabular rendering of records in a data source Feature Attributes Flexible Can be bound to variety of data sources Manages state so page developer does not have to fetch data during each request Customizable Page developer can specify look and feel Styles and Templates Designable Can be customized at design-time Offers a design-time representation

DataBoundTable Usage <sample:DataBoundTable runat=“server” id=“dbt1” DataSource=‘ ’ EnableSelection=“true” OnSelectedIndexChanged=“dbt1_SelIndexChanged” Font-Name=“Verdana” Font-Size=“20pt” BackColor=“Beige” ForeColor=“Black”> This is the current list of available items.

DataBoundTable Usage Demo, Building DataBoundTable

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

Data-Bound Control Provides a DataSource property public IEnumerable DataSource { get; set; } Typically use a suitable collection interface E.g., IEnumerable, ICollection, or IList Creates control hierarchy Using the assigned data source on DataBind() Using ViewState on postback Overrides DataBind() method to enumerate objects in the assigned data source

Data-Bound Controls Basic Implementation Pattern Create same control tree with and without a data source void CreateControlHierarchy(bool useDataSource); protected override void CreateChildControls() { Controls.Clear(); CreateControlHierarchy(false); } protected override void DataBind() { OnDataBinding(EventArgs.Empty); Controls.Clear(); ClearChildViewState(); CreateControlHierarchy(true); }

Styles Implement Styles as get-only properties. Create Styles on-demand public virtual Style ItemStyle { get { if (_itemStyle == null) _itemStyle = new Style(); return _itemStyle; } Use by applying styles to controls during Render if (_itemStyle != null) item.ApplyStyle(_itemStyle);

Styles Merging multiple styles AlternatingItem is also an Item AlternatingItem’s should have both ItemStyle and AlternatingItemStyle applied TableItemStyle altStyle = _itemStyle; if (_altItemStyle != null) { altStyle = new TableItemStyle(); altStyle.CopyFrom(_itemStyle); altStyle.CopyFrom(_altItemStyle); }

State Management 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

State Management TrackViewState if (_itemStyle != null) { ((IStateManager)_itemStyle).TrackViewState(); } SaveViewState if (_itemStyle != null) { state[1] = ((IStateManager)_itemStyle).SaveViewState(); } LoadViewState if (state[1] != null) { ((IStateManager)ItemStyle).LoadViewState(state[1]); } On-demand Creation if (IsTrackingViewState) { ((IStateManager)_itemStyle).TrackViewState(); }

Templates Implement templates as simple get/set properties public ITemplate CaptionTemplate { get { return _captionTemplate; } set { _captionTemplate = value; } } Parser creates and assigns template Instantiate as part of creating child controls _captionControl = new Control(); _captionTemplate.InstantiateIn(_captionControl);

DataBoundTable Designer Offers a design-time experience to DataBoundTable Picking a DataSource in the property grid Sample rendering of DataBoundTable Template editing

Design-Time Overview Behavior through metadata Browsable, Category, Description attributes on properties DefaultProperty, DefaultEvent attributes on Controls Enhanced property editing through TypeConverters and UITypeEditors Dropdown for Color properties

Design-Time Overview Control Designers Customize rendering on design surface Showing sample data in DataGrid Manipulate a control to ensure meaningful design-time display Text on Label Template editing In-place editing of DataList templates

DataBoundTable Design-time Usage Demo, Building DataBoundTableDesigner

Metadata Attributes Declarative way to specify behavior DefaultProperty class metadata DefaultValue, Category, Description, Bindable etc. property metadata [ DefaultProperty(“DataSource”), DefaultEvent(“SelectedIndexChanged”) ] public class DataBoundTable : WebControl { [ Category(“Behavior"), DefaultValue(false), Description(“Toggles row selection") ] public bool EnableSelection { get {... } set {... } }

Enhanced Property Editing Customize conversion to/from a string using a TypeConverter Specify a UITypeEditor using EditorAttribute [ Editor( typeof(System.Web.UI.Design.ImageUrlEditor), typeof(UITypeEditor)) ] public string BackImageUrl {... }

Control Designers Derives from System.Web.UI.Design.ControlDesigner Associate using DesignerAttribute Typically used to provide a customized design-time rendering [ Designer(typeof(Microsoft.Samples.TechEd2003. WebControls.Design.DataBoundTableDesigner)) ] public class DataBoundTable : WebControl { … }

Design-Time HTML public string GetDesignTimeHtml() { string designTimeHtml = “”; try { // modify runtime control here // then render the control designTimeHtml = base.GetDesignTimeHtml(); } catch (Exception e) { designTimeHtml = GetErrorDesignTimeHtml(e); } finally { // restore runtime control to original state } if (designTimeHtml.Length == 0) { designTimeHtml = GetEmptyDesignTimeHtml(); } return designTimeHtml; }

DataSource Property at Design-Time DataSource is persisted as a data-binding ” … > Designer implements its own version of DataSource property which works on top of the DataBindings collection of a control Use the selected data source to generate sample data and data-bind to it at design- time as part of their GetDesignTimeHtml() implementation

DataSource Property at Design-Time public string DataSource { get { DataBinding binding = DataBindings["DataSource"]; if (binding != null) { return binding.Expression; } return String.Empty; } set { if ((value == null) || (value.Length == 0)) { DataBindings.Remove("DataSource"); } else { DataBinding binding = DataBindings["DataSource"]; if (binding == null) { binding = new DataBinding("DataSource", typeof(IEnumerable), value); DataBindings.Add(binding); } else { binding.Expression = value; } OnBindingsCollectionChanged("DataSource"); }

DataSource Property at Design-time Designer’s property replaces runtime property using property filtering, and is associated with a TypeConverter that implements a picker dropdown protected override void PreFilterProperties(IDictionary properties) { base.PreFilterProperties(properties); PropertyDescriptor prop = (PropertyDescriptor)properties["DataSource"]; prop = TypeDescriptor.CreateProperty(this.GetType(), prop, new Attribute[] { new TypeConverterAttribute(typeof(DataSourceConverter))}) ; properties["DataSource"] = prop; }

Template Editing Derive your designer from TemplatedControlDesigner Implement abstract methods GetCachedTemplateEditingVerbs CreateTemplateEditingFrame GetTemplateContent SetTemplateContent Use ITemplateEditingService and TemplatedControlDesigner helper methods

Template Editing In Action GetCachedTemplateEditingVerbs CreateTemplateEditingFrame GetTemplateContent SetTemplateContent

Template Editing Step 1: GetCachedTemplateEditingVerbs Provide list of verbs shown in context menu New TemplateEditingVerb(…) Step 2: CreateTemplateEditingFrame Provide information about templates associated with a TemplateEditingVerb Step 3: GetTemplateContent Use GetTextFromTemplate helper Step 4: SetTemplateContent Use GetTemplateFromText helper

Debugging Designers In your control project: Set the “Start Application” to devenv.exe Set “Debug mode” to Program Set breakpoints in your designer or control code F5 In the new Visual Studio.NET instance: Create a Web application Add a reference to your control assembly Drop your control on a web form

Key Take Aways Create controls with higher degree of abstraction Simplify app development, reusability Use styles and templates to provide customizability Provide rich design-time experience Visual representation in designer Custom editing metaphors Controls are the most important extensibility mechanism of ASP.NET Huge range of third-party opportunities

Essential Resources Developing Microsoft ASP.NET Server Controls and Components ASP.NET Forums at MSDN and.NET Framework SDK Documentation ISBN Download Source Code Design Guidelines ks/5728.asp

Ask The Experts Get Your Questions Answered

Community Resources Most Valuable Professional (MVP) Newsgroups Converse online with Microsoft Newsgroups, including Worldwide User Groups Meet and learn with your peers

Suggested Reading And Resources The tools you need to put technology to work! TITLE Available Microsoft® ASP.NET Programming with Microsoft Visual C#®.NET Version 2003 Step By Step: Today Microsoft® ASP.NET Setup and Configuration Pocket Reference: Today Microsoft Press books are 20% off at the TechEd Bookstore Also buy any TWO Microsoft Press books and get a FREE T-Shirt

Related Talks DEV 200, DEV 201: Introducing ASP.NET DEV 300: Building ASP.NET Controls, Part I: The Basics DEV 400: Black Belt WebForms Programming DEV 402: Extending the ASP.NET Runtime

Community Resources Most Valuable Professional (MVP) Newsgroups Converse online with Microsoft Newsgroups, including Worldwide User Groups Meet and learn with your peers

Questions And Answers

evaluations evaluations

© 2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS SUMMARY.

Abstract Explore advanced control building topics, including state management, composition, templates, data-binding, and providing rich design-time support for tools like Visual Studio.NET. Step through a complete real- world control - the “DataBoundTable” built end-to-end. Attendees should be familiar with creating basic ASP.NET server controls.