Skip to main content

70-562 Custom Controls


Custom Controls

A custom control will be an assembly, therefore to start a new custom control, add a new project, Web->Asp.Net Server Control.

The Text property by default is set to get a value from the ViewState , if null return the control's ID, if not, the string found in the ViewState.

The next method provided by default when creating a user control is the REnderContents method that takes HTMLTextWriter and will write that Text to it's stream, which is the HTML stream.

If a server control has the attributes, after being built, VS can see it in the solution and makes it available in the toolbox.

The class representing the Custom Control will inherit from WebControl class, and RenderContents method is one of it's base methods.

To write explicit HTML tags, use the WriteFullBeginTag(HTMLTextWriterTag.) method, the 'full' methods allow attributes.

The major goal of a web custom control is to 'spit' HTML.

If the control will handle postbacks, it is required to also implement the post back interface.(IPostBackDataHandler)

There is the AddAttribute method, WriteAttribute methjods of the HTMLTextWriter object, with this method you can aslo write a line, a tab, etc.

In the constructor of the control, pass the HTMLTextWriterTag.Select to the base constructor to create a drop down box, this will only create the opening and closing tag, not it's content, this wil be done by adding attributes.

The unique ID attribute will be needed to survive a post back, this will be done by adding the Name attribute.

The client side script needs to be added for AutoPostBack, this will be done by adding the OnChange attributes.

If the AutoPostBack attribute is true, create a ClientScriptManager class from the Page.ClientScript instance. The set the HTMLTextWriterAttribute.Onchange using the writer.AddAttribute.

About implementing PostBacks, when a postback executes, the page runs the LoadPostData method for all controls implementing the IPostBackDataHandler, the LoadPostData determines if the value changed and returns true if so.

For each control that returns true, the page framework calls RaisePostDataChangedEvent which raises the selected index changed event of this example control.
Handling post back is the most complicate thing to implement when creating Custom Controls.

You can provide a 16x16 bitmap for the toolbox, and it's name needs to mat as the control's class. The pixel of the lower left corner defines the transparent color in the toolbox. To add the new pictured control, right click the toolbox and add, then browse to the control's assembly to open it, and it will show in the toolbox with it's new icon.

Ease of use: Add a default property, Add a default event, unique tag prefix, each of these are added with class attributes. To do so, the prefix in the Assembly attribute, DefaultProperty and DefaultEvent attribute can be added to the class of the Custom control, these allow to make your custom controls seem more professional. SmartTag and design view can also be further customized.

Comments

Post a Comment

Popular posts from this blog

React JS Patterns

React JS is always evolving, and evolving quickly. These evolutions can be very significant ones, for example, the addition of hooks. React has a lot of code patterns, often these patterns are motivated by the DRY and/or the open-close principle. These patterns sometimes come in to replace a previous one, yet the previous ones still stays in use, as a consequence, the list of patterns keep growing. The goal of the next few posts will be to list the patterns commonly used in React JS developpement. Some patterns are more specific to JSX and I will start with these, and maybe add patterns specific to Redux.
4 comments
Read more

70-562 ListView

List View is a versatile control that allows to work with a signle control rather than many smaller controls. Provides rich sorting, deleting, editing, it is one of the most flexible grid control. Design view can fill the ListView with fake data to give an overview. In designer, the configure list view link might not show, (currently a bug), to fix configure the datasource but cancel then click configure datasource again and this time click finish and the Cofnoigure ListView link will show up in the smarttag. You can choose templates, LayoutTemplate is crucial, ItemTemplate(a row is part of a table, in a list view they are called items since they don't have to correspond to a table row), AlternatingItemTemplate, ItemSeparatorTemplate, SelectedItem, EmptyItemTemplate, EditItemTemplate, InsertItemTemplate allows to customize what the user will be presented when creating an item, EmptyDataTemplate. The itemPlaceHolder and the groupPlaceHolder are important elements as the will b...
Post a Comment
Read more

Rxjs Forkjoin vs Zip

These Rxjs combination operators are handy to make Rest calls in parallel and combine their results. Both take n observables and will return the results, with the difference that forkJoin will complete even if one of the nested observables errors of completes.
Post a Comment
Read more