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

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

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

Object.create vs. Object.Assign

The two functions return a new Object but with a difference. Object.assign will go through an enumerable and copy it's properties. Object.create will create a new empty object but link it's proto chain to the old object. One way to view this is with JSON.stringify(newCreatedObject) this would return an empty object, since all the properties are not part of the object's own properties, but inherited through prototype inheritance. In both case, the advantage is it allows to extended existing objects without modifying the original. This is particularly important when receiving arguments from a caller, in this case it's better to use these methods instead of modifying the caller's object since he might have planned to use it again later, expecting it to be in it's original state.
Post a Comment
Read more