Getting rid of Microsoft AJAX

Question

We wrote a couple of controls using Microsoft AJAX (cs class + js class). Now I'm thinking about getting rid of it (just use jQuery), as it is bloated and we don't use UpdatePanel. My question is: how should I change my controls? Right now they implement IScriptControl, which uses Microsoft AJAX features (if I understand correctly, ScriptManager & ScriptControlDescriptor classes). What to use instead?

CLARIFICATION. I don't need some more JavaScript libraries - I'm already using jQuery and would like to minimize additional includes (unless they are really small). What I need is replacement for ScriptManager and IScriptControl interface. Things like:

1. Registering script references (and not duplicating them).
2. Instantiating script class associated with control.
3. Binding my class to DOM element (what is the best way to do that using jQuery, btw?).
4. Initializing JS class fields.

Answer 1

jQuery and jQuery UI are very powerful. But you also have access to Moo Tools and Prototype. Which tools in MS AJAX are you using? There are pretty much something comparable in open source non-MS offerings across the board. They just require slightly more labor on your part to implement. You might also look at Telerik and Syncfusions controls. Telerik has a bunch of open source ajax offering for ASP.NET MVC which can be converted to ASP.NET Web Forms pretty easily.

Answer 2

You may be interested in the more lightweight conditional rendering feature in the upcoming release of .NET4 (along with Visual Studio 2010)

http://msdn.microsoft.com/en-us/magazine/ee335716.aspx

If you can wait, it might be a viable solution for you.

Answer 3

I'm not sure you need a replacement for IScriptControl and the Scriptmanager if you want to strictly use jQuery. I recommend you check out some http://blog.jeremymartin.name/2008/02/building-your-first-jquery-plugin-that.html'>tutorials on creating jQuery plugins.

Answer 4

Ok, I finally finished it.

1. We ended up creating Page descendant with the some code in it to substitute for script manager (see below). We call to it from control's OnPreRender method using control's Page property. Thanks to guys from http://dj.codeplex.com/ for providing example of how to do it.

2, 3, 4. We used jQuery.data method to bind instances of script classes to DOM elements. We execute instantiation, initialization and binding code using jQuery.ready method. This code is added to control in its Render method using AddScript method (see below). Maybe later we would use JavaScriptSerializer for passing values from C# control to javascript classes, but at the moment we do it by hands, passing parameters to javascript class constructor.

HashSet<string> scriptReferences = new HashSet<string>();
HashSet<string> cssReferences = new HashSet<string>();
List<string> styles = new List<string>();

public void AddScriptReference(string url, bool resolve)
{
    string realUrl = url;
    if (resolve)
        realUrl = ResolveClientUrl(url);

    if (!scriptReferences.Contains(realUrl))
    {
        scriptReferences.Add(realUrl);
        Header.Controls.Add(
            new LiteralControl(
                "<script type='text/javascript' src='" +
                realUrl + "'></script>"));
    }
}

public void AddCssReference(string url)
{
    if (!cssReferences.Contains(url))
    {
        cssReferences.Add(url);
        HtmlLink link = new HtmlLink();
        //link.Href = ResolveClientUrl("~/jQuery-ui/css/ui-lightness/jquery-ui.css");
        link.Href = url;
        link.Attributes.Add("type", "text/css");
        link.Attributes.Add("rel", "stylesheet");
        Header.Controls.Add(link);
    }
}

public void AddCssStyle(string style)
{
    styles.Add(style);
}

protected override void OnPreRenderComplete(EventArgs e)
{
    base.OnPreRenderComplete(e);
    Header.Controls.Add(
        new LiteralControl(
            "<style type='text/css'>" + styles.Join("\n") + "</style>"
        )
    );
}

public static void AddScript(HtmlTextWriter writer, string script,
    bool executeWhenReady)
{
    writer.AddAttribute(HtmlTextWriterAttribute.Type, "text/javascript");
    writer.RenderBeginTag(HtmlTextWriterTag.Script);
    if (executeWhenReady)
    {
        writer.Write("$(function(){\n");
    }
    writer.Write(script);
    if (executeWhenReady)
    {
        writer.Write("});\n");
    }

    writer.RenderEndTag();
}