Developing a ASP .NET Control with client capabilities

  • Article

Brian J. Cardiff ( from Clarius Consulting) is one of the developers on the Web Client team.  He has asked me to post an article for him, since he does not have a blog (yet).

Here it is (with some re-formatting):

Developing a ASP .NET Control with client capabilities (using ASP .NET Ajax Extensions support)

Since the AjaxControlToolkit appears, creating extenders control like Autocomplete (AjaxControlToolkit) or Contextual Autocomplete (Web Software Factory) is a task that involves more work in JavaScript and Metadata that classic .NET programming.

In this post I will point out some of the key aspects to create, a Control that takes advance of the ASP .NET Ajax Extensions. The post is based on the RealTimeSearchMonitor control located inside the Search Bundle of the Web Software Factory. So I suggest downloading and opening it while you read the post, just to take a quick look at it.

When you want to create a control that will reside on client side, what would you need? (and where it is implemented in RealTimeSearch project)

  • ASP.NET Control that implements IScriptControl
  • RealTimeSearchMonitor.cs
  • A JavaScript file that will define classes and/or function for the control.
  • RealTimeSearchBehavior.js
  • Some lines of JavaScript code to instantiate a client side object.
  • These are generated from GetRealTimeSearchMonitorScriptDescriptor protected method.
  • (Optional) ASP .NET Control Designer
  • RealTimeSearchDesigner.cs, metadata all around and type converter.

The IScriptControl interface defines two method:

  • IEnumerable<ScriptReference> GetScriptReferences()

This indicates that a reference to RealTimeSearchBehavior.js file should be included

In the response you will have:

<script type="text/javascript" src="/ScriptResource.axd?d= …(some identifier)…" ></script >

  • IEnumerable<ScriptDescriptor> GetScriptDescriptors()

This calls GetRealTimeSearchMonitorScriptDescriptor protected method.

In the response you will have:

Sys.Application.add_init(function() {

$create(

RealTimeSearch.RealTimeSearchBehavior,

{"controlsToMonitor":[

{"TargetId":"ctl00_DefaultContent_CompanyNameTextBox",

"Callback":"javascript:__doPostBack(\u0027ctl00$DefaultContent$CompanyNameTextBox\u0027,\u0027\u0027)",

"Validators":["ctl00_DefaultContent_CompanyNameRegexValidator"]},

…(more controlsToMonitor elements)… }],

"interval":700}, null, null,

$get("ctl00_DefaultContent_CustomerRealTimeSearchMonitor"));

});

What does the GetRealTimeSearchMonitorScriptDescriptor method do?

Using properties of the RealTimeSearchMonitor it generates the info that the control will need in the client side. In this case: resolving control's ClientID, Callback for the specified event and related validators to each controls (see ResolveControlMonitorParameter method). It's no magic but a very important point where all get wired.

The ScriptComponentDescriptor has to be related with a DOM element in the client side, so our control will also generate an empty DIV, this is done in the Render method.

Although IScriptControl interface is implemented

Although IScriptControl interface is implemented you have to call RegisterScriptControl and RegisterScriptDescriptors methods in the ScriptManager of the page in order to get our GetScriptReferences and GetScriptDescriptors called respectively. The former is done in the PreRender and the later in the Render method.

Conclusions

It's good to have a simple (but useful) example of a control with client capabilities using ASP .NET Ajax Extensions. There is quite a good infrastructure to develop your own controls, go ahead and give you a chance to know it and use it!

Brian J. Cardiff (Clarius Consulting)

brian.cardiff@clariusconsulting.net

Please feel free to leave comments here, or email Brian directly.