PCLargeAppTile_200x200

Introducing Minecrafter!

wp7_300x50_blue

Minecrafter is an interactive guide for Minecraft. Every item, block, crafting pattern, and monster is described in detail in a beautiful, searchable interface.

It’s also designed to help you find what you need faster. It’s not just a giant list of everything. For example, every item detail page shows you not only how to craft or smelt that item, but items it can be used to craft or smelt. Every icon displayed can also be clicked on to navigate to that item, allowing you to quickly jump to related information.

Minecrafter also comes with game guides to help you learn about some of the finer details of the game, such as how water behaves, and tips on how to place blocks efficiently. The guide list is currently small, but I will be adding to them all the time.

Minecraft

If you don't know, Minecraft is an up-and-coming adventure slash RPG slash strategy Java game. It is unique in that it's graphical style is almost comically simple and low-res. It's kind of like Q-Bert meets DigDug meets World of Warcraft. Yes, that's the perfect way to describe it :) But don't let the graphics fool you. Minecraft is incredibly deep, addicting, fun, and its cup runeth over with potential.

Visit the website to play a free version in-browser, or purchase the Alpha game at a discounted price. I highly recommend the latter -- the in-browser version does not do it justice, and you can't play multi-player, which offers a whole new dimension of fun (although is currently wrought with missing features that you get in single player mode, like the ability to DIE, although that does have advantages!).

Screen Shots

Screen_Items1

Screen_Items3

Screen_Detail1Screen_Detail2Screen_Mobs

wp7_300x50_blue

StackUnderflow.js is a JavaScript library that lets you retrieve – and render – questions from the StackExchange API directly on your website just by including a simple, lightweight .js script.

The library is fully documented, so for technical details please check out the StackApps entry for it, and follow the links to the GitHub repository. The rest of this post is about my motivation for the library, how I am using it on the blog, and some other thoughts about the API.

StackExchange (e.g. StackOverflow) has recently published an API (still in beta). It’s not very often that such a rich source of data suddenly becomes accessible. So it got me a little excited about all the possibilities. I think the full set of possibilities has yet to be realized, even by the rapidly growing set of entries in the StackExchange API Contest. Like most new things, it takes time. Plus, the API is currently read-only, but it seems they have plans to add write support in the future. Now that will be interesting. An idea for utilizing that in a novel way just popped into my head, just now.

Anyway – one thing I have noticed over the last few years is just how much StackOverflow.com has grown as a referrer to this blog. There’s an untold number of SO questions thank here as a reference. StackOverflow is consistently one of my top referrers. I joked once that my SO rep is grossly understated, for credit for all those answers, I get not.

Searching for “InfinitiesLoop” on StackOverflow returns over 100 results:

http://stackoverflow.com/search?q=infinitiesloop

So the first thought I had for utilizing the API is to bring those questions directly to this blog. I want readers to be able to see the SO questions that link to my blog in general, or to each individual blog entry. The nature of my blog entries are such that most of my referrers are from Google searches, people looking for answers to problems they have. It’s only natural to try and bring two sources that are very likely to help together, is it not? It’s a perfect marriage if you ask me!

Searching with the StackExchange API

As always seems to be the case, as soon as I start dipping my feet into some new technology, I immediately discover that what I want to accomplish is beyond its limitations. Fooey.

The StackExchange API does not support searching the body or answers of a question, only the tags and the title.

The reason stated is for performance – they suggest you use a proper search engine to look for questions by their content instead. That makes sense, I guess. Why reinvent the wheel, Google and the like are more than capable. The way you do it is pretty simple. All StackExchange questions are found under the “/questions” url, and you can restrict matches to that url. Here’s a Google search that finds all questions linking here:

http://www.google.com/search?hl=en&q=site:stackoverflow.com/questions+weblogs.asp.net/infinitiesloop

You’ll see in the results that all the urls look like this:

http://stackoverflow.com/questions/questionid/title

Ah ha – so doing this I can get the question IDs!

Abstracting it Away

So, the first thing I did was work around this limitation by utilizing an AJAX Google search to find the questions, then the StackExchange API to retrieve the questions. There’s two disadvantages to that: (1) The Google API I’m using is one that limits results to 8 per request, and (2) We must now perform at least two requests to get the data. But I think these disadvantages are no biggie – it wouldn’t be common to find more than 8 questions for one article, and even if there were, the top 8 results should be very relevant, and I don’t necessarily want to bombard you with every result anyway. And the added delay is no biggie – it’s still very fast, and this content is intended to be shown as a sort of ‘extra’ part of the site, which will silently load while the user is focusing on the main content.

Rendering the Questions/Data

Of course I fully anticipate there to be a very rich JavaScript API wrapper for StackExchange. I would love if StackUnderflow.js turned into one (hey, it’s open source). But there’s too many people out there that are smarter and have more time than me, so I doubt it. There’s already one posted that is automatically generated from the robust StackExchange API help.

Cool, but I hope these libraries realize that almost as important as getting the raw data is getting it onto the page. So StackUnderflow.js not only lets you get raw data, but has a built-in ability for rendering it, too. Rendering it in the familiar StackExchange way. Currently, it only supports rendering questions, but I intend on adding answers, comments, badges, etc, as well.

It also lets you customize the rendering via a very simple templating engine (by no means meant to be a generic templating engine, but more than adequate for what is needed here), and you can of course customize the CSS, or do both.

How I am Using It

This blog is hosted on Community Server from who-knows-who. I was fortunate to get this blog as a virtue of being a Microsoft employee (although I think its more open now). It sure has done wonders for my readership compared to when I had it on blogger. But this means I only have a little bit of control over it. One day I dream I’ll host it myself and thus have complete control over it, but for now, I’m stuck here.

The dashboard for this blog lets me enter any HTML, even script, into the ‘news’ section, which appears on the left navbar. The blog entries themselves all live under a <div> with id “content2”. I want whatever page the user is on to show StackOverflow pages linking to it. If they are on the main page, that will mean any and all links. If they are looking at the specific page for a blog article, it will mean links to that article only.

Some of the lines may wrap horribly – expand your browser if you can (ahemipadahem).

<link type="text/css" rel="Stylesheet" href="http://infinity88.com/stackunderflow/stackoverflow.css" />

<script type="text/javascript" src="http://infinity88.com/stackunderflow/stackunderflow-1.0.0.min.js"></script>

<script type="text/javascript">

stackunderflow.googleQuestions(null, function(questions) {

    if (questions.questions.length) {

        var content = document.getElementById("content2");

        var header = document.createElement("h3");

        var msg = (document.location.toString().toLowerCase() === "http://weblogs.asp.net/infinitiesloop/")

            ? 'Some <a href="http://stackOverflow.com">StackOverflow</a> questions that link to this BLOG...'

            : 'Some <a href="http://stackOverflow.com">StackOverflow</a> questions that link to this ARTICLE...';

        header.innerHTML = msg + " <br/><span style='font-size:8px'>(powered by <a href='http://github.com/infinitiesloop/stackunderflow.js'>StackUnderflow.js<a/>)</span>";

        content.appendChild(header);

        stackunderflow.render.questions(questions, "#content2");

    }

});

</script>

This code isn’t the prettiest – this is by no means meant to be something you copy and paste into your blogs. First of all, my blog being out of my control already does horrible things on the client side that I hate. Don’t treat your blog that way :)

The code to focus on is the included script, stylesheet, the ‘googleQuestions’ API, and the ‘render.questions’ call. Actually, it supports a shorter chaining syntax, which you’ll see in the readme on github. Note that in the call to ‘googleQuestions’ I pass null as the search term. The library uses the current page URL by default if you don’t provide one. Being in the side bar, this code appears on every page. So it will always show links to the page you are on. You could if you wanted make it more specific than that or include keyword, etc.. basically, anything you might Google for.

The ‘content2’ div is appended to (the library takes care of waiting for DOMContentLoaded, etc, for you). And since I haven’t specified a template to use, the default one is used, which uses a similar HTML structure that StackOverflow.com itself uses to show question summaries. It also uses a certain set of CSS classes, hence the link to the stylesheet. The classes aren’t the same as StackOverflow.com though – they’ve been modified to (1) be more uniquely named by having a ‘se-‘ prefix, and (2) only apply to content within the dynamically rendered content so it can’t possibly mess with the rest of your page.

Just look at the bottom of my main page to see it in action, and then try some of my popular articles like Truly Understanding ViewState.

I have lots of ideas for improving it, not the least of which is the ability to show all questions from a certain user, so you could show a list of your own questions, and filtering of those questions (e.g. only unanswered ones). But mostly I hope people pick up an interested in the project and contribute to it via GitHub!

Enjoy!

My first Visual Studio Add-in! Creating add-ins is pretty simple, once you get used to the CommandBar model it is using, which is apparently a general Office suite extensibility mechanism.

Anyway, let me first explain my motivation for this. It started out as an academic exercise, as I have always wanted to dip my feet in a little VS extensibility. But I thought of a legitimate need for an add-in, at least in my personal experience, so it took on new life. But I figured I can’t be the only one who has felt this way, so I decided to publish the add-in, and host it on GitHub (VSNewFile on GitHub) hoping to spur contributions.

Adding Files the Built-in Way

Here’s the problem I wanted to solve. You’re working on a project, and it’s time to add a new file to the project. Whatever it is – a class, script, html page, aspx page, or what-have-you, you go through a menu or keyboard shortcut to get to the “Add New Item” dialog. Typically, you do it by right-clicking the location where you want the file (the project or a folder of it):

AddNewDialog

This brings up a dialog that contains, well, every conceivable type of item you might want to add. It’s all the available item templates, which can result in anywhere from a ton to a veritable sea of choices. To be fair, this dialog has been revamped in Visual Studio 2010, which organizes it a little better than Visual Studio 2008, and adds a search box. It also loads noticeably faster.

image 
To me, this dialog is just getting in my way. If I want to add a JavaScript script to my project, I don’t want to have to hunt for the script template item in this dialog. Yes, it is categorized, and yes, it now has a search box. But still, all this UI to swim through when all I need is a new file in the project. I will name it. I will provide the content, I don’t even need a ‘template’.

VS kind of realizes this. In the add menu in a class library project, for example, there is a “Add Class…” choice. But all this really does is select that project item from the dialog by default. You still must wait for the dialog, see it, and type in a name for the file. How is that really any different than hitting F2 on an existing item? It isn’t.

Adding Files the Hack Way

What I often find myself doing, just to avoid going through this dialog, is to copy and paste an existing file, rename it, then “CTRL-A, DEL” the content. In a few short keystrokes I’ve got my new file. Even if the original file wasn’t the right type, it doesn’t matter – I will rename it anyway, including the extension. It works well enough if the place I am adding the file to doesn’t have much in it already. But if there are a lot of files at that level, it sucks, because the new file will have the name “Copy of xyz”, causing it to be moved into the ‘C’ section of the alphabetically sorted items, which might be far, far away from the original file (and so I tend to try and copy a file that starts with ‘C’ *evil grin*).

Using ‘Export Template’

To be completely fair I should at least mention this feature. I’m not even sure if this is new in VS 2010 or not (I think so). But it allows you to export a project item or items, including potential project references required by it. Then it becomes a new item in the available ‘installed templates’. No doubt this is useful to help bootstrap new projects. But that still requires you to go through the ‘New Item’ dialog.

Adding Files with VSNewFile

So hopefully I have sufficiently defined the problem and got a few of you to think, “Yeah, me too!”… What VSNewFile does is let you skip the dialog entirely by adding project items directly to the context menu. But it does a bit more than that, so do read on.

For example, to add a new class, you can right-click the location and pick that option. A new .cs file is instantly added to the project, and the new item is selected and put into the ‘rename’ mode immediately.

VSNewFileMenuVSNewFileMenu_result


The default items available are shown here. But you can customize them. You can also customize the content of each template. To do so, you create a directory in your documents folder, ‘VSNewFile Templates’. In there, you drop the templates you want to use, but you name them in a particular way.

For example, here’s a template that will add a new item named “Add TITLE”. It will add a project item named “SOMEFILE.foo” (or ‘SOMEFILE1.foo’ if that exists, etc).

image

The format of the file name is:

<ORDER>_<KEY>_<BASE FILENAME>_<ICON ID>_<TITLE>.<EXTENTION>

Where:

<ORDER> is a number that lets you determine the order of the items in the menu (relative to each other).
<KEY> is a case sensitive identifier different for each template item. More on that later.
<BASE FILENAME> is the default name of the file, which doesn’t matter that much, since they will be renaming it anyway.
<ICON ID> is a number the dictates the icon used for the menu item. There are a huge number of built-in choices. More on that later.
<TITLE> is the string that will appear in the menu.

And, the contents of the file are the default content for the item (the ‘template’). The content of the file can contain anything you want, of course. But it also supports two tokens: %NAMESPACE% and %FILENAME%, which will be replaced with the corresponding values.

Here is the content of this sample:

testing
Namespace = %NAMESPACE%
Filename = %FILENAME%

I kind went back and forth on this. I could have made it so there’d be an XML or JSON file that defines the templates, instead of cramming all this data into the filename itself. I like the simplicity of this better. It makes it easy to customize since you can literally just throw these files around, copy them from someone else, etc, without worrying about merge data into a central description file, in whatever format. Here’s our new item showing up:

samplesomefile

Practical Use

One immediate thing I am using this for is to make it easier to add very commonly used scripts to my web projects. For example, uh, say, jQuery? :) All I need to do is drop jQuery-1.4.2.js and jQuery-1.4.2.min.js into the templates folder, provide the order, title, etc, and then instantly, I can now add jQuery to any project I have without even thinking about “where is jQuery? Can I copy it from that other project?”

image image 

Using the KEY

There are two reasons for the ‘key’ portion of the item. First, it allows you to turn off the built-in, default templates, which are:

  • FILE = Add File (generic, empty file)
  • VB = Add VB Class
  • CS = Add C# Class (includes some basic usings)
  • HTML = Add HTML page (includes basic structure, doctype, etc)
  • JS = Add Script (includes an immediately-invoking function closure)

To turn one off, just include a file with the name “_<KEY>”. For example, to turn off all the items except our custom one, you do this:

image

image

The other reason for the key is that there are new Visual Studio Commands created for each one. This makes it possible to bind a keyboard shortcut to one of them. So you could, for example, have a keyboard combination that adds a new web page to your website, or a new CS class to your class library, etc. Here is our sample item showing up in the keyboard bindings option.

imageEven though the contents of the template directory may change from one launch of Visual Studio to the next, the bindings will remain attached to any item with a particular key, thanks to it taking care not to lose keyboard bindings even though the commands are completely recreated each time.

The Icon Face ID

Visual Studio uses a Microsoft Office style add-in mechanism, I gather. There are a predetermined set of built-in icons available. You can use your own icons when developing add-ins, of course, but I’m no designer. I just wanted to find appropriate-ish icons for the built-in templates, and allow you to choose from an existing built-in icon for your own. Unfortunately, there isn’t a lot out there on the interwebs that helps you figure out what the built-in types are. There’s an MSDN article that describes at length a way to create a program that lists all the icons. But I don’t want to write a program to figure them out! Just show them to me! Sheesh :)

Thankfully, someone out there felt the same way, and uses a novel hack to get the icons to show up in an outlook toolbar. He then painstakingly took screenshots of them, one group at a time. It isn’t complete though – there are tens of thousands of icons. But it’s good enough. If anyone has an exhaustive list, please let me, and the rest of the add-in community know.

Icon Face ID Reference

Installing the Add-in

It will work with Visual Studio 2008 and Visual Studio 2010. Just unzip the release into your Documents\Visual Studio 20xx\Addins folder. It contains the binary and the Visual Studio “.addin” file. For example, the path to mine is:

C:\Users\InfinitiesLoop\Documents\Visual Studio 2010\Addins

Conclusion

So that’s it! I hope you find it as useful as I have. It’s on GitHub, so if you’re into this kind of thing, please do fork it and improve it!

Reference:

jQueryTagCloud

Minifiers

JavaScript minifiers are popular these days. Closure, YUI Compressor, Microsoft Ajax Minifier, to name a few. Using one is essential for any site that uses more than a little script and cares about performance.

Each tool of course has advantages and disadvantages. But they all do a pretty good job. The results vary only slightly in the grand scheme of things. Not enough to make so much of a difference that I’d say you should always use one over the other – use whatever fits in with your environment best.

Tag Clouds

Anyway, it got me thinking. After crunching a script through one of these bad boys, what’s left?

The first thing I did was take jQuery 1.4.2 (the minified version) and push it into the tag cloud creator, Wordle. BAM! Beautiful, isn’t it?

It’s not that surprising that two of the longest keywords in JavaScript also happen to use up the most space: return, and function. What does it matter? The word function appears in jQuery 404 times, adding up to 3,232 bytes. That’s about 4.5% of the size of the library! return appears 385 times, adding up to 2,310 bytes, or 3.2%. So there you go – return and function make up a total of almost 8% of the size of jQuery!

Really makes me wish JavaScript had C# style llamas – err, lambdas.

Tokenizing

There are some problems here though. No tag cloud generator I could find was intended to be run on code. So it ignores things like operators, brackets, etc. And you know things like semicolons are frequent. Nor do they provide any kind of data feed of the document’s tokens. So, I created my own tool to generate the data.

Basically, I just have a list of possible tokens, and I run a regular expression on the code to determine how many times each occurs. Then, multiply by its length to get the total size of that token in the script.

Results

It’s amazing what the results show. The top 15 tokens represent 35% of the entire script, mostly single-character tokens:

jQueryTopTokens

It makes sense that function is the top token in size since 8 characters long, even though it only occurs 404 times. But look at “.”. Yes, dot. It’s only one character long, but it represents 2,565 bytes. “(” and “)” together make up over 5k. return, despite being 6 characters long, is in 5th place.

What does it mean?

Well, actually, the fact that these syntax related tokens are so high on the list is partially a testament to the effectiveness of minifiers. A minifier can only remove so much of the syntax, and you can’t shorten them. So if a minifier is doing it’s job, they should tend bubble up to the top of the list.

Thankfully, Wordle supports an advanced mode that lets you enter the tokens and their weight manually. Armed with the output of this tool, here is the entire result set in tag cloud form. The relative sizes of the tags aren’t really correct though, simply because a “.” is smaller in whatever font than any letters. Also, I don’t really know why the first use of Wordle produced a cloud that shows return bigger than function – I guess just a bug in how it counts. All the more reason to use the advanced mode.

jQueryTopTokensCloud

One thing it does is show ways that minifiers could do an even better job, or ways that we can code that reduce these tokens. For example, in theory a minifier could convert functions that use ‘return’ to assign to a parent-scope variable instead. That’s a fairly complex thing to do, so probably not worth it (performance seems equivalent, though). You can also try and structure your code so a function only has one ‘return’ instead of multiple.

This tool can help you find tokens in your code that use a lot of space besides these, too. For example, I applied this tool to the MicrosoftAjax.js script from .NET 3.5, and found to my horror that ‘JavaScriptSerializer’ was near the top of the list. And that is why in the AjaxControlToolkit you will find this script has been greatly reduced in size. Despite having many new features, it’s 10k smaller - in minified form - than it was in .NET 3.5., partially thanks to this tool to help me identify the areas that needed improvement.

Notice ‘getElementsByTagName’ appears in jQuery a noticeable amount. It occurs 17 times, or 340 bytes. Also not so obvious is how often characters ‘a’, ‘b’, etc occur. These are local variables that the minifier has converted to. ‘a’ is high on the list, since it is the first one used, but there are many in the top 100, all the way up to the letter ‘o’, totaling 5,228 bytes. So, a minifier could do well to understand how local variables are used and reuse existing ones when they are no longer needed.

The code is fairly simple. Again, this was something I wrote one evening off the cuff, so it’s not perfect (although, thanks to Brad and Damian for the nice LINQ way of converting the char array to a string array).


This is the code in C# for .NET 3.5.

using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Text.RegularExpressions;
 
public static class Tokenizer {
    public static IEnumerable<KeyValuePair<string, int>> Tokenize(string content) {
        string[] tokens =
            { "===", "!==", "==", "<=", ">=", "!=", "-=", "+=", "*=", "/=", "|=", "%=", "^=", ">>=", ">>>=", "<<=",
                "++", "--", "+", "-", "*", "\\", "/", "&&", "||", "&", "|", "%", "^", "~", "<<", ">>>", ">>",
                "[", "]", "(", ")", ";", ".", "!", "?", ":", ",", "'", "\"", "{", "}" };
        var escapedTokens = from token in tokens
                            select ("\\" + string.Join("\\",
                            (from c in token.ToCharArray() select c.ToString()).ToArray()));
        string pattern = "[a-zA-Z_0-9\\$]+|" + string.Join("|", escapedTokens.ToArray());
        var r = new Regex(pattern, RegexOptions.Compiled | RegexOptions.ExplicitCapture);
        return from m in r.Matches(content).Cast<Match>()
               group m by m.Value into g
               orderby g.Count() descending
               select new KeyValuePair<string, int>(g.Key, g.Count());
    }
}
 

You can also download the raw CSV file with the results for jQuery here.

Update: Thanks to David Fowler for linq-ifying the code and making it half as long!

Happy coding!

Hard to believe it’s been so long, but it was almost 4 years ago when I published Join the Dark Side of Visual Studio. That was when a lot of people were still using VS2003, and importing and exporting environment settings required a custom add-in, VSStyler, which has since fallen off the planet and is hard to find (link, anyone? Let me know). Three versions of VS later, and I’m still using and loving the dark side. Pleased, I am (haha). In fact, that article for one reason or another is still one of my most popular blog entries, thanks in part to a link from Scott Hanselman and a commenter on Coding Horror. I will point out selfishly that my article predates both of these :) But, yes, it’s sad when one of your top referrers is from a link in a comment on another blog. Not even the first comment, either.

That article even inspired someone out there to register a new domain: http://darksideofvisualstudio.net/

Now that Visual Studio 2010 is out, I decided to repost with my latest settings, exported from Visual Studio 2010. So here you go. It’s mostly the same as the original, but with some improvements. I lightened up some of the blues which are hard to read on some not-so-great monitors. Set the font to Consolas (though you may prefer Inconsolata). Also fixed a few neglected settings like the refactoring view and XML.

I should also point out that unfortunately, even in the new WPF based VS2010, you are very limited in what colors you can change in the environment itself, such as the Solution Explorer. However, there is a very nice add-in from the Visual Studio Platform team that lets you theme many aspects of the IDE that you can’t normally change. Not all, unfortunately, since not everything in VS is WPF yet. But if you use this in combination with the theme settings in windows itself, you can get pretty close to an all-dark theme in all windows. If anyone out there has success with this, please do share your exported theme settings from this add-in as well as your windows theme settings, I will be sure and update this article with the details.

Here’s a quick preview of some code from the AjaxControlToolkit:

DarkSide2010

Download The Dark Side of Visual Studio 2010

For older versions, see the previous article.

UPDATE: Rate the scheme on StudioStyles.info! The Dark Side of Visual Studio

.NET Framework 4 Beta 2 has been out for a little while now. There are some subtle improvements to the ScriptManager control in ASP.NET 4.0 that few have picked up on yet. Allow me to introduce you to them! First, let me say that this is strictly about features in the server-side ASP.NET ScriptManager control, not the Ajax library in general. Also – if you do not use the ASP.NET Ajax library but you are a WebForms developer, I assume you, this article is still for you!

EnableCdn? Yes please.

This one has been blogged about by ScottGu already, but for completeness, here it is. The ASP.NET Ajax scripts are now hosted in a Microsoft CDN, and you can tell ScriptManager to load them from there by simply enabling this property. For virtually no work you get better performance, less bandwidth usage, and a cleaner rendering due to those ScriptResource.axd urls going away from your HTML. Do read the linked post for details. But wait, there’s more!

What has not really been blogged about is this: The EnableCdn property isn’t only for ASP.NET Ajax scripts. Even the scripts in System.Web.dll are on the CDN. So if you are using a GridView, TreeView, or Validators, for example – those scripts will load from the CDN, too. It wouldn’t have been the best experience if only only some scripts were affected by this setting, right?

But what if you are using custom scripts, or 3rd party controls? How would that work? Here’s how.

Normally, when you embed a script within an assembly for use by a WebForm (either via ScriptManager or the classic GetWebResourceUrl and RegisterScriptResource APIs), you have to define a WebResourceAttribute for it, which allows it to be accessed via the WebResource.axd or ScriptResource.axd handlers:

[assembly: WebResource("Foo.js", "application/x-javascript")]

Now, there’s a new property on WebResourceAttribute: CdnPath. Don’t get too caught up on the fact it’s a hard coded url. More on that later.

[assembly: WebResource("Foo.js", "application/x-javascript", CdnPath = "http://foo.com/foo/bar/foo.js")]

ScriptManager looks for this property when the EnableCdn property is set to true, and simply uses that path instead of the ScriptResource.axd path to the assembly resource. Pretty simple. And this means that you too can provide your own CDN paths for your own assembly resource scripts. As for where to host your script, well, that’s up to you.

 

AjaxFrameworkMode.Disabled

ScriptManager does some interesting and useful things, like: script combining, serving scripts from assemblies, script localization, script globalization, removing of duplicate references, automatic switching between debug and release scripts, and now automatic switching to a CDN. Trouble is, it comes with a bit of a tax: It always includes the Microsoft Ajax library (MicrosoftAjax.js), and by default, MicrosoftAjaxWebForms.js (for partial rendering support with UpdatePanel). The partial rendering script could be removed by setting EnablePartialRendering=false, but there was no way to disable MicrosoftAjax.js. So if you wanted to use the useful features of ScriptManager without using MicrosoftAjax.js, well, you couldn’t (although Bertrand once blogged a way of hacking it by making use of it’s de-duping process).

The AjaxFrameworkMode property adds two new modes to ScriptManager’s behavior. Enabled (the default, and the same behavior as before), Explicit (does not include any scripts by default but still assumes Microsoft Ajax is to be utilized), and Disabled (does not include any scripts by default and does not assume Microsoft Ajax will be used).

So here I have a ScriptManager that is including a custom script, without also loading MicrosoftAjax.js or any of the inline script it normally produces.

<asp:ScriptManager runat="server" AjaxFrameworkMode="Disabled">

    <Scripts>

        <asp:ScriptReference Path="~/scripts/foo.js" />

    </Scripts>

</asp:ScriptManager>

AjaxFrameworkMode.Explicit

The client side script for ASP.NET AJAX 3.5 (the one baked into ASP.NET 3.5) is basically just MicrosoftAjax.js and MicrosoftAjax.debug.js. There are some others, but that’s the main part of the client-side framework. But more often than not, you don’t need the entire framework. It contains a lot of features, like support for WebServices, History management, and Globalization. In 4.0, we have split MicrosoftAjax.js into several parts. When you use Explicit mode, you include these scripts manually in order to ‘pick and choose’ what parts of the framework you need, thus reducing the overall size of the javascript your page requires.

  • MicrosoftAjaxCore.js (contains the type system like registerClass)
  • MicrosoftAjaxComponentModel.js (contains Sys.Application, Sys.Component, Sys.UI.Control, as well as DomEvent for event abstraction and DomElement helpers)
  • MicrosoftAjaxNetwork.js (contains WebRequest and WebRequestManager related classes)
  • MicrosoftAjaxWebServices.js (contains WebServiceProxy and is used to talk to asmx and wcf services, or any service that can serve JSON)
  • *MicrosoftAjaxApplicationServices.js (talks to the Profile, Role, and Authentication services)
  • MicrosoftAjaxSerialization.js (contains the JavaScriptSerializer class)
  • MicrosoftAjaxHistory.js (contains extensions to Sys.Application to add client-side history management support)
  • MicrosoftAjaxGlobalization.js (contains formatting and parsing logic for culture-aware Date, Number, String conversion)

MicrosoftAjax.js still exists, too, which is now considered a composite script of all these scripts. The one (*) exception is that MicrosoftAjaxApplicationServices.js is now its own script, not part of MicrosoftAjax.js, and so must be included explicitly even if you don’t use Explicit mode and you want to use any of the application services.

Keep in mind when using this mode that you are “on your own” with determining which parts of the framework you need. This is strictly for those of you who want to lower the footprint of your pages by a little bit. MicrosoftAjax.js in ASP.NET 4.0 is somewhere around 98kb, which is gzipped when served, which takes it down into the 30kb range (numbers from memory – and by the way, these numbers are lower in the recently announced ASP.NET Ajax Beta release on CodePlex by the CodePlex foundation). By comparison, jQuery is something like 20kb once gzipped. So it’s not going to make a big difference, but every bit counts! You can use the existing CompositeScript feature of ScriptManager to include the separate parts of the framework and yet still have them served as a single script.

Oh – yes, these scripts are all also on the CDN and work with EnableCdn, of course.

Replacing System.Web Scripts

When a script component on the page requires an ajax script, it implements the IScriptControl interface, which allows it to tell ScriptManager what scripts it requires. Typically a component will ship with its scripts embedded in its own assembly. In previous versions, you could use a statically declared ScriptReference to override the script used by that component. For example, if a component used the ‘Foo.js’ resource from the ‘CustomControls’ assembly, you could replace the resource based script reference with a static (and possibly, customized) copy like so:

<asp:ScriptManager runat="server">

    <Scripts>

        <asp:ScriptReference Name="Foo.js" Assembly="CustomControls"

            Path="~/scripts/customfoo.js" />

    </Scripts>

</asp:ScriptManager>

(In red to indicate this is not a new feature)

One problem with this feature was that it only worked for scripts that were registered via ScriptReferences or through the IScriptControl interface. But some components still use ClientScript.RegisterClientScriptResource or ScriptManager.RegisterClientScriptResource. The controls in System.Web for example, like the TreeView, GridView, etc. If you wanted to replace one of those scripts with a static copy, you couldn’t (actually for System.Web scripts there was a way, but as a legacy feature I won’t go into). Now in 4.0, you can. So for example – if you find a bug in WebUIValidation.js for a Validator control in System.Web, or there’s just something about it you don’t like – or even, you want to customize it for some reason, just override the reference:

<asp:ScriptManager runat="server">

    <Scripts>

        <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web"

            Path="~/scripts/customWebUIValidation.js" />

    </Scripts>

</asp:ScriptManager>

An interesting benefit to this is that it is now possible to ScriptManager’s CompositeScript capabilities to combine System.Web scripts! If you are using a GridView and a Validator, for example, you will by default get two WebResource.axd’s to Gridview.js and WebUIValidation.js. Most likely you will also get WebForms.js which has some postback logic in it. Now you can combine them into one:

<asp:ScriptManager runat="server">

    <CompositeScript>

        <Scripts>

            <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" />

            <asp:ScriptReference Name="GridView.js" Assembly="System.Web" />

            <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" />

        </Scripts>

    </CompositeScript>   

</asp:ScriptManager>

Now, that is still going to render as an 'AXD' script -- to ScriptResource.axd. The scripts still live in an assembly, after all. But a feature you probably didn't know about with CompositeScripts (and has been there since ASP.NET 3.5 SP1) is that you can point them at static paths just like regular ScriptReferences. For ultimate in performance and a clean HTML rendering, you can not only combine all those scripts into one, but have them referenced via a simple static script block too. No more 'AXD' with a long, encrypted query string.

<asp:ScriptManager runat="server">

    <CompositeScript Path="~/scripts/combined.js">

        <Scripts>

            <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" />

            <asp:ScriptReference Name="GridView.js" Assembly="System.Web" />

            <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" />

        </Scripts>

    </CompositeScript>   

</asp:ScriptManager>

Simple Assembly Names

A small but welcomed addition. Previously, if you wanted to reference a script embedded in an assembly via a static script reference, you had to include the full assembly name in the ‘assembly’ attribute. If the assembly is a strong named one, that meant including the fully qualified named, including the publicKeyToken which you undoubtedly would have to lookup somewhere (although I have a friend who has memorized his company’s publicKeyToken! LOL). Something like this:

<asp:ScriptManager runat="server">

    <Scripts>

        <asp:ScriptReference Name="Foo.js"

        Assembly="CustomAssembly, Version=1.2.3.4, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />

    </Scripts>

</asp:ScriptManager>

Now you can just use simple assembly name. The caveat to this is you do at least need to have the assembly in your bin, or it must be referenced in the <assemblies> section of your web.config. Otherwise, the simple name could be ambiguous to multiple versions in the GAC. In the previous example, notice I used only ‘System.Web’ when overriding WebUIValidation.

<asp:ScriptManager runat="server">

    <Scripts>

        <asp:ScriptReference Name="Foo.js" Assembly="CustomAssembly" />

    </Scripts>

</asp:ScriptManager>

ScriptResourceMapping

This is definitely my favorite new feature, so I saved it for last. Normally, ScriptManager determines where to get a script from by looking at the Name, Assembly, and Path properties. Name and Assembly go together to indicate an embedded resource in the assembly, and Path is just a path to a static script in your application. Since the beginning, you could override an assembly-based reference with a path-based reference. For example, to get MicrosoftAjax.js to load from a path in your site rather than from an assembly, you could declare a script reference like so:

<asp:ScriptManager runat="server">

    <Scripts>

        <asp:ScriptReference Name="MicrosoftAjax.js" Path="~/scripts/MicrosoftAjax.js" />

    </Scripts>

</asp:ScriptManager>

The assembly is assumed to be System.Web.Extensions if not specified. With this script reference, now even if script controls on the page registered a requirement for MicrosoftAjax.js, this one would be recognized as the same script thanks to the Name being the same. A static reference on ScriptManager trumps all, so your custom path wins, thus replacing the assembly reference with a path one (and worth noting – it still supports auto switching to the debug version and to localized versions).

Great – there are some problems to consider:

  1. What if I want every page in my app to do this? If you’re using a Master Page, you may only have a few ScriptManager’s to deal with, so that may not be so bad. But even then, there’s a maintenance factor here.
  2. What if I am using a 3rd party component and it does not define a CdnPath? Is there any way to make it work with EnableCdn if I can host it somewhere myself?
  3. What if I want to change which CDN is used for a particular resource (remember, we hard coded the path earlier)?
  4. How can I get the benefits of automatically switching between debug and release scripts for a non assembly-based resource?
  5. How can I get the benefits of automatically switching between debug and release scripts for a script like jQuery that does not use the “.debug.js” naming convention?

To be fair, #4 was already possible by explicitly setting the ScriptMode property on the script reference – but we’ll see a better way now.

ScriptResourceMapping to the rescue. Think of ScriptResourceMapping as a static/global location into which you can describe all the details about a particular script resource: a logical name for the script, it’s debug and release locations, what assembly it lives in (if any), and what it’s debug and release CDN paths are. With all that information, ScriptManager can make smarter choices about how to handle a script reference and makes your life easier.

For example, let’s say you want to include jQuery via a ScriptReference.

<asp:ScriptManager runat="server">

    <Scripts>

        <asp:ScriptReference Path="~/scripts/jQuery-1.3.2.js" />

    </Scripts>

</asp:ScriptManager>

But wait – what about jQuery-1.3.2.min.js? You should definitely be using the minimized version in production. But in a debugging environment, it’s better to use the non-minimized version so if you ever need to step into jQuery code, you can actually understand what is going on.

And what about EnableCdn? That’s not going to work with this since ScriptManager doesn’t know about this script. It’s just some script in your project. Yes, you could just put the full ‘http://...’ path in there. But having to remember that path every time you need it is not very nice.

No problem – we’ll just create a mapping that fully describes the resource. Mappings are static, so let’s create them from the Application_Start event in Global.asax:

void Application_Start(object sender, EventArgs e) {

    // map a simple name to a path

    ScriptManager.ScriptResourceMapping.AddDefinition("jQuery", new ScriptResourceDefinition {

        Path = "~/scripts/jquery-1.3.2.min.js",

        DebugPath = "~/scripts/jquery-1.3.2.js",

        CdnPath = "http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js",

        CdnDebugPath = "http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.js"

    });

}

Three big wins here.

  1. Now I can simply reference jQuery by name, just like MicrosoftAjax.js (only I don’t even need the ‘.js’ part).
  2. Because ScriptManager knows the path to jQuery’s release and debug versions, it switches automatically just like it does for MicrosoftAjax.js.
  3. Because ScriptManager knows jQuery’s CdnPath, the EnableCdn feature will toggle using it on/off just like it does for MicrosoftAjax.js.

Using this mapping is simple – just reference the script by name:

<asp:ScriptManager runat="server">

    <Scripts>

        <asp:ScriptReference Name="jQuery" />

    </Scripts>

</asp:ScriptManager>

Beautiful. You can use this to redefine the CdnPath for an existing script, too. For example, say you don’t like the fact that MicrosoftAjax.js loads from the ajax.microsoft.com Cdn. Or, say you are using some 3rd party controls, and they don’t define a CdnPath, but you happen to know of one that uses it (or even, the 3rd party published a Cdn after they shipped the product). Just create a mapping and set the CdnPath. Done. For the entire application.

But wait, there’s even more. The jQuery example shows how you can map a simple name to a static script. But a script resource mapping can also be used to map a name to an assembly resource.

// map a simple name to an assembly

ScriptManager.ScriptResourceMapping.AddDefinition("Foo", new ScriptResourceDefinition {

    ResourceName = "FooResource.js",

    ResourceAssembly = MyAssembly

});

Or, map an existing assembly resource to a static path.

// map assembly resource to a path

ScriptManager.ScriptResourceMapping.AddDefinition("SomeScript.js", SomeAssembly,

    new ScriptResourceDefinition {

        ResourceName = "SomeScript.js",

        ResourceAssembly = SomeAssembly,

        DebugPath = "~/scripts/somescript.debug.js",

        Path = "~/scripts/somescript.js"

});

Or, map an existing assembly resource to a different assembly resource.

// map an assembly resource to another assembly resource

ScriptManager.ScriptResourceMapping.AddDefinition("SomeScript.js", SomeAssembly,

    new ScriptResourceDefinition {

        ResourceName = "SomeOtherScript.js",

        ResourceAssembly = MyAssembly

    });

Don’t forget you can also use this to change where the MicrosoftAjax*.js scripts come from.

This gives you a lot of control over where scripts come from. Now your pages can utilize ScriptManager’s advanced features, without necessarily depending on MicrosoftAjax.js, and without having to hard code paths to scripts or to assembly resources. Now your pages can be a semantic definition of the scripts your page requires – and the details are all in one location. And when the need arises, you can change where those scripts come from, no matter where they came from originally.

Bringing it all together: De-AXD’ifying

Not really a feature of it’s own – but a consequence of the others worth noting. Because ScriptManager can now deal with System.Web scripts or any scripts regardless of which API is used to register them, it is now possible – for the first time – to get rid of all WebResource.axd and ScriptResource.axd urls from the HTML rendering. And you can do it without touching your pages due to the ScriptResourceMapping feature. And what’s more – because of the CompositeScript feature, you can also get them all combined into a single, static script file, with a simple, beautiful url. Or better yet – let Microsoft handle the bandwidth, and use the CDN!

Preview 5 of the Microsoft Ajax 4.0 library has been released. Some quick background – this the next version of the client-side ajax framework you have probably already heard of, the one that ships along with ASP.NET 3.5 (but is also available in script form). The fact it ships with ASP.NET has sometimes led to it being called the ASP.NET AJAX Framework. Technically, that name is a superset – it encompasses “Microsoft Ajax” and it’s ASP.NET specific, server-side features, like the ScriptManager. But “Microsoft Ajax” always has and always will be an ajax framework that is not tied to any specific server-side technology. Also noteworthy is that this 4.0 library can run on top of ASP.NET 3.5, replacing the 3.5 version it normally uses.

In previous previews of Microsoft Ajax 4, we introduced the DataView control. It’s a simple but powerful control that takes advantage of the client templating engine we built for it. You point it at a template, and some data, and it instantiates the template for each item in the data. The templating engine lets you use ‘placeholders’ and create ‘live bindings’ between the rendered DOM elements and the data, as well as allow you to attach other ajax components and controls.

I want to focus on one of the new features added to the DataView in preview 5, but first, I feel obliged to introduce the DataView control from a basic level, since most of you probably don’t know about it yet.

Simple DataView Example

As a simple example – lets make up some data. Normally this would come from a web service or some other source, not hard coded, of course.

var stockData = [
    { symbol: "DJIA"  , change: 79.88, value: 9627.48 },
    { symbol: "NASDAQ", change: 23.63, value: 2084.02 },
    { symbol: "AAAA"  , change: -0.22, value: 27.56 },
    { symbol: "BBBB"  , change: -1.46, value: 82.12 },
    { symbol: "CCCC"  , change: 0.67 , value: 7.56 }
];

We want to show this stock data in a table, and probably do some formatting to show the values as currency, etc. Without a templating engine, you’d basically either have to painstakingly create DOM elements by hand, or build up a string and use innerHTML. Neither technique is easy to maintain, or are designable by designer tools. Worse, building a string and using innerHTML could net you some XSS vulnerabilities. This is where the templating engine in Microsoft Ajax 4 comes in.

<table id="stocks" class="stocks sys-template">
    <tr>
        <td>{{ symbol }}</td>
        <td>{{ value.localeFormat("c") }}</td>
        <td>{{ change.localeFormat("c") }}</td>
        <td>{{ (change/value).format("p2") }}</td>
    </tr>
</table>

In the simple form, {{ foo }} represents a placeholder where the value of a field named ‘foo’ from the data items will be. What language is this stuff? Just javascript. So as you can see, this take advantage of the formatting methods in Microsoft Ajax to convert the values to currency. You could write any ole javascript here, of course (unobtrusive javascript alert: yes, you can do it that way too, more on that later).

The class “sys-template” is setup to have display:none, so that this chunk of HTML doesn’t actually show up in the markup.

That’s the template – it represents what each item should look like. Now to put it to use with the DataView control:

function pageLoad() {
    $create(Sys.UI.DataView, {
        data: stockData
    }, null, null, $get("stocks"));
}

That’s it. The DataView control is given the data, and the template. Everything is hooked up. Here is the result (css not shown):

image 

One obvious improvement we could make to this sample is to dynamically style the rows so that stocks going up are green, down, red. You can in fact do that, but I digress. This is just the most basic use of a DataView. I haven’t even mentioned live bindings. And even in preview 4 you could reuse templates across multiple dataviews, and set the placeholder to be something other than the default. Here is an excellent article by Jim Wang which covers some of the other things you could do in Preview 4, including selecting items, and integrating with an ADO.NET DataService.
http://weblogs.asp.net/jimwang/archive/2008/11/05/working-with-ado-net-data-services-in-ajax.aspx

Preview 5 – Dynamic Templates and Dynamic Placeholders

Preview 5 introduces a new feature to the DataView control that allows you to dynamically determine the template used for each data item, as well as dynamically determine the placeholder that anchors where it will be inserted. This means each data item can potentially render completely differently, and render into completely different areas of the page, all the while being under the control of a single DataView!

What does this mean? Well, say you have a single set of data returned by a service of some kind. But you don’t want to simply list this data all in one place. Some needs to go there, and some over there, depending on the state of each item. A typical example of this might be a data set of forum posts, where some of them are marked as ‘sticky’, and so should be listed first, but the sticky ones aren’t necessarily first in the list of data. How would you normally deal with that? Separate the sticky items into their own data set, or query for them separately? If you are using stored procedures, maybe that means creating a new one or modifying an existing one to support the filtering. Why go through such hoops and database-level manipulations when this is purely a UI problem? If it can’t be solved by your UI tools, perhaps you’re blurring your separation of concerns.

So as an experiment, I imagined a list of bloggers. Each blogger may or may not be on Twitter, right? But I want the tweeting and non-tweeting bloggers to be listed separately. Furthermore, the way I display a tweeting blogger and a non-tweeting blogger may be very different. For one, I want to display some of the latest tweets from the tweeting bloggers, and display their Twitter avatar.

Mind you, it is certainly possible to use dynamically determined css classes, and to dynamically show/hide regions of content within a template, based on the data item. But that only gets you so far. Sometimes, the differences are too much to neatly define a single template that can represent either kind of data item. This particular example could have been done either way. Maybe I just wasn’t creative enough :)

First – let’s define our bloggers.

var bloggerList = [
    { name: "InfinitiesLoop", author: "Dave Reed",
        uri: "http://weblogs.asp.net/infinitiesloop", twitter: "infinitiesloop" },
    { name: "Computer Zen", author: "Scott Hanselman",
        uri: "http://www.hanselman.com/blog", twitter: "shanselman" },
    { name: "Random Thoughts", author: "Bob",
        uri: "http://myblog.com" },
    { name: "Tales from the Evil Empire", author: "Bertrand Le Roy",
        uri: "http://weblogs.asp.net/bleroy", twitter: "bleroy" },
    { name: "The Gu", author: "Scott Guthrie",
        uri: "http://weblogs.asp.net/scottgu", twitter: "scottgu" },
    { name: "Some blog", author: "Mr. IDontTwitter",
        uri: "http://weblogs.asp.net/donttwitter" },
    { name: "Jim Wang's Blog", author: "Jim Wang",
        uri: "http://weblogs.asp.net/jimwang/", twitter: "turanuk" },
    { name: "James Senior", author: "James Senior",
        uri: "http://www.jamessenior.com/", twitter: "jsenior" }
];

Each blogger has a blog name, author name, uri, and if they have one – a twitter id. Important to note – the non-twittering bloggers are not at the beginning of the array, they are mixed in with the others.

For brevity I’m going to show the declarative way of attaching a DataView control, even though we feel most developers would prefer to keep this stuff separated from their markup. Everything you see here can be done in pure code (imperatively). And we are actively working on some very interesting improvements that make the imperative ways much, much easier than they are in Preview 5, so stay tuned, you won’t want to miss it. Both declarative and imperative approaches are in the sample download at the end of this post.

Let’s first define the overall structure we want:

<div id="bloggers" class="bloggers"
    sys:attach="dv" dv:data="{{ bloggerList }}"
    dv:onitemrendering="{{ itemRendering }}">
    <div class="notwitter">
        Non-twittering Bloggers
        <ul>
            <li id="normalph"></li>
        </ul>
    </div>
 
    <div class="hastwitter">
        Twittering Bloggers
        <ul>
            <li id="twitterph"></li>
        </ul>
    </div>
</div>

Two divs, one for each kind of blogger. And placeholders for where each should be rendered. A DataView is attached declaratively with sys:attach=”dv” (the ‘dv’ comes from an xml namespace declared on the documents body tag and maps the namespace ‘dv’ to the Sys.UI.DataView class, ‘dv’ is not magical). As each blogger is processed, the ‘itemRendering’ event is fired before anything is instantiated for it. We’ve hooked up a handler for it:

function itemRendering(dv, args) {
    var blogger = args.get_dataItem();
    if (blogger.twitter) {
        args.set_itemTemplate("twitterblogger");
        args.set_itemPlaceholder("twitterph");
    }
    else {
        args.set_itemTemplate("normalblogger");
        args.set_itemPlaceholder("normalph");
    }
}

If the blogger has a Twitter id, we set the template to the ‘twitterblogger’ template and tell it to render where the ‘twitterph’ element is. Otherwise, we use the ‘normalblogger’ template and render them where the ‘normalph’ element is. For a ‘normal’ blogger, we just want to render a link to their blog and their name:

<ul class="sys-template" id="normalblogger">
    <li>
        <a sys:href="{{ uri }}">{{ name }}</a>
        <span>author: {{ author }}</span>
    </li>
</ul>

Pretty simple. For a tweeting blogger, we want to do something slightly different, plus we want to show their last 5 tweets for good measure.

JSONP

Another feature in Microsoft Ajax 4, I should mention, is JSONP support. And good thing too, because it makes this demo way cooler. Twitter happens to have a JSONP service, and the DataView integrates nicely with the networking support in Microsoft Ajax, giving it JSONP support, too. So getting tweets for someone is just a matter of creating a DataView with the JSONP address as the ‘dataProvider’. So our Blogger DataView is going to actually contain a nested DataView. Here is the ‘twitterblogger’ template:

<ul class="sys-template" id="twitterblogger">
    <li>
        <a sys:href="{{ uri }}">{{ name }}</a>
        <span>{{ author }}</span>
        <ul class="tweets sys-template" sys:attach="dv" dv:autofetch="true"
            dv:dataprovider="{{ getTwitterUrl(twitter) }}">
            <li>
                <img class="avatar" sys:src="{{ user.profile_image_url }}" alt="" src="" />
                {{ text }}
            </li>
        </ul>
    </li>
</ul>

So, our blogger entry has a nested UL, to which we attach another DataView with the JSONP Twitter url as the target provider. The data returned from Twitter also has information about the Twitter user, like their avatar, so we may as well show that, too. The ‘getTwitterUrl’ call demonstrates that you aren’t limited to just data – you can do stuff with it too. That method simply takes the blogger’s Twitter id and constructs the JSONP service url for their last 3 tweets.

That’s it! Here it is in action:

image

Download the sample code here.

Also, be sure and check out these other awesome posts about Microsoft Ajax 4.

These are based on previous preview releases.

There’s a lot of debate these days about the ASP.NET WebForms model vs. the newer ASP.NET MVC model. There are advantages to both. Disadvantages to both. Pick the one that best fits your needs. Nuff said. But sometimes that choice isn’t so obvious.

MVC for example essentially gives you much more control over the generated HTML for the page. Well, complete control. But sometimes you don’t really need complete control, and the lack of an encapsulated control kind of sucks. HTML Helpers help, but they have no design time experience. Hence, there are the MVC Controls in the MVC Futures project on CodePlex and an interesting compromise between the two models, at least when it comes to the rendering part of the application.

But then there’s the other side of the equation – you’ve got a WebForms application, and you need a little more control over the HTML. What’s the compromise there? Well, server controls try to give you control over the markup. Some of them do a pretty good job at it, like the ListView control added in ASP.NET 3.5. Others, not so good. If a control doesn’t let you do what you need, you are pretty much stuck – either abandon the control and all its usefulness, or write your own control.

What’s in a control anyway?

If you think about it, controls at the highest level are really two very different things.

  1. Controls abstract the rendering of HTML.
  2. Controls provide client-server integration by managing data between client and server.

Take the CheckBox control. It renders an input and label, and connects them with the ‘for’ attribute, so clicking the text also checks and unchecks the checkbox. That’s it’s HTML abstraction. It provides client-server integration by allowing you to dynamically read and write to the checked property on a server-side proxy.

A simple example of #2 is the TextBox control. Double meaning, uh, not intended. Type some text into the box and submit the form – magically, the server-side instance knows what its Text property should do. The control can also push data back to the client. Set the Text property, and magically the value is reflected in the rendered page. This can be much more complex though – the control might manage a hidden field, or rely on data stored in that catch-all hidden field we love to hate, ViewState.

The thing is, HTML abstraction is useful, but a lot of the time it doesn’t provide a ton of benefit. Client-server integration, however, is usually much more useful. If you don’t need that there’s a good chance you don’t need a control to begin with.

Html Controls

I would be wrong not to point out that there’s a whole namespace of controls in ASP.NET that are largely underused. HTML controls allow you to add a runat=”server” to an HTML element and get reasonable client-server integration with it. So if you don’t like how the CheckBox control renders, just use the HtmlCheckBox instead. But what if you’re using a more complex control that has no HTML equivalent?

What if you could control the HTML for any server control without losing the client-server interaction?

Wouldn’t that be nice?

Taking Control

Introducing the CustomRender control. This control suppresses the rendering of any control(s) you put in it, while allowing you to define your own, replacement HTML. It gets a little nicer than that, though. One step at a time – first, lets choose the enemy. A Button control that sets the text of a Label control.

<script runat="server">
    private void ButtonClick(object sender, EventArgs args) {
        Label1.Text = "You clicked Button1";
    }
</script>
<asp:Button ID="Button1" runat="server" Text="Go" OnClick="ButtonClick" />
<asp:Label ID="Label1" runat="server" />

You’re going down, Button1. Bring on the CustomRender:

<i88:CustomRender runat="server">
    <ControlTemplate>
        <asp:Button ID="Button1" runat="server" Text="Go" OnClick="ButtonClick" />
        <asp:Label ID="Label1" runat="server" />
    </ControlTemplate>
</i88:CustomRender>

That’s step 1. Now how do we get our own HTML in here? As this stands, the button and label will not render anything. They still participate in the page lifecycle and all that goodness. But nothing renders. So we could just put the HTML next to the CustomRender control. But it would be nice if this control helped me out a little by giving me what these controls would have rendered, wouldn’t it? Lets swap over to Design View.

If you’re one of the types that never uses Design View – it’s that button that says ‘Design’ on the lower left, or Shift-F7.

image

Click on “Update HtmlTemplate”, then switch back on over to Source view. Voila…

<i88:CustomRender runat="server">
    <ControlTemplate>
        <asp:Button ID="Button1" runat="server" Text="Go" OnClick="ButtonClick" />
        <asp:Label ID="Label1" runat="server" />
    </ControlTemplate>
    <HtmlTemplate>
        <input ID="Button1" name="Button1" type="submit" value="Go" /> <span ID="Label1">
        </span>
    </HtmlTemplate>
</i88:CustomRender>

The designer for the control has rendered its ControlTemplate and put the result into the HtmlTemplate. And just to prove it works, modify the HTML a little. Lets change the ‘value’ of the input from ‘Go’ to ‘Gone’.

image

And now lets click the button and see if the server control still works. Remember, it’s supposed to set the text of the label to “You clicked Button1.”. Hmmmm.. nothing. It broke!!! No… remember, when you do this, you take complete control over the HTML. That text doesn’t just come from no where. The code is running, but you haven’t put it into your HTML.

How do you do that? No problem – think of the HTML template like a mini-MVC View.

<HtmlTemplate>
    <input ID="Button1" name="Button1" type="submit" value="Gone" />
    <span ID="Label1"><%= Label1.Text %></span>
</HtmlTemplate>

Now when we click the button, it works:

image

Show Off – The Challenge

“Okay,” you say, “but that’s just a button and a label. What about a real world scenario,” you spout in disbelief? I dunno if you said that, but it’s more interesting to pretend like you are challenging me to put this technique to the test. I accept your pretend challenge.

Way back in ASP.NET 1.x there was the DataGrid control. As great as it was at the time, it’s limitations eventually led to the GridView control. As great as that was, you still didn’t get enough control over the markup and CSS, so the ListView control was born (I often wonder what we’d call the next iteration – running out of two-word data-like combinations aren’t we? No, there already is a DataList control!). My point being that in the current set of databound controls, the DataGrid control is probably the oldest and most set in its ways, and most known for its lack of customizability. It renders as a <Table>, and that’s that. How 1990’s of it.

A perfect target for the challenge – let’s do the unthinkable. Get a DataGrid to render as <UL> and <LI> and be styled with 100% CSS, while maintaining the server-side features like SelectedIndex.

First, lets take a look at a DataGrid utilizing the SelectedIndex feature.

<asp:DataGrid ID="dg1" runat="server" 
    AutoGenerateColumns="false" SelectedIndex="1" SelectedItemStyle-CssClass="selected"
    DataSource='<%# DummyData %>'>
    <Columns>
        <asp:BoundColumn DataField="Name" />
        <asp:ButtonColumn DataTextField="Price" DataTextFormatString="{0:c}" CommandName="Select" />
    </Columns>
</asp:DataGrid>

It shows two columns – a product name, and a price, formatted as currency. You can click on the price to select the item, which then has a different CSS class. The DummyData property is just returning an ArrayList with a few sample items. Let’s not forget how you databind this thing… you may be using a DataSource control. For this purpose we’ll just do it the old fashioned way.

protected override void OnLoad(EventArgs e) {
    if (!Page.IsPostBack) {
        dg1.DataBind();
    }
    base.OnLoad(e);
}

Now lets take a look at the rendering.

<table cellspacing="0" rules="all" border="1" id="dg1" style="border-collapse:collapse;">
    <tr>
        <td>&nbsp;</td><td>&nbsp;</td>
    </tr><tr>
        <td>Widget</td><td><a href="javascript:__doPostBack('dg1$ctl02$ctl00','')">$19.95</a></td>
    </tr><tr class="selected">
        <td>Horn</td><td><a href="javascript:__doPostBack('dg1$ctl03$ctl00','')">$2.99</a></td>
    </tr>
</table>

image

A few things of note going on here. For the SelectedIndex feature to work, the ButtonColumn has rendered an <A> tag which does a postback. The ID it passes to the __doPostBack function is the UniqueID of a link button it has added to the control tree. The LinkButton raises a bubble command named “Select”, which the DataGrid picks up and sets its SelectedIndex property. While rendering, the DataGrid applies a different style to the selected item.

Translating this into your own custom HTML is pretty easy actually. The trick is to do rendering only – you could in theory use a Repeater to bind over the same items. We’re trying to leverage the existing features of the DataGrid, so rather than grab the data directly we’re enumerate the DataGrid’s Items collection and try to reuse as much as we can.

Again, think of this template as a mini-MVC view, and the actual control we are targeting is like our ViewData. That way, changes to the DataGrid don’t require changes to the custom rendering.

<i88:CustomRender runat="server" ID="c1">
    <ControlTemplate>
        <asp:DataGrid ID="dg1" runat="server" SelectedItemStyle-BackColor="Red"
            AutoGenerateColumns="false" SelectedIndex="1"
SelectedItemStyle-CssClass="selected"
            DataSource='<%# DummyData %>'>
            <Columns>
                <asp:BoundColumn DataField="Name" />
                <asp:ButtonColumn DataTextField="Price"
DataTextFormatString="{0:c}" CommandName="Select" />
            </Columns>
        </asp:DataGrid>
    </ControlTemplate>
    <HtmlTemplate>
        <% for (int i = 0; i < dg1.Items.Count; i++) {
               // enumerate the DataGrid's items so we can choose how to render them
               var item = dg1.Items[i];
               // the ButtonColumn is rendering a LinkButton or Button 
               var priceLink = (IButtonControl)item.Cells[1].Controls[0];
               %>
        <ul class="item<%= dg1.SelectedIndex == i ? " selected" : "" %>">
            <li><%= item.Cells[0].Text %></li>
            <li class='price' 
onclick="<%= Page.GetPostBackEventReference((Control)priceLink) %>">
<%= priceLink.Text %>
</li>
        </ul>
        <% } %>
    </HtmlTemplate>
</i88:CustomRender>

A for loop enumerates the DataGrid.Items collection. For the first column we just repeat the cell’s text. The 2nd column is more complex as it contains a LinkButton with a postback reference. Even so, it’s not too complex – get a reference to the LinkButton and use Page.GetPostBackEventReference() to generate the necessary postback script. We are now free to apply CSS in anyway we like. Watching for the the SelectedIndex, we apply a ‘selected’ class, for example.

I’ve just quickly put together these styles to make each ‘item’ float left, so the “grid” isn’t even a grid anymore, just to show how it can be totally different.

<style type="text/css">
    ul.item {
        float: left;
        list-style-type: none;
        padding: 0px 10px 0px 10px;
    }
    ul.selected {
        border: solid 1px red;
    }
    li.price {
        cursor: pointer;
        color: Blue;
        text-decoration: underline;
    }
</style>

And here it is running.

image

Mission Accomplished

Perhaps you are thinking that is pretty ugly and difficult. If you are, remember that is why controls abstract that stuff away for you, so it’s easy and expressive. This is by no means “the end” of control rendering. It’s a tool you should keep in your toolbox. If you have a difficult to fix rendering issue for a specific control, now you don’t have to say goodbye to the whole thing.

How does it work?

It’s actually pretty simple! All controls create their HTML in the Render() method. To control the HTML, you just need a way of injecting your own HTML while suppressing the stuff it’s Render() method produces. Ok – so, don’t call Render(). The Render method unfortunately does not only produce HTML. Sometimes it produces script references or “startup” scripts. Sometimes it registers with the ASP.NET Event Validation feature for security purposes. So this control still calls Render, but it throws away the resulting HTML. It instantiates the ControlTemplate like any other template, adding it to its own control tree so they particulate in the lifecycle. It just chooses to actually render the HTML template instead. That is, unless it is design time. Then it renders the control template – allowing you to use the controls in the designer like you normally could.

Gotchas

Controls will not necessarily take kindly to being rendered “for reals” at Design Time. The page isn’t real, and the other controls on the page don’t necessarily exist or are in their proper hierarchy. So the “Update HtmlTemplate” designer action may not always work. It might even cause an exception to be thrown. It depends on the control.

Also, I find that although the correct HTML is being rendered internally, VS gets it’s hands on it and makes a few modifications to the persistence of it for some reason. It seems mostly benign, like reordering element attributes. But one bad thing it does is capitalize the ‘id’ attribute, which is supposed to be in lower case if you care about XHTML compliance. Easy enough to fix once you get the HTML bootstrapped. I’m trying to find out from someone on the team why this happens and if we can fix it. If all else fails, you can always run the page and use the actual source to get the HTML rather than use the designer trick.

Download & Discuss

It’s up on code gallery, including the sample of the world’s first cannibalized DataGrid.

http://code.msdn.microsoft.com/aspnetcustomrender

Looking for an ASP.NET AJAX book? This one has been massively updated from its 2.0 version, to cover in detail the features added in 3.5, and not to be forgotten, 3.5 SP1. For example, Script Combining was a new feature in 3.5 SP1, and so was History support, so it's an important distinction! The 2.0 book was 307 pages, and this one is 552. History support, by the way, has a dedicated chapter. Script combining is a major portion of the chapter on the ScriptManager.

 Another important difference between the 2.0 and 3.5 versions -- this time, I'm a contributing author. :) My first major technical publication, hopefully more to come. I'm that weird guy on the right.

http://www.amazon.com/Professional-ASP-NET-AJAX-Bill-Evjen/dp/0470392177

I ran into an interesting and unexpected behavior in ASP.NET AJAX event handling the other day. Once I figured out what was going on, I was almost positive it was a bug, so I started looking into what a solution would be. But just out of curiosity, I looked at what the behavior was for a server-side event. Much to my surprise, the behavior was the same. The behavior then was consistent with the server-side behavior, not a bug. But is it the "correct" behavior? Tell me what you think...

To put it in the most shocking way possible: Removing a handler from an event does not guarantee that handler will not be called when the event fires!

SACREBLEU!!

But it's true. Take a look at this code...

public class Bar {
    public event EventHandler SomeEvent;
 
    public void RaiseEvent() {
        if (SomeEvent != null) {
            SomeEvent(this, null);
        }
    }
}
 
public class Foo {
    private Bar _bar;
    private EventHandler _handler;
    private ArrayList _list;
 
    public void Initialize(Bar bar) {
        _bar = bar;
        _list = new ArrayList();
        // listen to the event on bar
        _handler = new EventHandler(OnSomeEvent);
        _bar.SomeEvent += _handler;
    }
 
    private void OnSomeEvent(object sender, EventArgs args) {
        // event was raised, do something
        // this cant happen if Stop() was called.... right?
        _list.Add("blah");
        Console.WriteLine("OnSomeEvent");
    }
 
    public void Stop() {
        // tidy up, stop listening to the event and clear the list
        _bar.SomeEvent -= _handler;
        _list = null;
    }
}

Now, this is a totally contrived example, so the code here isn't exactly useful. But the basic idea can occur in a real program. Here, there's a Bar component that exposes an event, SomeEvent. Normally a component raises it's event when appropriate and doesn't have an actual RaiseEvent() method to raise it, but for demo purposes, it's got one so we can fire the event later on.

The Foo component has two public methods -- Initialize, and Stop. Initialize takes a Bar component, and it adds an event listener to the event. Stop removes the event listener, since after all, it is important to clean up after yourself when it comes to events. If the handler was never removed, the Bar component will forever have a reference to the Foo, and Foo will live as long as Bar lives.

When the SomeEvent fires, Foo adds to an ArrayList which it has internally created. Notice in Stop() it sets the ArrayList to null. The event handler OnSomeEvent adds to the list without checking it for null.

If somehow the event handler were called even after Stop(), we'd have a null reference exception! Can't happen, right? When you think about a typical use of these components, it doesn't appear to be possible... Here would be one way of raising the event and removing the handler.

public class Program {
    public static void Main(string[] args) {
        Bar bar = new Bar();
        Foo foo = new Foo();
 
        foo.Initialize(bar);
        bar.RaiseEvent();
        foo.Stop();
 
        Console.ReadLine();
    }
}

image

No problem there. But what if an event handler for SomeEvent removes the event handler of a separate component? Something like this...

public static void Main(string[] args) {
    Bar bar = new Bar();
    Foo foo = new Foo();
 
    bar.SomeEvent +=
        delegate(object sender, EventArgs a) {
            foo.Stop();
        };
    foo.Initialize(bar);
    bar.RaiseEvent();
    foo.Stop();
 
    Console.ReadLine();
}

The result? BOOM...

NullReferenceException

Even though Foo has removed its listener, the listener is called. The reason is because its listener was removed after the event was already underway -- and, I suppose for multi-threaded reasons, once an event begins, the listeners that existed at the time will fire even if they are removed in the process.

Again, this is a very contrived example. But it could happen more innocently and not be so obvious. Perhaps when SomeEvent occurs, under a certain condition, a listener in the application decides to shut down some container which contains a Foo component, and that shutdown process calls Stop() on Foo. The first listener doesn't know that will happen. And Foo doesn't know Stop() was called as a result of an earlier listener to the very event it is unhooking from. Who is supposed to know what is going on?

So be careful, I suppose is the lesson to be learned. If a component may end up removing an even listener as a result of code external to it, it is entirely possible that it is the very event it is removing the listener from that is currently executing and causing it. In that scenario, you shouldn't assume you are safe from the listener being called.

More Posts Next page »