Simplified ASP.NET AJAX Custom Control Development With VS Item Template

Hello,

At work today I had a friend (Blair) have issues with trying to get a browser alert to popup on the page during an ASYNC post back. I told him I would make a custom control in 30 secounds or less that would do this and make life much easier. Overkill I know for such a simple task but it was more of a demo to show the ease/speed of creating a control using my custom item template.

The VS Item Template:

I have created a template in Visual Studio that lets me add a new ASP.NET AJAX server control to any project, this adds the Control class and the debug and release JS files. So basically all I need to do is right click (add new item) ASP.NET AJAX Server Control. The files are now in my solution. The benefit of this is that the default java script file that is added when you create a new control library will not be able to be packed as it is missing a few ; and { }. My template has fixed these issues and it makes life a heck of a lot easier. I then just make the two JS files embedded resources and I am good to go (I need to do this as I could not see a way to get the item template to do this). I will not go into how to create the template here, but have included it for download if you would like to see/use it.


Creating the control:

This was the easy part, once I have added my control called MessageBoxControl to my project, which gives me a shell control, I just added a private variable to hold the message and a ShowMessage method. The ShowMessage method does nothing but set this private message variable. It just looks nice to use MessageBox1.ShowMessage("error!"). The code for the control is below:

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Xml.Linq;

[assembly: WebResource("MessageBox.MessageBoxControl.js", "text/javascript")]
[assembly: WebResource("MessageBox.MessageBoxControl.debug.js", "text/javascript")]
namespace MessageBox {

    /// <summary>
    /// Summary description for ServerControl1
    /// </summary>
    public class MessageBoxControl : ScriptControl {

        private string _message = string.Empty;

        #region Script Descriptiors

        protected override IEnumerable<ScriptDescriptor>
                GetScriptDescriptors() {
            ScriptControlDescriptor descriptor = new ScriptControlDescriptor("MessageBox.MessageBoxControl", this.ClientID);

            descriptor.AddProperty("Message", this._message);

            yield return descriptor;
        }

        // Generate the script reference
        protected override IEnumerable<ScriptReference>
                GetScriptReferences() {
            yield return new ScriptReference("MessageBox.MessageBoxControl.js", this.GetType().Assembly.FullName);
        }

        #endregion

        #region Message Showing

        /// <summary>
        /// Just sets my message text.
        /// </summary>
        /// <param name="message"></param>
        public void ShowMessage(string message) {
            this._message = message;
        }

        #endregion

    }

}

As you can see the control is ultra simple. The private var is set and in my GetScriptDescriptors this is where I pass this value to my client script library. The client script library is also very simple. I need to add the Message Property and show the message using an alert().

/// <reference name="MicrosoftAjax.js"/>

Type.registerNamespace("MessageBox");

MessageBox.MessageBoxControl = function(element) {
    MessageBox.MessageBoxControl.initializeBase(this, [element]); 
    this._message = "";
};

MessageBox.MessageBoxControl.prototype = {
    initialize: function() {
        MessageBox.MessageBoxControl.callBaseMethod(this, 'initialize');

        if(this._message != "") {
            alert(this._message);
        }
    },
    dispose: function() {
        //Add custom dispose actions here
        MessageBox.MessageBoxControl.callBaseMethod(this, 'dispose');
    },
    get_Message: function() {
        return this._message;
    }, 
    set_Message: function(value) {
        this._message = value;
    }
};

MessageBox.MessageBoxControl.registerClass('MessageBox.MessageBoxControl', Sys.UI.Control);
if (typeof(Sys) !== 'undefined') { Sys.Application.notifyScriptLoaded(); }

Here we can see that we have the Message property and then in our initialise function we simply use this value to show a message to the user using a java script alert. Now that is my control done, I add it to my page and I can then use Control.ShowMessage("tesing") to show an alert message on the page.

With the java script here a 2 files a .debug.js and a .js file. The .debug.js file will be used when your script manager is in debug mode and the .js when in release mode. Use Dean Edwards Packer to compress your debug script into a tight release mode script. If you have script errors when compressing your script make sure you use JSLint to verify your script, fixing any errors and pack again.


Final:

While this control was not really an example of how to build a rich control (or the most efficient way to show a message to the user), it was more of a demo on how creating your own VS Templates can make your day to day life much easier. And also demonstrating how quick and easy it is to develop a custom client control built on top of the ASP.NET AJAX Framework. I have included a copy of my VS Template below if you would like to use it. And also a copy of the sample project that this was built in. To use the template simply add the zip file to your visual studio template folder. I.E. C:\Users\USER\Documents\Visual Studio 2008\Templates\ItemTemplates\Visual C# on my vista machine.

- VS Template File
- Sample Project



Thanks
Stefan