Infinities Loop

ASP.NET 4.0 ScriptManager Improvements

InfinitiesLoop — Tue, 24 Nov 2009 05:51:00 GMT

.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...(read more)

Microsoft Ajax 4 Preview 5: The DataView Control

InfinitiesLoop — Fri, 11 Sep 2009 20:00:00 GMT

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...(read more)

ASP.NET WebForms: Taking Back the HTML

InfinitiesLoop — Wed, 01 Jul 2009 23:44:00 GMT

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.

Controls abstract the rendering of HTML.
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.

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’.

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:

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>

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.

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

Professional ASP.NET 3.5 AJAX Released

InfinitiesLoop — Tue, 10 Feb 2009 23:35:00 GMT

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

The Event Handler That Cried Wolf

InfinitiesLoop — Wed, 14 Jan 2009 16:00:11 GMT

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...(read more)

ASP.NET AJAX 4.0: Observing updates to POJOs (Plain 'Ole JavaScript Objects)

InfinitiesLoop — Mon, 10 Nov 2008 07:27:57 GMT

First of all, if you haven't already done so, download the ASP.NET AJAX 4.0 Preview 3 now and try it out! And after you're done with that, come back here, or there , or there , or there , and let us know what you think and what you like or don't like...(read more)

Google Chrome - Aw, Snap!

InfinitiesLoop — Thu, 04 Sep 2008 05:32:00 GMT

Plenty of people have already seen this... interesting... error screen in chrome. I wanted to see what a run-away script would do to Chrome. There's always a warning that the script is taking too long, giving you a chance to shut it down. Here's what...(read more)

Visual Studio Tip: Disable F1!

InfinitiesLoop — Fri, 18 Jul 2008 20:35:34 GMT

Lately I've been using a laptop more often than a desktop to work in Visual Studio, and of course like most laptop keyboards, the keys are jammed close together. The most annoying thing I keep doing by mistake is hitting F1 instead of Escape, which of...(read more)

My Latest Work

InfinitiesLoop — Wed, 18 Jun 2008 04:18:48 GMT

Sky Lynn Reed's 0th birthday is 5/15/2008 at 5:44pm, when she weighed 8 pounds, 0 ounces. A nice round binary number. Our first born! There are simply no words to describe the experience. We debated on whether we should have kids for a long time. After...(read more)

Flickering UI From the ASP.NET AJAX Toolkit TabContainer while in an UpdatePanel?

InfinitiesLoop — Wed, 30 Apr 2008 18:57:00 GMT

UPDATE This issue is officially fixed in .NET 3.5 SP1. If you have applied the workaround in this blog post, you no longer need it. But the story of this bug is still rather interesting. UPDATE If you upgrade from Microsoft ASP.NET AJAX Extensions 1.0...(read more)

TRULY Understanding Dynamic Controls by Example

InfinitiesLoop — Wed, 23 Apr 2008 07:53:17 GMT

Many of the comments I've received in the various dynamic controls entries I've written have been questions for help with a specific scenario. A lot of those scenarios are similar. One in particular I keep hearing is something as follows: The user is...(read more)

OnLoad vs. Page_Load vs. Load event

InfinitiesLoop — Tue, 25 Mar 2008 02:32:00 GMT

I get this question a lot for some reason. The more general question is whether it is better to override a virtual method on the page or control in question (OnLoad, OnInit, OnPreRender, etc), or to hook into the corresponding event . For page development...(read more)

TRULY Understanding ViewState, the comment index

InfinitiesLoop — Wed, 20 Feb 2008 05:23:00 GMT

A long time ago I published one of my first blog entries, TRULY Understanding ViewState . And what an experience it has been. It was pretty popular with commenters, so much so I decided to spin off a whole series of articles, TRULY Understanding Dynamic...(read more)

ASP.NET Futures: Intro to the Xaml and Media Controls

InfinitiesLoop — Tue, 13 Nov 2007 01:46:00 GMT

Still relatively unknown, ASP.NET Futures is a nice little add-on to ASP.NET and ASP.NET AJAX that contains some features we want public feedback on. It's a playground in which technology gets to frolic in front of the public's (your) eyes. So why not seize the opportunity to play with the bits and submit your thumbs up, thumbs down?

I thought I'd give an introduction to two of the controls in ASP.NET Futures that I'm most fond of (I've worked on them, so I'm a little bit partial). If you already know about them, excellent, please log in some feedback.

<asp:Xaml runat="server" />

The Xaml control is an integration story between Silverlight and ASP.NET. If you are writing ASP.NET pages that contain Silverlight content, especially if you are also using AJAX features, it's definitely worth a look. Because it's not only an integration of Silverlight and ASP.NET, but between Silverlight and ASP.NET AJAX. It defines a new client-side ajax type, Sys.Preview.UI.Xaml.Control. So, if you are familiar with ASP.NET and with ASP.NET AJAX, this control gives you a logical extension. Just point the control at a XAML resource, and it wraps an ajax type around Silverlight, giving you a familiar and object-oriented asp.net ajax programming model to work with the surface area between the HTML page and the Silverlight plugin instance.

Take a look at a Calculator implemented using the Xaml control.

<asp:Media runat="server" />

I said it is object oriented, and it is. The media control defines another client-side ajax type which derives from the first: Sys.Preview.UI.Xaml.Media.Player. When this type wraps a Silverlight plug-in, it does a lot of work to it, searching within the Xaml document for elements of certain predetermined names like "PlayButton", and makes them more than just a pretty Canvas by adding behavior to them implied by their name. It may seem trivial, but there are a lot of subtle things that must happen to make what is essentially static markup (the xaml) behave like a full-blown media player. Silverlight makes it look pretty. The Media control brings it to life.

Not just a black box

When you watch video on a web page, you probably don't expect much in the way of interaction between the video and the page. The video is like a rich island in the middle of boring HTML, and never the twain shall meet. Even the orientation of the video is pretty much fixed -- ever seen a movie playing on a webpage at at 15 degree angle? I haven't. I'm not sure I want to, but I sure haven't!

But it doesn't have to be that way... The media control exposes some pretty cool client-side APIs in the form of properties and events that allow for some really interesting interaction between the media and the rest of the page. asp:Media... Tearing down walls!

Take a look at some of the cool things you can do with it.

Not just for fun, either

The Media control can work with any Xaml. It's very forgiving with which Xaml elements it requires, too. What? Your Xaml doesn't have a MuteButton? Ok, no problem. But it does have a WizzyWigDoSomethingButton -- well, it doesn't know what that is, but a client-side type you create that derives from the media player's client side type knows what to do with it.

The only element required is the MediaElement. Yeah you kind of need that one...

You get the picture. But what most people don't know, even those who use it, is that the client-side code that drives the Media control has already appeared in many places. So many, in fact, that if you've seen video playing in Silverlight, you've probably executed the code. The code was joint developed and is shared by the Expression Encoder product, which allows you to export videos to html for execution in Silverlight. It too creates nice media player functionality in Silverlight... and it does it using the exact same code the Media control uses. Well, the namespace is different. But that's it.

Here are some examples of sites using the Media control's client-side ajax type. Note how vastly different they look and behave -- a testament to Silverlight and this control.

Halo 3 on MSN
The Silverlight Learning Videos
Silverlight on Microsoft.com
The Channel 8 and Channel 9 Video Players
(hear about this one here. Favorite quote, "It seems almost too easy...")
James Clarke's Weblog

So there you have it. If you want to play video or audio on your site using Silverlight, and you don't want to implement an entire media player UI from scratch, have a look-see.

EDIT: Hey, my first post tagged "Silverlight". Expect more in the future.

Migraine m = (Migraine) DiagnosisFactory.Diagnose(pain)

InfinitiesLoop — Tue, 06 Nov 2007 02:51:00 GMT

I've struggled with pretty bad headaches probably ever since high school. They come and go with intensity and frequency. Sometimes I think I have them figured out. Eat right, and before I get starving, get enough sleep, and they usually leave me alone. But stressful times, like long business trips or big presentations, or other matters, can easily prompt one. I've grown so used to them that I always make sure I have a supply of Excedrin nearby. There's a bottle at home, up and down stairs, at work, even in the car for those unexpected times. I even have family members be sure to have a stock if I know I'll be visiting for an extended period of time.

For whatever reason, Excedrin seems to be the only thing that helps. Nothing else even touches my headaches. But sometimes, on rare occasions, even Excedrin fails. Today was one of those times.

Bad enough that I finally went to a doctor about it (I was lucky to get a walk-in appointment). After describing all my symptoms, sure enough, these Excedrin-immune headaches are the migraine variety.

If you've had a migraine, I need not explain how terrible they are. If you're one of the lucky ones who don't get them, well, for me they on par with a really bad hangover.

There are lots of options these days for dealing with them. The key is preventing them by understanding what triggers them for you. I've lived with them all my life so far because they crept up on me. I never thought they were migraines because descriptions I read of them seem much more severe than what I have. Indeed I do seem to be luckier than most migraine sufferers -- they are bad, but not so bad that I must lock myself in a dark room for two days. Just thought I'd share my experience -- I'm sure lots of you can relate!

Perhaps this is one sub-conscious reason why I prefer The Dark Side of Visual Studio. The bright light of the normal color scheme is just too overpowering.