Run Tings Proper

SOLVED: “An error was encountered” in WSAT (Website Admin Tool)

2012-07-27T18:08:00.000+01:00

If you’re seeing a cryptic error when you try to add users via the built in WSAT tool that says “An error was encountered. Please return to the previous page and try again.” then this article will probably help you get to the bottom of it.

Problem

I could add roles using the WSAT without any problem but whenever I tried to add a user I would see this cryptic and unhelpful error message:

An error was encountered. Please return to the previous page and try again. 

The following message may help in diagnosing the problem: Exception has been thrown by the target of an invocation. at System.RuntimeMethodHandle._InvokeMethodFast(Object target, Object[] arguments, SignatureStruct& sig, MethodAttributes methodAttributes, RuntimeTypeHandle typeOwner) at System.RuntimeMethodHandle.InvokeMethodFast(Object target, Object[] arguments, Signature sig, MethodAttributes methodAttributes, RuntimeTypeHandle typeOwner) at System.Reflection.RuntimeMethodInfo.Invoke(Object obj, BindingFlags invokeAttr, Binder binder, Object[] parameters, CultureInfo culture, Boolean skipVisibilityChecks) at System.Reflection.RuntimeMethodInfo.Invoke(Object obj, BindingFlags invokeAttr, Binder binder, Object[] parameters, CultureInfo culture) at System.Web.Administration.WebAdminMembershipProvider.CallWebAdminMembershipProviderHelperMethodOutParams(String methodName, Object[] parameters, Type[] paramTypes) at System.Web.Administration.WebAdminMembershipProvider.CreateUser(String username, String password, String email, String passwordQuestion, String passwordAnswer, Boolean isApproved, Object providerUserKey, MembershipCreateStatus& status) at System.Web.UI.WebControls.CreateUserWizard.AttemptCreateUser() at System.Web.UI.WebControls.CreateUserWizard.OnNextButtonClick(WizardNavigationEventArgs e) at System.Web.UI.WebControls.Wizard.OnBubbleEvent(Object source, EventArgs e) at System.Web.UI.WebControls.CreateUserWizard.OnBubbleEvent(Object source, EventArgs e) at System.Web.UI.WebControls.Wizard.WizardChildTable.OnBubbleEvent(Object source, EventArgs args) at System.Web.UI.Control.RaiseBubbleEvent(Object source, EventArgs args) at System.Web.UI.WebControls.Button.OnCommand(CommandEventArgs e) at System.Web.UI.WebControls.Button.RaisePostBackEvent(String eventArgument) at System.Web.UI.WebControls.Button.System.Web.UI.IPostBackEventHandler.RaisePostBackEvent(String eventArgument) at System.Web.UI.Page.RaisePostBackEvent(IPostBackEventHandler sourceControl, String eventArgument) at System.Web.UI.Page.RaisePostBackEvent(NameValueCollection postData) at System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint)

Solution

This one turned out to be a straightforward solution – in my haste I had forgotten to generate a machinekey element for the project.

All you need to stop the error is visit one of the many online machinekey generators:

And then paste the generated markup key into your web.config under <system.web>.

Note the links above are good for generating keys up to the latest version of asp.net 4. It may be that it doesn’t change but if you’re reading this from the distant future then its worth a quick Google to check there hasn’t been any changes:

https://www.google.co.uk/search?q=machinekey+generator

When you have added the key to your web.config just restart the WSAT and you will be able to create users!

A straightforward method to detecting RSS and Atom feeds in websites with HtmlAgilityPack

2012-07-19T22:55:00.000+01:00

Let's create a tool that will be able to query any website and detect if they provide feeds in one of the common syndication formats. By using HtmlAgilityPack we can apply screen scraping techniques and examine the meta tags to see what alternative formats are available.

A little background

If you haven't heard about HtmlAgilityPack yet then you have landed on the wrong post. Head over to the main article index and check out the introduction post.

HtmlAgilityPack Article Series

Syndication feeds? RSS? Atom?

Well if you don't know what these are then you probably don't have much interest in reading an article about detecting them but for completeness I will provide a brief introduction.

Its possible to make a copy of a websites news posts available in a special computer readable format. There are two main standards around; RSS and Atom. Collectively this is referred to as syndication.

These data feeds are normally used in two main ways:

Collected together in special software called feed readers
Republished on other websites as content

Users can add feeds into feed readers to consume the feeds. By keeping feeds inside a feed reader users can read the latest news from their favourite websites without having to check every site for updates.

For content creators it means that their content can easily be integrated into other websites. The other websites like the fresh content and the content creators like being able to generate traffic back to their websites by linking to themselves within the articles.

For a much deeper discussion of this topic check out this Wikipedia article:

http://en.wikipedia.org/wiki/Web_syndication

Feed discovery

There is a standard to detect if a website provides an alternate format RSS or Atom feed. This process is called autodiscovery and has been standardised by the RSS Advisory Board and adopted by the Atom feed format.

The mechanism is simply a <link> tag placed in the <head> of a webpage. The basic rules are:

Set rel to "alternate"
Each href must be a different feed
The type must contain the feed's mime type

You can have as many feeds as you want in a page and you can mix and match feed formats.

This web site uses the following tags to allow feed autodiscovery.

<link rel="alternate" type="application/atom+xml" title="Run Tings Proper - Atom" href="http://runtingsproper.blogspot.com/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml" title="Run Tings Proper - RSS" href="http://runtingsproper.blogspot.com/feeds/posts/default?alt=rss" />

You can read more about RSS autodiscovery here:

http://www.rssboard.org/rss-autodiscovery

Writing the application

We are going to build this application together from scratch. I am actually writing the sample as I write the article so the steps I describe are the steps I’m taking - there won't be any Blue Peter "here's one I made earlier" style magic!

The first step is to load up Microsoft Visual Studio. I am using Visual Studio 2011 Beta but I'm not planning on using any special tricks so it should be virtually identical even if you are on an older or express version.

The first step is to create a new website project.

Load up Visual Studio
Click File | New | New Website
Choose an asp.net website template and the C# language. In my Visual Studio I picked .NET Framework 4, Visual C#, ASP.NET Empty Web Site.
Give your project a name. I called mine "HtmlAgilityPackExample-DetectSyndicationFeeds" but you can call it whatever you like.
Click OK to create your new website.

A simple start to the tutorial! As this tutorial relies on the HtmlAgilityPack we are going to need to download it.

Download the HtmlAgilityPack – NuGet

This article was originally written back in 2009 before we had the joys of NuGet in our lives but it never got finished. Well we should all have NuGet installed now so I’ll run through this section really quickly.

If you don’t have NuGet then either get it or follow the guide in the next section to manually install it.

Click the Website menu (or right click on the top project node in your Solution Explorer window)
Choose Manage NuGet packages…
Click the Online tab in the left hand side then All
Search for HtmlAgilityPack in the top right hand corner
Click the Install button on the HtmlAgilityPack entry in the results list that's in the centre of the window.

Download the HtmlAgilityPack – Manual

Note: You can skip this section if you just followed the NuGet installation instructions.

For our purposes we only need the binary release of the HtmlAgilityPack. Go to the site below and download the latest binary release.

http://htmlagilitypack.codeplex.com/releases/

At the time of writing the latest version is 1.4.0.

I recommend extracting this to a common location. Personally I keep all my 3rd party library downloads in F:\libraries\ and when I need one I can easily browse to it from any project.

If you follow this method then one advantage is that the assembly will have a .refresh file automatically generated for it. This allows Visual Studio to check that it has the latest version on your hard drive before compiling the main project.

In any case you should now do the following:

Extract the archive and make a note of the path.
Return to Visual Studio and right click on the Website menu then choose Add Reference.
- If there isn't a menu called Website just move your mouse over to the Solution Explorer tool window and click on any file inside your website. The Project menu will be replaced with a Website menu.
Click the Browse tab and navigate to the location you extracted the code to.
Select HtmlAgilityPack.dll and click OK

Lay out the user interface

The next stage of the article is to lay out the user interface. The interface will have a TextBox to take the website address, a Button to fire it off, a GridView to display the results.

Click Website | Add New Item (or press Ctrl-Shift-A)
Select Web Form and click Add (leaving the name as Default.aspx, Place code in separate file ticked and Select master page unticked)
Either copy and paste the code below or drop a TextBox, Button and GridView onto the page until your page looks like this:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Html Agility Pack Example - Extract All Syndication Feeds From A Web Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h1>
            Html Agility Pack Example - Extract All Syndication Feeds From A Web Page</h1>
        <p>
            This example shows you how to use Html Agility Pack to load a remote url and parse
            out the urls of all the syndication feeds it contains.</p>
        <div>
            <asp:Label ID="Label1" runat="server" Text="URL:" />
            <asp:TextBox ID="Url" runat="server" Text="http://www.cnn.com/"></asp:TextBox>
            <asp:Button ID="RetrieveButton" runat="server" Text="Get Feeds"/>
        </div>
        <asp:GridView ID="ResultsGrid" runat="server">
        </asp:GridView>
    </div>
    </form>
</body>
</html>

Making a DataObject

We are going to package up the code that does all the heavy lifting inside a class of its own. This will allow us to reuse the code on multiple pages without duplicating the code.

As an added bonus we can tag this class up with DataObject attributes and then codelessly bind it to a databound control via an ObjectDataSource.

Right click on the App_Code folder
- If the App_Code folder isn't in your project just right click on the project node and choose Add ASP.NET folder | App_Code
Choose Add New Item
Select Class and call the class SyndicationFeedsDataObject.cs

Add a using statement to the top:

using System.ComponentModel;
using HtmlAgilityPack;

Tag the class with a [DataObject(true)] attribute

/// <summary>
/// Summary description for SyndicationFeedsDataObject
/// </summary>
[DataObject(true)]
public class SyndicationFeedsDataObject
{
}

Add a Select() method to the class that has the following signature:

public IEnumerable<SyndicationFeedsDataObject> Select(string WebsiteUrl)

The last part is to tag the Select() method with the correct attribute:

[DataObjectMethod(DataObjectMethodType.Select, true)]
public IEnumerable<SyndicationFeedsDataObject> Select(string WebsiteUrl)

At this point your complete class should look like this:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel;
using HtmlAgilityPack;

/// <summary>
/// Summary description for SyndicationFeedsDataObject
/// </summary>
[DataObject(true)]
public class SyndicationFeedsDataObject
{
    public SyndicationFeedsDataObject()
    {
    }

    [DataObjectMethod(DataObjectMethodType.Select, true)]
    public IEnumerable<SyndicationFeedsDataObject> Select(string WebsiteUrl)
    {
        throw new NotImplementedException();
    }
}

Adding bindable public properties

We need to add some public properties to our DataObject so that we have something to bind against in our GridView. I think that we need to capture the following information about the feed:

Feed Url
Title
Mime Type

To add a property you should go to the top of the class definition and type:

prop [tab] [tab]

This is a shortcut in Visual Studio which lays out what is known as an Automatic Property. It looks like this by default:

public int MyProperty { get; set; }

Your cursor is positioned at the data type so that you can then enter it (like string). Then pressing tab again will let you input the property name. Finally press enter to complete the property insert.

Now you know how to do this you need to add properties until your class looks like this:

[DataObject(true)]
public class SyndicationFeedsDataObject
{
    public string FeedUrl { get; set; }
    public string Title { get; set; }
    public string MimeType { get; set; }

    // ...
}

Preparing the Select() statement

The Select() method we stubbed out earlier is going to be the main workhorse of this application. It will take in a website url, parse it for correctness, retrieve the html page located at that url, extract the feed urls and return that data.

If an exception occurs that's going to prevent a valid collection of feeds being returned then I intend to return null. The data bound control will handle this seamlessly and execute its empty dataset code.

When I want to start out a new method I usually like to put in a series of comments which describe what the method is going to do. This gives focus to the work that I am doing. This approach is discussed in detail in Steven McConnell's book Code Complete (if you buy it make sure you get the second edition).

Following that technique lets us lay out the plans we just made so we can get started on the coding:

    [DataObjectMethod(DataObjectMethodType.Select, true)]
    public IEnumerable<SyndicationFeedsDataObject> Select(string WebsiteUrl)
    {
        // parse the url
        // retrieve the website html
        // extract all tags
        // convert extracted tags to SyndicationFeedsDataObjects
        // return the data
    }

Url Validation

So the first part should be pretty simple. If you pass an invalid url to Html Agility Pack it throws a UriFormatException. We don't want to force a user to remember the http:// at the start so if they forget it then we will add it in to this method. We can then check if the url is formatted correctly by trying to instantiate a new Uri() from it:

    private static string ParseUrl(string WebsiteUrl)
    {
        if (string.IsNullOrEmpty(WebsiteUrl))
        {
            return string.Empty;
        }

        if (!Regex.IsMatch(WebsiteUrl, "^http://", RegexOptions.IgnoreCase))
        {
            WebsiteUrl = "http://" + WebsiteUrl;
        }

        try
        {
            Uri TestUrl = new Uri(WebsiteUrl);
        }
        catch (UriFormatException)
        {
            WebsiteUrl = string.Empty;
        }

        return WebsiteUrl;
    }

This could have been done in the UI using a RegularExpressionValidator control or even a CustomValidator control but I felt that if we are going to make it idiot proof then it should be a seamless implementation rather than forcing the user to read an error message and then type the http:// themselves.

Using HtmlDocument and HtmlWeb

When we know we have a valid url we can rely on we can then make our first use of the HtmlAgilityPack so far in this tutorial.

The HtmlDocument class is the main class used by HtmlAgilityPack. This is the workhorse which contains all of the nodes and attributes with a document. There are two ways to load html into this class.

The first one (which was demonstrated in my easily extracting links from a snippet of html article) is to use the HtmlDocument methods. LoadHtml() will load html in from a string. Load() will load html from a path, Stream, or TextReader.

The new trick that we are going to use today is to load in remote html in with a simple command. The HtmlWeb class included with HtmlAgilityPack will take a valid url, retrieve the contents and return it as a HtmlDocument.

The code looks like this:

HtmlWeb hw = new HtmlWeb();
HtmlDocument doc = hw.Load(WebsiteUrl);

Simple!

Link tag extraction

This part of the code is where we really see the power of HtmlAgilityPack. All of the tags in the html document we just retrieved are placed inside the Document.ChildNodes property. To select them based on your requirements you can pass an XPath statement to the SelectNodes method.

XPath is an official w3c standard designed to give you a structured query language for extracting nodes in an xml document. In this case it is being applied to the (probably) invalid html mark-up by the HtmlAgilityPack library.

Take a look at the following XPath statement:

//link[(@type='application/rss+xml' or @type='application/atom+xml') and @rel='alternate']

What it is looking for is:

all <link> tags
where the type attribute is equal to either an rss or atom feed
and the rel attribute is equal to alternate

The rel="alternate" is important because without it you can get false positives. For example, the atom format lets you define the endpoint that you can connect to if you wanted to post an item to a blog as a <link> tag.

<link rel="service.post" type="application/atom+xml" title="Example" href="http://www.example.com/endpoint" />

The type attribute is the same as above but the rel tag is "service.post".

So to wrap this up in a convenient method we would pass in the XPath statement above to the SelectNodes() method which would return a HtmlNodeCollection containing only the tags we wanted. It would look like this:

private static HtmlNodeCollection SelectFeeds(HtmlDocument doc)
{
    return doc.DocumentNode.SelectNodes("//link[(@type='application/rss+xml' or @type='application/atom+xml') and @rel='alternate']");
}

Preparing for Data Binding

The last stage we need to do is to convert all of the data extracted so far into a format that can be data bound. The reason that we need to convert them is that the HtmlNode's inside the HtmlNodeCollection contain weakly typed attributes that look like this:

link.Attributes["href"].Value

So the conversion is required in order to be able to pass these in to our databound controls and access them using clean notation such as:

Eval("Href");

This means using a helper method to convert the HtmlNode's into SyndicatedFeedsDataObject's.

Apart from being a requirement in this case it's also a good programming practice. This is known as a code seam. By converting to our own class before we return the data we are actually fully encapsulating our use of HtmlAgilityPack. The dataobject takes a string for input (the website url) and returns a collection of itself (the feeds it found at the website url). As far as the outside world is concerned HtmlAgilityPack doesn't exist.

This means that if you write an application that depends on the SyndicatedFeedsDataObject and then you find some whizzo new html parsing library you can swap it out without changing any of the calling code. For our sample application this doesn't mean much but in your full blown application you will certainly appreciate not having to change line after line of code to remove your dependency on the HtmlNode class.

A simple method which uses a linq query to translate the data would look like this:

private static IEnumerable<SyndicationFeedsDataObject> ConvertNodesToSyndicationFeeds(HtmlNodeCollection feeds)
{
    var query = from link in feeds
                select new SyndicationFeedsDataObject
                {
                    FeedUrl = link.Attributes["href"].Value,
                    Title = link.Attributes["title"].Value,
                    MimeType = link.Attributes["type"].Value
                };
    return query;
}

It is written in LINQ query syntax and projects the data into the new class using object initializers. At this point I'm just pleased to be using some of the technical jargon that I've been brushing up on recently. If you don't understand the snippet above then it is far beyond the scope of this tutorial to start explaining it but I will say that I have been very happy with my recent purchase of C# 4.0 in a nutshell (no affiliate codes embedded in there - I'm just a happy customer).

Disregarding the technical jargon in the last paragraph you should be able to see that it simply assigns the values of one class to the values of another class and returns a collection of the converted classes.

Putting our Select() together

A few sections back we made a list of comments that outlined the plan for the Select(). We then spent the next few sections writing the key functionality that would be needed to turn these comments into working code.

This means that we can now flesh out each of these comments into blocks of code.

// parse the url
WebsiteUrl = ParseUrl(WebsiteUrl);

if (!IsValidUrl(WebsiteUrl))
{
    return null;
}

The IsValidUrl() is just a simple check to make sure the string isn't empty:

private static bool IsValidUrl(string WebsiteUrl)
{
    return !string.IsNullOrWhiteSpace(WebsiteUrl);
}

I could have put this check inline but after reading Uncle Bob’s book Clean Code I developed a habit of showing the intention of my code by refactoring it into many small functions.

Then we use two of the functions we wrote, RetrieveHtml and SelectFeeds to pull the data in, plus a quick sanity check on the data:

// retrieve the website html
HtmlDocument doc = RetrieveHtml(WebsiteUrl);

// extract all tags
HtmlNodeCollection feeds = SelectFeeds(doc);

if (!IsValidFeedCollection(feeds))
{
    return null;
}

IsValidFeedCollection() is another one of my seemingly pointless methods which simply checks if the input is null or not. Again I could have put this inline but it allows me to express what my intention was for the if statement. It prevents me from having to drop down to a lower level of abstraction. In fact in “real” code I would probably have used var rather than HtmlDocument and HtmlNodeCollection as it would make it ready a lot more smoothly and datatypes are not important at this stage. I only included the types verbosely for the sake of introducing them in this tutorial.

Here is that IsValidFeedCollection function for the curious:

private static bool IsValidFeedCollection(HtmlNodeCollection feeds)
{
    return feeds != null;
}

Then I throw the collected feeds data through the conversion routine and return it:

// convert extracted tags to SyndicationFeedsDataObjects
var query = ConvertNodesToSyndicationFeeds(feeds);

// return the data
return query;

We are working with IEnumerable<> collection types so this is easily understood by the data bound controls that are going to use the DataObject we just made.

How to bind our results to the GridView

Because of the DataObject attributes we applied to our code earlier on binding this to a GridView is a codeless procedure. We don’t get away with it quite that easily though because there is still an ObjectDataSource that needs to be configured. You shouldn’t see anything new here, its a simple ObjectDataSource, with a control parameter set up so that it pulls the url in the textbox into the Select() statement. There isn’t even any code in the button click event – its only there to trigger a postback and then the ObjectDataSource does the rest.

<asp:GridView ID="ResultsGrid" runat="server" DataSourceID="ObjectDataSource1">
</asp:GridView>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" 
    OldValuesParameterFormatString="original_{0}" SelectMethod="Select" 
    TypeName="SyndicationFeedsDataObject">
    <SelectParameters>
        <asp:ControlParameter ControlID="Url" Name="WebsiteUrl" PropertyName="Text" 
            Type="String" />
    </SelectParameters>
</asp:ObjectDataSource>

If anything went wrong in the code we simply returned null. The GridView’s default behaviour in this case is to simply hide itself.

So congratulations, if you have diligently copied each of these snippets into their correct locations you will now have a working app! Press F5 to start up and lets see. If you don’t get any compile time errors then you will see something like the screenshots below. If you do get errors then don’t worry, try to fix them or just jump to the download instructions to get the working files.

The final code

Despite the epic length of this article you might be surprised to find that the final application weighs in at only 102 lines of code and a simple aspx file to drive it. The work we put in early on meant that the rest of the asp.net ecosystem knew how to play well together. This coupled with the easy retrieval and manipulation of html that HtmlAgililtyPack provides has been a recipe for success.

Another big benefit to packaging up the code in a DataObject class is that in a few months time when you want to reuse this in another project you can rip out out easily without having to untangle dependencies or spend time trying to figure out how it all fits together. It uses standard development patterns and is decoupled. This is the kind of code you could take home to meet your mother!

What can I do with this data once I have found it?

Now that you’ve learned this new technique you have to be asking yourself what can you do with it? An obvious next step is to pull the feeds in and display them. I’m not going to start a second tutorial here but I will introduce you to a man who has already swum in these waters:

Scott Mitchell teaches you how to consume a syndication feed

Its the tutorial I read when I first needed to display feed headlines in a site.

Download the sample application

I gave the listings and the explanations for everything you need to build the sample app but if you didn’t follow along at the time then you can download or fork this at GitHub:

Conclusion

We have covered a very large spectrum of asp.net development in this article. You should have learned a lot because we have covered:

Learned about syndication feeds
Learned about feed autodiscovery
Using HtmlAgilityPack to check a remote website for feeds
Public properties
Shortcut to creating Automatic Properties
Creating a bindable Data Object

I also hope you picked up a few good book recommendations and some programming techniques that will keep your code clean and professional.

SOLVED: JavaScript error .reset is not a function

2011-06-27T22:55:00.001+01:00

Read this article if you are trying to call reset() on a <form> DOM element but you're getting an error stating .reset is not a function.

PROBLEM

I was working on some jquery UI code and I wanted to reset the form when the dialog was closed. I found a simple snippet explaining how to do this:

$(this).find("form")[0].reset();

If you aren’t familiar with this notation the [0] gets the underlying DOM object rather than the jQuery object – reset() is a built in JavaScript feature.

Other developers seemed happy with this function, reporting that it solved their problem but in my testing all I was seeing was Firefox's error console filling up with “.reset is not a function” errors.

After wrestling with this problem for a few minutes I tracked this down to a simple solution.

SOLUTION

If you are seeing this error in your code then it’s more than likely due to the fact that you have an element in your form with an id of “reset”. If you do then the .reset() is masked by this element.

For me the offending code was this:

<input name="reset" type="reset" id="reset" value="Reset" />

A simple change of the ID fixed my problem and I was on my way:

<input name="resetform" type="reset" id="resetform" value="Reset" />

And then I successfully used the following close handler in my jquery ui dialog:

var dialogSettings = {
  close: function(event, ui) {
    $(this).find('form').get(0).reset();
  }                       
};

You might not be in the same situation as me though. If you want to simple grab the form then just do a normal jQuery search for the id of the form. So to reset the following form:

<form id="more_information">

You would use the either of the following code snippets, depending on personal taste:

$("#more_information").get(0).reset();
$("#more_information")[0].reset();

SOLVED: Visual Studio inserts a text snippet instead of an EntityDataSource

2011-06-08T11:23:00.001+01:00

I had finally gotten around to following the tutorials for an introduction to Entity Framework 4 and when got to the stage that required me to insert an EntityDataSource I hit a stumbling block: The EntityDataSource was being inserted as a long text snippet instead. Read on for a simple fix to this issue.

Problem

When looking at EntityDataSource (and some Dynamic Data controls as well) they have the following text snippet icon:

When you double click on the icon to insert it into your document you are presented with some internal <soap-env> tags and a whole lot of other meta data:

Searching for the problem didn't give me any immediate solutions. I did find this Microsoft Connect issue which had a suggested fix but it had ultimately been closed as non-reproducible:

https://connect.microsoft.com/VisualStudio/feedback/details/622189/entitydatasource-control-is-missing-from-my-visual-studio-2010-ultimate-toolbox

After putting off looking into this seriously for about a month I finally gave up and reached out to the StackOverflow.com community.

Its well known phenomenon that when you ask a question out loud you can sometimes answer it yourself. In this case I solved the problem about 5 minutes after posting on SO.

Solution

The solution is very straightforward. I had initially tried to re-install Visual Studio 2010 SP1 thinking it might overwrite the error. No luck. I had followed the suggested solution in the Microsoft Connect issue in the link above with no success. I had also installed the latest out of band release of Entity Framework, the 4.1 standalone installer which brought the new code-first development model but nothing worked.

I was reluctant to re-install Visual Studio 2010 as it would take about an hour and a half of my time but it was starting to look like my only move.

Then I hit upon a simple solution - just reset the toolbox! To do this you simply have to:

Right click on the toolbox window
Choose Reset Toolbox
Wait about 25 seconds while Visual Studio resets the toolbox

And you can now continue with your favourite Entity Framework tutorial!

SOLVED: Firebug Inspect Element Keyboard Shortcut Clash

2011-06-03T22:05:00.001+01:00

If you want to use the Ctrl-Shift-C shortcut to Inspect Element in Firebug but you also have the Web Developer plugin installed then read on to to find out how to stop them clashing!

Background

Its been a long running thought in the back of my mind that I must be wasting time having to press F12, then click the inspect button to use the invaluable Inspect Element feature of the Firebug toolbar. I remember having a casual look in the past for a keyboard shortcut and finding none.

I have always assumed that there wasn't one for it and thought it strange that it had never occurred to the developers to implement this feature.

I don't know how I missed this for so long but today as the auto-updater installed the latest version I had a poke around in the release notes and still not seeing a shortcut I made a mental note to pursue this later.

And lo and behold I found the elusive inspect element keyboard shortcut, pressed those holy keys that were destined to save my so much time and immediately hit by a keyboard shortcut clash between the Firebug and Web Developer plugins.

I turned to Google first and found nothing reporting this. I assume that is how you have arrived here today and you are expecting the solution which is forthcoming!

Problem

The problem is that when you have Firebug by Mozilla Corporation and Web Developer by Chris Pederick installed they both hog the Ctrl-Shift-C keyboard shortcut. Web Developer wins which breaks functionality in the Firebug plugin.

Solution

Now Web Developer toolbar has some amazing features and I rely on both of these plugins daily to do my job but the View CSS one is not an important feature for me. I voted to remove the keyboard shortcut all together giving free reign to the Firebug plugin to handle the Ctrl-Shift-C combination.

Click the Options button in the Web Developer toolbar.
Click Options…
Click the Keys entry from the list down the left hand side
Delete the letter C from the View CSS box leaving it blank
Restart Firefox
Press Ctrl-Shift-C and bask in the glory of your Firebug Inspect Element feature being initiated.

You also have the option of assigning it a different keyboard shortcut in step 4. As I never use this feature I didn't think it was worth potentially creating another shortcut clash so I just disabled it. If you do ever want to use this feature you just click the CSS toolbar item and then choose View CSS…

Summary

This may be obvious to a lot of readers and but then if you read this far then perhaps not. Either way this is a simple fix to the problem and I am very much looking forward to Ctrl-Shift-C becoming a staple of my daily diet.

Did I help? Gauge if your articles are solving real world problems with Google Analytics and jQuery

2011-04-09T11:36:00.001+01:00

Its is easy to keep churning out articles and watch your hit count steadily increase but how do you know if you've really helped a developer solve a real world problem? In this article we explore how to create a client-side solution using Google Analytics and jQuery to track if the visitors problem has been solved.

Introduction

So you have published some articles on your blog, added Google Analytics, even implemented depth tracking to see if your readers are scrolling all the way down through your article but how do you know if your advice has solved the readers problem?

In this article we are going to implement a simple widget style application which will ask the users a simple yes / no question: "Did this article solve your problem?".

Its UI will look like the screenshot below, but you can easily amend the code for this to suit your particular blog theme:

I say "widget style" because we aren't going to program against any particular widget API - in fact this feature could be implemented with the same technique on any blogging or CMS platform which runs on any language. All of the code lives on the client-side: HTML, CSS, and JavaScript.

Clicking either yes or no will simply show a thank you message and invite further feedback via the existing comments form on the blog.

While the comments form already allows this kind of feedback to be collected it normally involves registration / logging in and is more effort to type out than simply clicking this form. If your article hasn't solved the persons problem then you might find they are even less inclined to go through this process.

Also from your point of view you cannot integrate your comments form into your Google Analytics reports.

So to summarise, providing a simple Yes / No form gives an easy way to collect a valuable indicator of whether your article is actually helping anyone without:

Requiring the user to login / register
Appearing to be aggressive or negative
Being a target of spammers attention

The UI itself is very simple, comprising only of html and css markup. This is so that you can implement this on your own hosted blog solution without needing extra hosting space to store image files.

Implementation Overview

The other articles in this series have built upon a simple framework which I have continued with here. The first method, SetupGoogleAnalyticsTrackEvents, is simply a placeholder method which separates your Analytics code from the rest of your JavaScript code.

If you want to integrate this into a real world website, using other Google Analytics enhancements such as scroll depth tracking, pdf downloads, image enlargement tracking and other non-analytics JavaScript code then you will soon see that partitioning your methods in this way keeps things clean.

The HTML mark-up simply sets up two links with some CSS styling and an extra div to say thank you. We then use jQuery to attach a click handler to each of the yes/no links and pass that response on to Google Analytics using the _trackEvent feature. The users response (problem solved / not solved) and the current url are both recorded so you can monitor which of your articles are really helping people and which are falling short.

Markup and Styling

As I have already mentioned the UI consists of a container div, a yes link, a no link and a panel which is displayed afterwards to thank the user for their feedback. I have written it like this:

<div id="WasProblemSolvedPanel" style="display: none;">
  <h2>Was your problem solved by this article?</h2>
  <div id="WasProblemSolvedLinkPanel">
     <a id="ProblemSolved" href="#" class="ButtonPane Yes">Yes</a>
     <a id="ProblemNotSolved" href="#" class="ButtonPane No">No</a>
     <div style="clear: both;"></div>
  </div>
  <div style="display: none;" id="WasProblemSolvedThanksPanel">
     <p>Thank you for clicking!</p>
     <p>If you have additional feedback please use the <a href="#comments">comment form</a>.</p>
  </div>
</div>

The main container div has an inline "display: none" style on it. This is because the entire feature depends on JavaScript for it to work. To make sure this isn't displayed on browsers that don't have JavaScript enabled it's hidden by default. When the jQuery code is run to set this feature up it will unhide this panel. If the user has JavaScript disabled it will stay hidden.

The thanks panel is also hidden at the start, showing only the Yes / No buttons to the user. You should customise the message in the WasProblemSolvedThanksPanel panel to your own liking. The link to #comments is specific to Blogger so if you're implementing this on a different blog you might have to change this link.

The styling is straightforward:

<style type='text/css'>
    #WasProblemSolvedLinkPanel .ButtonPane
    {
        float: left;
        display: block;
        width: 49%;
        text-align: center;
        line-height: 3em;
    }
        
    #WasProblemSolvedLinkPanel #ProblemSolved
    {
        font-size: 2em;
        margin-right: 3px;
    }
        
    #WasProblemSolvedPanel .Yes
    {
        background-color: #ccff99;
        border: 1px solid #336600;            
    }
        
    #WasProblemSolvedPanel .No
    {
        background-color: #ffcccc;
        border: 1px solid #ff0000;
    }
        
    #WasProblemSolvedLinkPanel #ProblemNotSolved
    {
        font-size: 2em;            
    }
        
    #WasProblemSolvedThanksPanel
    {
        height: 4em;
        text-align: center;
    }
</style>

Again, as I stated at the start of this article the CSS has been kept simple and doesn't rely on any external graphics files for its UI. This means that it can be easily implemented on any hosted blogging platform without needing additional hosting. You can easily change the mark-up and styling in this section if you want to add some additional flair for your own implementation of this feature.

jQuery code

<script type='text/javascript'>
/* <![CDATA[ */
    $(document).ready(function () {
        SetupGoogleAnalyticsTrackEvents();
    });

    function SetupGoogleAnalyticsTrackEvents()
    {
        TrackEventsForWasProblemSolved();
    }

    function TrackEventsForWasProblemSolved()
    {
        $("#WasProblemSolvedPanel").show();

        $("#ProblemSolved").click(function(e){
            e.preventDefault();
            WasProblemSolvedClick("Yes");
        });

        $("#ProblemNotSolved").click(function(e){
            e.preventDefault();
            WasProblemSolvedClick("No");
        });
    }

    function WasProblemSolvedClick(answer)
    {
        TrackEvent("Was Problem Solved?", answer, document.location.href);
        $("#WasProblemSolvedLinkPanel").hide("fast");
        $("#WasProblemSolvedThanksPanel").addClass(answer);
        $("#WasProblemSolvedThanksPanel").show("fast");
    }

    function TrackEvent(Category, Action, Label)
    {
        _gaq.push(["_trackEvent", Category, Action, Label]);
    }     
/* ]]> */
</script>

This code follows a simple framework so that if you want to implement all of the analytics tutorials on this blog then they will all naturally fit together inside the SetupGoogleAnalyticsTrackEvents() function.

For example, my real method currently looks like this (don't copy and paste this if you are just following this tutorial, its just to show how they all fit together):

function SetupGoogleAnalyticsTrackEvents()
{
    TrackEventsForCodeSampleDownloads();
    TrackEventsForImageClicks();
    TrackEventsForMinimumPageScroll();
    TrackEventsForWasProblemSolved();
}

The first thing this code does is to find the WasProblemSolvedPanel and .show() it. This is how the feature is hidden to non-JavaScript visitors.

After that we hang click() events off of each of the Yes / No links:

$("#ProblemSolved").click(function(e){
    e.preventDefault();
    WasProblemSolvedClick("Yes");
});

You will notice that rather than passing an empty function I have added the e parameter. Then in the first line I call e.preventDefault(); This is a way to stop the browser from actually trying to visit the href in the <a> tag. In this case the <a> tag simply points to a #. We don't want the browser to try to visit that because the visitor would be jumped up to the top of the page and would miss the "thank you" feedback panel.

Both the Yes and No links basically perform the same task, they just pass a different value back to Google Analytics. When I had initially completed this code I went back and applied the DRY principle - Don't Repeat Yourself - and combined the duplicated code into a function called WasProblemSolvedClick(answer).

function WasProblemSolvedClick(answer)
{
    TrackEvent("Was Problem Solved?", answer, document.location.href);
    $("#WasProblemSolvedLinkPanel").hide("fast");
    $("#WasProblemSolvedThanksPanel").addClass(answer);
    $("#WasProblemSolvedThanksPanel").show("fast");
}

This method passes the feedback to Google Analytics and then swaps out the UI to hide the button and show the thank you message.

Google Analytics Seam

One thing you should try to do when implementing third party libraries into your own code is to keep them isolated as much as possible. A particularly effective technique for this is to create a seam; a wrapper around any code that calls the library. Then when you need to use that 3rd party library throughout your code you call your own methods which you have control over.

The Google Analytics tutorials on this site are all relatively simple and comprise only about 100 lines of code combined but real world apps are much larger than this. However, having said that, we have already seen the benefit of this technique pay dividends. The Google Analytics team have released new versions of their API several times now and have completely changed the way their API works more than once.

This has happened since I started writing the articles on this site and when it was time to update my blog to support this new API I had to change 1 single line of code rather than picking through every line and updating it.

There are other benefits to putting the extra effort in to isolate your 3rd party code with seams. If you use Test Driven Development techniques then you will already see that it would be easier to write tests against code like this. It also reduces your dependency on one specific vendor. Should the 3rd party vendor raise prices too high, go out of business or discontinue the product you are protected against your dependency on their code.

Our Google Analytics seam now uses the new _gaq object instead of the pageTracker object in the previous version and looks like this:

function TrackEvent(Category, Action, Label)
{
    _gaq.push(["_trackEvent", Category, Action, Label]);
}

Old Google Analytics Code

The new Google Analytics code sits just before the </head> tag and uses the _gaq object.

The previous Google Analytics code sits just before the </body> tag and uses the pageTracker object.

If your Google Analytics is still using the older version and you don't have control over upgrading you can use the following TrackEvent function instead:

function TrackEvent(Category, Action, Label)
{
   pageTracker._trackEvent(Category, Action, Label);
}

Blogger Widget

As I have mentioned throughout this article I am currently using Blogger as my platform. Setting this up in the blogger template was a bit more tricky than I expected so I'm going to cover it briefly in this section.

This doesn't mean however that you have to use Blogger for this code to work. You can put this into any platform you like, the only challenge that faces you is adding into the relevant platforms article template. Despite this primarily being an asp.net blog you could even integrate this into a php powered blog.

I implemented this into Blogger by going to the admin panel of my blog, clicking the Design tab, then Edit HTML. I added all of the JavaScript and CSS styles into the <head> tag and pressed save.

I then clicked on the Page Elements and selected "Add a Gadget" in the main Blog Posts column of the design. I chose the type HTML/JavaScript and pasted the html mark up into the content field of this section. Leave the Title field empty and press save.

The tricky part is that now your "Was Problem Solved" panel is displayed on EVERY page of the blog - the main index page, search results, tag indexes, the works. Blogger supports a special language called GML which you can use to modify the template. You can use some GML mark-up to insert a conditional that only shows the widget on article pages.

Click the Design tab. Click Edit HTML menu option. Tick "Expand Widget Templates" checkbox. This will reveal all of the various GML tags that are mostly hidden from you during normal use. I cannot tell you exactly where to add this code because it will depend on your template.

Basically each of your HTML/JavaScript widgets are automatically given a numbered ID such as HTML1, HTML2, HTML3 etc. You will have to scroll down the code until you spot the main blog post template code (it will have things like posted by, timestamp, comments, backlinks etc). Right after that you should find the template for your HTML/JavaScript widget. In my case my widget was the fourth one that I had added to the template so it was called HTML4. It looked like this:

<b:widget id='HTML4' locked='false' title='' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
</b:widget>

The trick is to check if the current page the widget is being displayed is of type "item" (a blog post). To do that you need to wrap a <b:if> </b:if> block around the title and contents of your widget. The code should look like this:

<b:widget id='HTML4' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Click Save Template and you're all done. As a final check I would visit the blog in Firefox and then check the page to see if any JavaScript errors are being thrown at all.

Your visitors can start using the feature right away but don't forget that Google Analytics is not a real-time reporting system. It will be up 24 hours before you start seeing events appear in your Google Analytics account.

Seeing Your Feedback Levels

I know that the Google Analytics team are currently working on a brand new user interface so the exact step by step process below might not work by the time you read this. If should be pretty intuitive to find the Event Tracking section but if not you can always consult Google Analytics help.

Log in to Google Analytics and click into your report so you see the dashboard
Click the Content menu option down the left hand side
Click Event Tracking

All of your custom events will be shown in here.

Conclusion

In this article we have looked at a lightweight solution to asking your readers if a particular article has helped them solve their problem. It is a low-friction interface that does not require the user to type anything out or log-in to use it. The user is invited to use the comments form if they want to provide additional feedback.

The entire feature is implemented client-side in HTML, JavaScript and CSS which means that it is platform agnostic. You could easily implement this in any blogging platform, help desk software, product description pages, faq's, in fact any page that you would like your visitors to easily indicate a yes / no response.

This may have been the first time you have seen the technique of passing a parameter to the click handler in jQuery and using it to prevent the href being visited after the handler code has run.

We have also looked at the technique of using seams in your code to protect you from changes to third party libraries and shown how easy it is to change the seam to support both new and older Google Analytics tracking codes.

This article has added another technique to your arsenal of ways to use the event tracking mechanism of the Google Analytics API. If this is your first Google Analytics article on this site then check out the Further Reading section below to see more Google Analytics API tutorials.

Tracking scroll depth to reveal content engagement in Google Analytics async snippet

2011-04-06T06:00:00.000+01:00

This article investigates a way to track content engagement on your site. By monitoring how far down the page a visitor to your site travels and then recording the data in Google Analytics you can discover how many of your visitors are reading your content all the way to the end.

Updated article - async snippet version

This article was re-written for what is currently the latest tracking code style, known as the async snippet. If your code looks like the snippet below then this article is for you. If you're still using the old pageTracker code and you're not in a position to upgrade at the moment then you can read the old version of this article here.

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

Don't forget that this snippet now goes right before the </head> tag instead of the </body> tag that it used to go in.

I'm going to leave the rest of this article as is, except for tweaking the facts. Its good to see that this article actually only needed one line changing in its code to support the new format. You will read about how I refactored the jQuery code to keep the Google Analytics separate in a related article: "How to automatically track events with Google Analytics async snippet and jQuery".

Introduction

When browsing through your Google Analytics reports you will find a massive selection of data at your fingertips. You can find how many people visited a page, how long they were there, what country they were from, if it was their first visit, if they bought something from your site and so much more. If you're reading an article like this then I doubt that I need to sell you on what a great piece of kit it is.

Part of what makes Google Analytics a great package is that it provides a JavaScript API which lets you mould the functionality to your requirements.

It occurred to me that I would be interested to know if visitors to my site were reading all of my articles or if they were just bouncing in & out registering page views for content that didn't fit their needs.

I decided that a good metric to decide if the visitor has read my content is that they scroll past 90% of the total height of the page. When this scroll depth is detected I will use _trackEvent to record the information in Google Analytics.

What is Event Tracking?

Event tracking is an alternative way of tracking user activity on your site. The normal way is by registering page views. Not every activity on your website results in a fresh page view though.

What if the user downloads a PDF, watches a video or scrolls to 90%? This is where the event tracking comes in. It allows you to register an event, put it in a category and even associate a monetary value with it.

Another approach that you might see to tracking these kinds of events is to use virtual page views. This is where you track a page view but provide Google with a non-existent url so that you can identify the event.

While this technique will let you track your on page activities it also clutters up your visitor statistics and is no longer a recommended approach. If you find an article suggesting this kind of technique then check how old it is and consider using event tracking instead.

_trackEvent

The way to track an event within Google Analytics is to call the _trackEvent() method on the _gaq object.

The _gaq object is part of the tracking code snippet that you will have pasted into your site (if you haven't setup a Google Analytics account yet then you should review this screencast which explains how to install your tracking code).

The method takes several parameters - category, action, label and value.

category	string	The category is a general category (in my code I have used "Sample Application" and "Image Enlargement" as my categories).
action	string	The action is a specific action for the event (such as "Download", "Click", "Play", "Vote", etc).
label	string (optional)	If you want to record something specific like the filename of the video being played then you can put this in the label parameter.
value	integer (optional)	This last type is if you want to assign a specific value to the event such as somebody you can make £5 in advertising each time somebody watches one of your videos.

A simple page tracker event might look like this:

_gaq.push(['_trackEvent', "Videos", "Play", "Cat falls off table.avi", 5]);

This would assign a value of 5 dollars (or whichever currency your analytics is configured to work with) and attribute it to a play of a video called "Cat falls off table.avi".

Planning your events

I just want to pass on a bit of advice that I picked up while learning in the Conversion University. You should create a planning document which outlines the general structure of what events you intend to capture. Using a straightforward naming convention and make sure you stick to it. Otherwise you will find it unmanageable when it comes to trying to make sense of the data collected. If you are a web developer on a team then it would be a good idea to consult with the person who will be using this data before you implement your event tracking.

Taking the first swing

To start off with we simply want to be sure that the page scroll tracking is actually working. We are going to use jQuery to track the page scrolling. If you haven't every used jQuery before then you would benefit from reading some introductory tutorials but for the sake of this article please just take my word that the .ready() allows you to run a piece of code when the page has finished loading and window.scroll() allows you to run a piece of code each time a scroll is detected.

Here is the first draft:

    <script src='http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js' type='text/javascript'></script> 
    <script type='text/javascript'>
    /* <![CDATA[ */
        $(document).ready(function () {
            SetupGoogleAnalyticsTrackEvents();
        });

        function SetupGoogleAnalyticsTrackEvents()
        {
            TrackEventsForMinimumPageScroll();
        }

        function TrackEventsForMinimumPageScroll()
        {
           $(window).scroll(function(){
             var bottom = $(window).height() + $(window).scrollTop();
             var height = $(document).height();
             var percentage = Math.round(100*bottom/height);
           
             if(percentage > 90)
             {
                 alert("Page Scrolled to 90% in " + document.location.href);
             }
           }); 
        }
    /* ]]> */
    </script>

You might wonder why I have used some seemingly redundant function names in this sample. This is simply to make sure the code we are writing fits in with the layout of code using in other Google Analytics integration articles on this site. To read them you can click the Google Analytics tag at the end of this article.

So from reading through the code you will see that the following occurs:

Some code is attached to the scroll event of the page
Each time the page is scrolled the percentage variable is updated to calculate how for down the page in total the user has scrolled.
This is calculated by comparing how far down the user has scrolled against the height of the page.
The page then checks if the scrolled percentage has exceeded a certain threshold (90% in this case) and alerts the user.

Try it out. Copy the code into a page and fill it with some bogus text. An easy way to get your hands on filler text is to use lorem ipsum. Just visit this site and generate a few paragraphs of text, enough to give you a scrollbar to test with:

http://www.lipsum.com/

Don't forget to put the html / JavaScript snippet above into the <head> tag in your sample page.

Back? Did it work? Great! So now we have a mechanism to detect when the user has scrolled to a certain threshold percentage.

Duplicate events

Did you notice any problems while playing with your new toy? It seems that after you continue scrolling down the page past 90% that the page keeps notifying you, again and again. If we were tracking this by sending and Event Tracking message to Google Analytics every time then our statistics wouldn't be very accurate at all!

The solution is pretty straightforward. We need a simple Boolean variable which is set to 0 when the page loads but after the first time the threshold met event fires the Boolean is change to 1 and any subsequent events are ignored.

The code would look something like this:

var IsDuplicateEvent = 0;

function ScrollingEvent()
{
   if(ScrollThreshold > 90%)
   {
      if(IsDuplicateEvent == 0)
      {
         IsDuplicateEvent = 1;
         TrackEventInGoogleAnalytics();
      }
   }
}

This code wont compile because it's not much more than pseudo code but hopefully it does illustrate the idea.

While writing this code I originally had the IsDuplicateEvent = 1; line at the end of the method. I figured that if the Event Tracking portion caused a problem then I didn't want to count it as a tracked event. When testing this code (by scrolling down the page really fast) I still managed to get duplicate alert boxes. Moving this variable to the start of the function stopped the duplicate events.

FINAL CODE - Tracking the event and wrapping up

At this point we can take our original code sample, fold the duplicate event blocker in and replace the alert() with a genuine call to the Google Analytics API. We would end up with some code that looks like this:

    <script src='http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js' type='text/javascript'></script> 
    <script type='text/javascript'>
    /* <![CDATA[ */
        var IsDuplicateScrollEvent = 0;

        $(document).ready(function () {
            SetupGoogleAnalyticsTrackEvents();
        });

        function SetupGoogleAnalyticsTrackEvents()
        {
            TrackEventsForMinimumPageScroll();
        }

        function TrackEventsForMinimumPageScroll()
        {
           $(window).scroll(function(){
             var scrollPercent = GetScrollPercent();
           
             if(scrollPercent > 90)
             {
               if(IsDuplicateScrollEvent == 0)
               { 
                 IsDuplicateScrollEvent = 1;
//                 alert("Page Scrolled to 90% in " + document.location.href);
                 TrackEvent("Content Engagement", "Scrolled To 90%", document.location.href);
               }
             }
           }); 
        }

        function GetScrollPercent()
        {
             var bottom = $(window).height() + $(window).scrollTop();
             var height = $(document).height();

             return Math.round(100*bottom/height);
        }
                                
        function TrackEvent(Category, Action, Label)
        {
           _gaq(['_trackEvent', Category, Action, Label]);
        }     
    /* ]]> */
    </script>

As you can see I have refactored the scroll percentage out into its own method just to make the code a bit cleaner to read.

I have also left the alert() code in there but just commented it out. This is because it can take up to 24 hours to see tracked events actually appear in Google Analytics so it's handy to use it for one final check as you put the code into your site.

My Website Design Doesn't Look The Same In All Browsers!

2011-04-05T22:36:00.001+01:00

“I created a website but now when I look at it in different browsers there are display glitches! What can I do?”

This is a common issue that developers face. Web browsers have a long history of having their own interpretations of standards compliance and they also have different defaults such as font sizes and margins. If you find that your website is not looking the same in all of the major browsers then this guide will help you figure which steps you need to take to fix it.

Valid Doctype

Before you start you need to make sure that your HTML template has a valid doctype. The doctype tells the browser which set of rules it should be following internally. It’s really easy to set up a doctype:

http://www.alistapart.com/articles/doctype/

W3C Validation

The W3C are the standards body that make the official guidelines for web page technologies such as HTML and CSS. To have a fighting chance at getting your site to look the same in all browsers you should make sure that your pages have valid HTML and CSS. Run them through these two validators and fix any errors that come up:

CSS Reset

Now that we have a technically valid design it’s time to level the playing field between each of the browsers defaults. Even a normal page will have different defaults for margins, font sizes, link borders and such. A CSS reset stylesheet explicitly sets rules for all of the tags rather than relying on the defaults set in the browser. You can use any CSS reset stylesheet; there are several out there in the wild, but if you don’t have a preference I would suggest using Yahoo CSS Reset 3. This is because it’s made by a large corporation, has quality and is up to date with modern browser inconsistencies:

http://developer.yahoo.com/yui/3/cssreset/

When you first apply the CSS reset stylesheet you might find that your design breaks slightly in the browsers that were looking ok before. This is because you built the rules based on their defaults and now that they have been reset you are finding that your rules aren’t quite right. Don’t give up on the CSS reset stylesheet though, it is worth the time to fix these issues and then go back to working on fixing your original problems.

Don’t Use Hacks

There are a lot of tricks that you can use to achieve different effects in different browsers. I’m not talking about rounded corners or other css3 techniques that aren’t supported yet in a standards compliant way, I’m talking about using intentionally invalid mark-up to confuse certain browsers into applying different rules than others.

If you’re working on a commercial website then this is an irresponsible way to develop a site and will almost guarantee problems for your client in the future. You can’t be sure that these tricks will work in future browsers and there is always a better solution to solve your problems without relying on these hacks. Using hacks will result in unhappy clients and extra work down the line.

Conditional Comments

Let’s face it, if you're reading this article then in all likelihood you have a website that looks very similar in most browsers such as Firefox, Safari, Opera, etc. and wrong in Internet Explorer. If you built the site for Internet Explorer then you might have the site looking great in IE and poor in all the others. Either way there are times when you actually do need to treat Internet Explorer as a special case. Conditional comments allow you to target various versions of Internet Explorer with their own CSS rules and the idea is implemented in a way that doesn’t affect other standards compliant browsers.

http://www.google.co.uk/search?q=conditional+comments

DOM Inspection Addons

If you’ve made it this far down the document then you are getting down to the nitty gritty technical details of browser inconsistencies. An indispensible tool to have in your arsenal at this point is a DOM inspection toolbar. For Firefox it has to be the industry standard Firebug. Microsoft have released their own tool called Web Developers Toolbar and this is actually bundled with the recently release IE9. Safari and Chrome both include a DOM inspector out of the box called Web Inspector and Chrome Inspector respectively.

These tools all have the same purpose. You can fire them up and then click on any element of your design to inspect the underlying HTML mark-up and CSS rules being applied to that mark-up. The majority of these tools let you prototype possible design fixes by letting you change any CSS rule or add new ones on the fly. Trying to figure out how wide that div can be before it pops your delicate floats and ruins the design? Test out if a well-placed clear: both; will fix your design? Change font sizes and colours to perfect the design? This is all made easy with a valuable tool such as this.

Testing Older Versions

Hopefully by this point you will have tuned your website up using the techniques above and your site is looking great in all of the modern browsers. Unfortunately we don’t live in a world where all of our users are running the latest versions of their web browser of choice. Unfortunately we don’t even live in a world where a developer can have more than one version of a browser installed side by side.

The most common issue is testing your site in IE6. You cannot have both installed officially. There is a way to hack the browser and force it to install two versions of IE but this has its own issues and if you aren’t testing against a genuine install it is largely pointless.

Microsoft acknowledge this issue and they release Virtual PC images every few months. They have copies of Windows XP & IE6, amongst other configurations, pre-installed on them. The latest version at the time of writing is available for download below. Unfortunately they don’t seem to have a standard hub page so you might have to search for the latest version if you are reading this article sometime in the future.

http://www.microsoft.com/downloads/en/details.aspx?FamilyID=21eabb90-958f-4b64-b5f1-73d0a413c8ef&displaylang=en

Cross Browser Testing Tools

There are two services out there by the big players Microsoft and Adobe which will let you generate screenshots of browsers and test against them:

There are also some other services which offer these kinds of features. Smashing Magazine has a good round up of them here:

http://www.smashingmagazine.com/2010/06/04/cross-browser-testing-a-detailed-review-of-tools-and-services/

Check Your Analytics

This one is a bit of a cop out but it’s worth mentioning. If you are having problems with a fringe browser then you should check your analytics to see if your visitors actually use this browser.

It doesn’t make commercial sense to work on a problem for hours on end if its only occurring in IE5.5 and it accounts for 5 visitors a month.

Similarly depending on your audience you might find that you have a particularly tech savvy user base. Readers of this blog for example are obviously technical people and have made sensible choices with their primary browsers…. Right?

Ask In Forums

If you have put in the work and really tried to solve the problem yourself then it’s now reasonable to post your problem on a website and ask the world to help you out.

A few popular forums for this kind of thing are below but if you dig a little you will find many communities that are willing to review your site.

When posting on sites like this you should remember to tackle one specific issue at a time. Explain that you have already made a valiant effort of your own to solve the problem. Mention what you have already tried, perhaps even link to this article and say you have tried these techniques.

Conclusion

Creating a design can take additional work to get things looking the way that you want them in all browsers. This may mean taking extra consideration with your design next time to only include features that are available in all browsers.

Create web designs that suit the medium. This isn't desktop publishing and we don't have you have full per-pixel positioning. The web is more of a flow design tool. Trying to design sites that work against the intentions of HTML and CSS will leave your designs brittle and inconsistent.

The best technique that I have found is to develop in Firefox, using clean coding techniques, testing semi-regularly in your installed copy of Internet Explorer and then at major milestones check your design is working in Internet Explorer 6.

Following the tips and techniques in this guide should help reduce your problems with future website development.

How to automatically track events with Google Analytics async snippet and jQuery

2011-03-17T22:39:00.001Z

This article examines a way to use a feature of Google Analytics called Event Tracking. By using jQuery and the Google Analytics JavaScript API we will automatically track events on your site not seen by a standard analytics installation.

Updated article - async snippet version

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

Don't forget that this snippet now goes right before the </head> tag instead of the </body> tag that it used to go in.

Introduction

I have invested some time over the past week in getting to know Google Analytics a lot better. After working through the "in-depth analysis" section over on Google Analytics training ground (called Conversion University) I decided to implement events to track some items that are not tracked by the basic out-of-the-box Analytics implementation.

When I woke up this morning I barely knew anything about jQuery having only used it once or twice before (each time with just enough of a gap for me to forget all the details when it came to using it again). Because writing the jQuery code was as much of a journey for me as the GA event tracking was, I will also cover a couple of tricks I learned along the way.

Just in case it hasn't occurred to you - GA is an abbreviation for Google Analytics.

What does the Event Tracking do that normal Analytics doesn't?

A good place to start this off is to justify what this piece of technology does and why we would want to use it. By tracking an event we can record visitor activities that don't equate to a page visit but are still valuable to us. For example, you might want to know stats on your PDF downloads or other downloadable assets.

A more advanced use would be to track a video player such as those embedded in the YouTube site. You could easily think of some usage patterns that you might want to track such as when the user presses play on the video. You could also track abandonment and make a new event if they watch over 90% of the video. Another example would be clicking on one of the recommended video links that are displayed after the main video has completed playing.

It is worth remembering that a maximum of 500 events can be tracked per user per visit so you shouldn't try to track events that happen very frequently.

You should now see that this is a potentially valuable feature to master.

_trackEvent

The way to track an event within Google Analytics is to call the _trackEvent() method on the _gaq object.

The method takes several parameters - category, action, label and value.

category	string	The category is a general category (in my code I have used "Sample Application" and "Image Enlargement" as my categories).
action	string	The action is a specific action for the event (such as "Download", "Click", "Play", "Vote", etc).
label	string (optional)	If you want to record something specific like the filename of the video being played then you can put this in the label parameter.
value	integer (optional)	This last type is if you want to assign a specific value to the event such as somebody you can make £5 in advertising each time somebody watches one of your videos.

A simple page tracker event might look like this:

_gaq.push(['_trackEvent', "Videos", "Play", "Cat falls off table.avi", 5]);

This would assign a value of 5 dollars and attribute it to a play of a video called "Cat falls off table.avi".

Planning your events

Look at the code

Now that you understand the background, lets take a look at the code I have implemented in my blog to track these items and then afterwards I will go over the code highlighting the major features.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'></script> 
<script type='text/javascript'>
/* <![CDATA[ */
$(document).ready(function () {
    SetupGoogleAnalyticsTrackEvents();
});

function SetupGoogleAnalyticsTrackEvents()
{
    TrackEventsForCodeSampleDownloads();
    TrackEventsForImageClicks();
}

function TrackEventsForCodeSampleDownloads()
{
    var FilterByBlogSampleHref = "href^='http://cid-15f731b049c8a797.skydrive.live.com/self.aspx/BlogExamples/'";
    var FilterByRarFileExtension = "href$='.rar'";
    
    $("a[" + FilterByBlogSampleHref + "][" + FilterByRarFileExtension + "]").click(function() {
        var SampleFileName = ExtractFileNameFromUrl($(this).attr("href"));
        TrackEvent("Sample Application", "Download", SampleFileName);
    });
}

function TrackEventsForImageClicks()
{
    TrackEventByFileExtension(".gif");
    TrackEventByFileExtension(".jpg");
    TrackEventByFileExtension(".jpeg");
    TrackEventByFileExtension(".png");
}

function TrackEventByFileExtension(FileExtension)
{
    $("a[href$='" + FileExtension + "']").click(function() {
        var ImageFileName = ExtractFileNameFromUrl($(this).attr("href"));
        TrackEvent("Image Enlargement", "Click", ImageFileName);
    });
}

function ExtractFileNameFromUrl(Url)
{
    // Note this code assumes
    //   - that the url doesnt contain a query string
    //   - that a real url has been passed in
    //   - that the url has a filename and isnt a folder
    var SplitUrl = Url.split('/');
    
    var FileName = SplitUrl[SplitUrl.length-1];
    
    return FileName;
}
        
function TrackEvent(Category, Action, Label)
{
   _gaq.push(['_trackEvent', Category, Action, Label]);
}
/* ]]> */
</script>

Pseudo code theory

Lets take a quick run through the concept behind this script so you can see why I have structured it the way I have. The main method is called from a jQuery ready event so if you have put your analytics tag just before a </head> tag then _gaq will be setup by the time this executes.

I have changed this from the original article so that it uses the Google CDN to download jQuery instead of the Microsoft CDN because of Dave Ward's article.

I have split it into two algorithms. The first one finds all the links on the page pointing to rar files on my Windows Live SkyDrive account which is where I keep all my sample applications. The second one plucks out links which are pointing to images.

The code registers click events with all of the links it finds matching these criteria. Then when you click on one of these links the click handler fires and calls the track event method.

Double where clauses

I needed to filter the links to my sample applications by two criteria. First it needed to start with my Sky Drive url and secondly it should end with a .rar extension.

While researching how to do this I found that you can chain up multiple [] where clauses. The code that uses this technique looks like this:

$("a[" + FilterByBlogSampleHref + "][" + FilterByRarFileExtension + "]");

After I had written the initial code I refactored out the specific filters into two variables. This was so that it was clear at a glance what I was trying to filter. This is important because when I come back to this code after a few months I don't want to have to decode what the filters mean.

Ends with operator

The other cool trick I found which shows the power of jQuery was the ends with operator. This looks like this:

$("a[href$='" + FileExtension + "']");

The $= means that the href attribute must end with the value of FileExtension. I didn't refactor this filter out because I felt that the name of the method made it clear we are looking at the end of a url.

Layout of the code (Refactored)

After I had finished the code this looked quite a lot different than it does now. I made a series of small changes to the code to ensure that the code was as clean as possible. For example, I put the _trackEvent call in a wrapper so that I didn't have third party library calls throughout my code. If it turns out in the future that I need to switch my analytics provider then I will only have to change this code in one place.

I extracted the code in TrackEventByFileExtension() so that I could reduce duplication in my code.

I put the ExtractFileNameFromUrl() code in its own function to improve the readability of its calling function by reducing the complexity of the parent method. The name of the method in the code also serves as a form of human readable documentation which explains what the code is doing in natural language.

How to use this in your projects

The sample code that I have presented above is really tailored to my specific event tracking requirements (which I completely fabricated so that I had something to track).

Even if you have only a limited understanding of javascript I think this should provide you with enough information to pull out the bits you need to track your own custom events automatically.

If you are putting this on your own website then you should also consider putting this in an external file. The only reason I have put the code inline in the head tag is because my blog is a hosted solution and I don't have file space setup to store it in.

More information

http://www.conversionuniversity.com/ - Conversion University
http://code.google.com/apis/analytics/docs/gaJS/gaJSApiEventTracking.html - Event Tracking API documentation

SOLVED - 'srcDomainMulti' is not declared. It may be inaccessible due to its protection level

2010-04-17T13:28:00.001+01:00

When converting a project from C# to VB I ran into this compiler error which stopped me in my tracks for about 15 minutes. Just when I gave up and decided to rebuild the page by hand inspiration hit and I found my solution...

The scenario

I had just put the finishing touches to a domain whois tool and I was ready to convert it over to a VB project. I'm not a very strong VB.net coder but the project required the final deliverable in VB so I opted to make it all in C# first and then convert it over using one of the great free tools for converting code online.

After creating my new solution, adding the website and the class library, creating the stub pages and running all of the code files through the online code converter I was almost ready to go.

The last step was to convert the aspx ui page. I was vaguely aware that in some situations there are differences between the syntax in these pages but I kept my fingers crossed that I wouldn't have to remember these little nuances so I could ship it quickly.

The problem

Hitting compile I was hit with the an error which confused me:

Error 1 'srcDomainMulti' is not declared. It may be inaccessible due to its protection level.

Double clicking it took me to a line in my code behind where I was tweaking a parameter of an ObjectDataSource just before it bound. The code couldn't see the ObjectDataSource on my page!

I played around for a few minutes, even rolling up my sleeves and writing some code to FindControl it just in case it was a naming container issue I was unaware of:

Dim srcMulti As ObjectDataSource = DirectCast(Me.FindControl("srcDomainMulti"), ObjectDataSource)
srcMulti.SelectParameters("PopularOnly").DefaultValue = "False"

But the page still didn't work. In the end I gave up and started recreating the page by dropping controls onto a new VB page and setting them up item by item. When it came to binding the first drop down list I noticed something odd. The namespace of my DataObject was listed as:

WhoisLibrary.WhoisLibrary.TldCollection

The solution

The solution was really straightforward in the end, as nearly all problems turn out. Without looking into this too deeply it seems that VB holds your hand when it comes to namespaces and automatically wraps the class libraries files in a namespace.

Each of the .vb files I had run through the converter also had a namespace declaration wrapped around them which was doubling up on my code and making everything invisible.

I whipped through the project removing all my namespace wrappers which removed the middle namespace layer, pressed compile and the project worked without any further grumbles!

SOLVED: The type or namespace name 'Linq' does not exist in the namespace 'System' - are you missing an assembly reference?

2010-04-12T18:04:00.000+01:00

This problem has been cropping up a lot recently - projects will complain of missing namespace's when I open them up and attempt to compile the first time. If this has happened to you then read on for a simple fix.

Scenario

I don't know if this one is a bug in Visual Studio 2010 (Beta 2 and RC1) or something else but recently I have noticed this error cropping up more and more. When I open an existing project it might fail to compile. I have also noticed it happen when I have downloaded a fresh project. Its not something I have pinned down but whenever I see this error:

Error 1 The type or namespace name 'Linq' does not exist in the namespace 'System' (are you missing an assembly reference?)

I know that the solution is quick and simple.

Solution

To get your compiler back on its feet you simply need to add a reference to System.Core.

Right click on the Bin folder in the Solution Explorer
Choose Add Reference…
Click the .NET tab and scroll down to System.Core
- If you wait a few moments for the entire list to load you can simply click once on the list and start type System.Core. This will select the right item without you having to scroll and search for it.
Click OK to accept the new reference

Once you have completed this cycle once you will be able to quickly select it by complete Step 1, 2 and then clicking the Recent tab and quickly selecting it from the short list.

SOLVED: The located assembly’s manifest definition does not match the assembly reference

2010-04-09T18:15:00.000+01:00

When working on a project recently I got an error that complained the assembly's manifest definition did not match the assembly reference. Read on to discover my simple fix.

Scenario

When I opened up a project the other day and simply tried to compile it I was struck with the following error:

Could not load file or assembly 'Intelligencia.UrlRewriter, Version=2.0.0.6, Culture=neutral, PublicKeyToken=0573f3650687980d' or one of its dependencies. The located assembly’s manifest definition does not match the assembly reference. HRESULT: 0x80131040

The assembly in question could be any assembly. It is

I have a central repository of 3rd party libraries on my development computer. Normally I keep them all in a central location so that I don't have to waste time downloading them again when I need them in a new project.

This time I learned a quick lesson in keeping newer versions partioned away from older versions. Part of my original theory was that I could just drop the latest version of an assembly into that libraries folder and the next time I compiled the project it would use the refresh file and automatically update it to use the latest version.

Solution

It turns out that this plan didn't work so well for me. The refresh or maybe the web.config had an older version number embedded in it somewhere. So when it tried to refresh it got confused and gave the error above.

The solution was pretty simple. Just delete the assembly and associated files from my projects bin folder and then choose Add Reference to add the latest version back in.

A quick recompile later and I was on my way.

SOLVED: Breaking parent web.config dependencies in sub applications

2010-04-08T18:10:00.000+01:00

This article explains how to implement a sub application such as a blog in your website without experiencing dependency issues. A common problem that developers experience is when their sub applications accidentally inherit requirements of the parent website. This is actually by design but read on if this is causing problems in your site.

Scenario

This problem has caught me out a couple of times so far but usually with enough of a gap between occurrences that it had become just a fuzzy memory. Hopefully by writing this article it will solidify it in my head and also help out other developers experiencing this for the first time.

Unfortunately this problem doesn't have a specific phrase or keyword that will make it easy for developers to find this solution in search engines. I want to rephrase this a couple of ways to hopefully capture the terms a developer might use when trying to solve this problem:

My blog, forum, gallery is requiring dlls from my parent website
When I install [software] in my site it tries to load assemblies from the main website
How do I stop my sub websites from needing the main sites bin folder
Could not load file or assembly 'assembly name' or one of its dependencies. The system cannot find the file specified.

That should do it but any further phrasings (such as the search term you arrived here through) are welcome in the comments section.

The problem occurs when you install a third party application as an application within an existing web site. I have had this occur when I have done the installation manually and also when I have used the Web PI.

This could encompass any of the applications out there such as forums, blogs, galleries, shopping carts or anything that runs as its own application.

The actual error message will most likely take the format of:

"Could not load file or assembly 'assembly name' or one of its dependencies. The system cannot find the file specified."

Solution

The reason this is occurring is actually by design. The settings inside the main web.config will cascade downwards and all other config files will inherit the settings. If they have settings of their own they will override the parent. In fact even the root web.config is being merged with a server wide file called machine.config.

So what's happening is the references to the assemblies in your main \bin\ folder are being passed down to the sub application and when it looks in its own bin folder it finds they aren't their and throws an error.

The obvious solution is to block these settings being inherited by a lower config file. This is achieved by wrapping the <system.web> section in the following tag:

 <location path="." inheritInChildApplications="false">
   <system.web>
     <!-- ... -->
   </system.web>
 </location>

If you have used DOS or FTP then you will probably realise that in the path="." the dot means current folder. This applies the inheritChildApplications="false" to all applications below the current folder. If you have a virtual folder setup in IIS that is at different physical location this is still counted as below the current application if its virtual url is below the current one.

Running IIS7 or above?

The newer versions of IIS have moved their configuration settings to a new section. If you have a web.config that is for IIS7 then you will need to also wrap <system.webServer> which is further down.

<location path="." inheritInChildApplications="false"> 
  <system.webServer>
    <!-- ... -->
  </system.webServer>
</location>

You can have more than one <location> block in a web.config so it would be fine to do this to wrap around both sections.

IIS7 and validateIntegratedModeConfiguration

If you were previously relying on the <validation validateIntegratedModeConfiguration="false" /> tag for the correct functioning of your site you might need to follow this technique to avoid a 502.22 Internal Server Error.

Only available in 2.0

Please note that if you're working with an asp.net 1.1 application you will not be able to put this tag in to block child applications as it was only introduced in 2.0. In this case your only real option as far as I know is to add <remove> elements into the child applications to cancel out each of the assemblies loaded in the asp.net 1.1 app. This is not a pretty solution because it tightly couples the two projects together however if you are in this situation and cannot upgrade the 1.1 app to 2.0 then it might be your only way out.

Restrictions with this technique

Please note that you cannot simply wrap the ENTIRE web.config in this tag as the root node must be the <configuration> tag.

There are also certain sections you cannot wrap the <location> tag around such as the <configSections> tag.

You can use more than one <location> tag to exclude various sections. Alternatively you can reorder portions of the web.config so that a single <location> can span multiple sections.

Incompatibilities with the WSAT

If you use the Web Site Administration Tool to configure your directory security you may have problems with the web.configs that the tool places in subdirectories. If this is the case then you can move the contents of the lower web.configs up into the main config and wrap them in a <location path="path to file or folder"> tag.

Breaks local debugging

I have noticed that while this works great for allowing an application and a sub application to work in harmony on the server it can cause confusion when you try to use it on your local dev server. In doing research into this issue it turns out that this is a known bug which has been in the official to do list for quite a while but as it doesn't affect many users hasn't been resolved yet. You can read about and vote for this bug on Microsoft Connect at:

https://connect.microsoft.com/VisualStudio/feedback/details/293526/web-debugging-fails-if-compilation-element-is-defined-inside-of-location-element

The scenario is that if you place a <compilation debug="true"> element within a <location path="." inheritInChildApplications="false"> element the debug="true" will not be understood.

This means that when you press the play button to start debugging it will compile, launch the site and then immediately close the debug session. Your website will load up and you will be able to use it as normal but if you look at it in visual studio you will see the debug play button is available and the app is not considered to be currently being debugged.

It may also mean that your app will simply fail to compile locally (but works fine on the server).

There is a work around for this; by commenting the <location> element out and restarting the debug process local debugging will being working correctly again.

As of the current version there is no way to automate setting this tag between local and production environments although it may be possible with the new web.config transformations in the upcoming .net 4 release.

SOLVED: IIS7, validateIntegratedModeConfiguration and inheritInChildApplications clash

2010-04-07T19:47:00.000+01:00

This article covers an edge case you might have encountered when using the inheritInChildApplications attribute with a web site hosted on IIS7 and provides two possible solutions to your problem.

Scenario

You are trying to set up a sub application in your website and you wrap the <location path="." inheritInChildApplications="false"> element around your <system.webServer> element to break dependencies between apps.

Despite having followed the correct instructions you still see an error message the next time you try to load the parent site. The error looks something like this:

HTTP Error 500.22 - Internal Server Error
An ASP.NET setting has been detected that does not apply in Integrated managed pipeline mode.

This error occurs when you end up with the following configuration elements:

<configuration>
  <system.web>
    <!-- ... -->
    <httpModules>
      <!-- ... -->
    </httpModules>
    <httpHandlers>
      <!-- ... -->
    </httpHandlers>
  </system.web>
  <!-- ... -->
  <location path="." inheritInChildApplications="false">
    <system.webServer>
      <validation validateIntegratedModeConfiguration="false" />
      <!-- ... -->
    </system.webServer>
  </location>
  <!-- ... -->
</configuration>

The important part here is that you have wrapped your <system.webServer> in a <location> tag to prevent inheritance. If that <system.webServer> tag contained a <validation> tag and there are still <httpModules> or <httpHandlers> further up the web.config then your validateIntegratedModeConfiguration attribute is going to cause this error.

What is validateIntegratedModeConfiguration?

The official documentation is here:

http://msdn.microsoft.com/en-us/library/bb422433.aspx

It is a simple housekeeping mechanism which stops you from accidentally using the old IIS6 httpHandler / httpModule registration mechanism in IIS7.

In the old IIS6 days you would have registered these elements under the <system.web> tag as described in the snippet above. IIS7 registers these under the <system.webServer> tag.

The reason that you would have put this <validate> tag into your web.config in the first place is because like many developers you are using Cassini. This is the dev server built in to Visual Studio and its based off IIS6.

This means that if your site is hosted on IIS7 you need both sets of tags and adding the <validation> snippet allowed this scenario without throwing the error.

The reason that its now showing up is that the <location> snippet does some funny things to the visibility of tags. It basically hides the <validation> setting from view and then complains because it has found both sets of registration tags.

Luckily there are two simple solutions to this problem.

Solution 1: remove the old registration mechanisms

If the scenario fits for you now then the simples solution is to simply remove the <httpHandler> and <httpModule> tags from <system.web>. This would mean that you have since changed over from using Cassini to using a local installation of IIS7. If you have then you no longer need the old tags and you can remove them.

However, its likely that you haven't changed over to this development setup and what you really need is to keep both sets of tags and still be able to stop inheritance with the <location> tag.

Solution 2: move the validation tag outside of the location tag

Something I discovered when tackling this problem was that the web.config was happy to have more than one <system.webServer> inside a single .config file.

This means that you can simply move the <validation> tag outside of the <location> tag and put it inside a second <system.webServer> tag that's visible to all.

This means that the setting will be inherited into sub applications but for my purposes this was not a problem.

Following this technique you would end up with a web.config that had an outline roughly like the following:

<configuration>
  <system.web>
    <!-- keep httpModules and httpHandlers tags in here -->
  </system.web>
  <system.webServer>
    <validation validateIntegratedModeConfiguration="false" />
  </system.webServer>
  <location path="." inheritInChildApplications="false">
    <system.webServer>
      <!-- your original system.webServer tags stay in here -->
    </system.webServer>
  </location>
</configuration>

As you can see there are now two <system.webServer> tags in the snippet and the second one has the <location> tag wrapped around it. In a real situation you would probably want to wrap the <system.web> tag in a <location> as well - or just wrap the two in one big <location> and move your new <system.webServer> outside of it.

Impersonation

One parting note is that if you read the official MSDN documentation that I link to above you will see there is actually a third tag that will trigger the validation error:

<identity impersonate="true" />

I didn't include this in the article because I have never used it and I didn't want to give out bad advice. If my solutions above don't solve your problems then perhaps checking if you are using this third tag might help!

Tracking scroll depth to reveal content engagement in Google Analytics

2010-03-20T19:45:00.001Z

Update

This article was written for what is now the old style tracking code. If your code looks like the snippet below then this article is for you, although you should really upgrade to the async tracking code snippet and then read the updated version of this article here.

<script type='text/javascript'>
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type='text/javascript'>
try {
var pageTracker = _gat._getTracker("UA-XXXXXXX-X");
pageTracker._trackPageview();
} catch(err) {}</script>

Introduction

Part of what makes Google Analytics a great package is that it provides a JavaScript API which lets you mould the functionality to your requirements.

What is Event Tracking?

Event tracking is an alternative way of tracking user activity on your site. The normal way is by registering page views. Not every activity on your website results in a fresh page view though.

_trackEvent

The way to track an event within Google Analytics is to call the _trackEvent() method on the pageTracker object.

The pageTracker object is part of the tracking code snippet that you will have pasted into your site (if you haven't setup a Google Analytics account yet then you should review this screencast which explains how to install your tracking code).

The method takes several parameters - category, action, label and value.

category	string	The category is a general category (in my code I have used "Sample Application" and "Image Enlargement" as my categories).
action	string	The action is a specific action for the event (such as "Download", "Click", "Play", "Vote", etc).
label	string (optional)	If you want to record something specific like the filename of the video being played then you can put this in the label parameter.
value	integer (optional)	This last type is if you want to assign a specific value to the event such as somebody you can make £5 in advertising each time somebody watches one of your videos.

A simple page tracker event might look like this:

pageTracker._trackEvent("Videos", "Play", "Cat falls off table.avi", 5);

This would assign a value of 5 dollars (or whichever currency your analytics is configured to work with) and attribute it to a play of a video called "Cat falls off table.avi".

Planning your events

Taking the first swing

Here is the first draft:

    <script src='http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js' type='text/javascript'></script> 
    <script type='text/javascript'>
    /* <![CDATA[ */
        $(document).ready(function () {
            SetupGoogleAnalyticsTrackEvents();
        });

        function SetupGoogleAnalyticsTrackEvents()
        {
            TrackEventsForMinimumPageScroll();
        }

        function TrackEventsForMinimumPageScroll()
        {
           $(window).scroll(function(){
             var bottom = $(window).height() + $(window).scrollTop();
             var height = $(document).height();
             var percentage = Math.round(100*bottom/height);
           
             if(percentage > 90)
             {
                 alert("Page Scrolled to 90% in " + document.location.href);
             }
           }); 
        }
    /* ]]> */
    </script>

So from reading through the code you will see that the following occurs:

Some code is attached to the scroll event of the page
Each time the page is scrolled the percentage variable is updated to calculate how for down the page in total the user has scrolled.
This is calculated by comparing how far down the user has scrolled against the height of the page.
The page then checks if the scrolled percentage has exceeded a certain threshold (90% in this case) and alerts the user.

http://www.lipsum.com/

Don't forget to put the html / JavaScript snippet above into the <head> tag in your sample page.

Back? Did it work? Great! So now we have a mechanism to detect when the user has scrolled to a certain threshold percentage.

Duplicate events

The code would look something like this:

var IsDuplicateEvent = 0;

function ScrollingEvent()
{
   if(ScrollThreshold > 90%)
   {
      if(IsDuplicateEvent == 0)
      {
         IsDuplicateEvent = 1;
         TrackEventInGoogleAnalytics();
      }
   }
}

This code wont compile because it's not much more than pseudo code but hopefully it does illustrate the idea.

FINAL CODE - Tracking the event and wrapping up

    <script src='http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js' type='text/javascript'></script> 
    <script type='text/javascript'>
    /* <![CDATA[ */
        var IsDuplicateScrollEvent = 0;

        $(document).ready(function () {
            SetupGoogleAnalyticsTrackEvents();
        });

        function SetupGoogleAnalyticsTrackEvents()
        {
            TrackEventsForMinimumPageScroll();
        }

        function TrackEventsForMinimumPageScroll()
        {
           $(window).scroll(function(){
             var scrollPercent = GetScrollPercent();
           
             if(scrollPercent > 90)
             {
               if(IsDuplicateScrollEvent == 0)
               { 
                 IsDuplicateScrollEvent = 1;
//                 alert("Page Scrolled to 90% in " + document.location.href);
                 TrackEvent("Content Engagement", "Scrolled To 90%", document.location.href);
               }
             }
           }); 
        }

        function GetScrollPercent()
        {
             var bottom = $(window).height() + $(window).scrollTop();
             var height = $(document).height();

             return Math.round(100*bottom/height);
        }
                                
        function TrackEvent(Category, Action, Label)
        {
           pageTracker._trackEvent(Category, Action, Label);
        }     
    /* ]]> */
    </script>

As you can see I have refactored the scroll percentage out into its own method just to make the code a bit cleaner to read.

SOLVED: Error 1 Ticks must be between DateTime.MinValue.Ticks and DateTime.MaxValue.Ticks

2010-03-11T00:30:00.001Z

This is a simple looking error message that is deceptively hard to track down. Thankfully if you're having this problem then this article should get you back on track without spending hours scratching your head.

Scenario

It was time to update an existing website so after synchronising my copy of the site with the server I was ready to make my changes. The only problem was that every time I tried to compile the site I was getting an error:

Error 1 Ticks must be between DateTime.MinValue.Ticks and DateTime.MaxValue.Ticks. Parameter name ticks

This was a hard error to deal with because doing a project wide search for "Ticks" revealed no results. Searching for the DateTime object was similarly unproductive - only a handful of references and mostly within auto-generated code inside my linq to sql data context.

The most difficult element of this puzzle was that the error listed in the Errors tab wasn't linked to a line of code in the project - double clicking it did nothing!

How I Solved It

After getting pretty annoyed because I was on the clock I made a backup of the site and decided to delete files until the dodgy file showed its face.

I used the following heuristic to do this:

Switch to the Output tab and see what the last folder was which was compiled before it borked.
Delete that folder.
Recompile
Keep repeating steps 1 to 3 until the site compiles
When it compiles start bringing back individual files in the last batch you deleted until you find the offending file

For me it turned out to be a single .jpg which when viewed in explorer with View Details had an empty "Date Modified".

I opened it up in Photoshop and saved it out again and this fixed the problem.

Will this work for you?

I was lucky that the files I deleted were all in supporting folders and didn't contain class files which would have broken the compilation of the site. If it turns out that step 1 leads you to a folder such as this I would take a look at the files and check that there aren't any obviously dodgy files. If there aren't then try deleting all of the non essential files in the site and see if the compiler is really getting hung up on that folder or not.

Also when I first had this problem I went to Google and found that I had visited pages on sites that mentioned this error code before. I don't know how I solved i the first time but I am pretty sure this wasn't the solution so you might find your problem remains unsolved even after following this guide!

SOLVED: Could not load type 'System.Web.UI.ScriptReferenceBase'

2010-03-03T20:23:00.001Z

Getting problems when you upload your Ajax Control Toolkit powered website up to your server? Read on for a quick and easy solution!

Scenario

If you have added some of the Ajax Control Toolkit extenders into your website you will have probably tested them out on your local dev computer and marvelled at how easy it was to add some impressive eye candy to your site. Then, just when you think your work is done for the day and its time to put your new creation online you are hit with an error:

Could not load type 'System.Web.UI.ScriptReferenceBase' from assembly 'System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35'.

Well you don't need to worry too much because this time it is a really simple fix.

Quick Fix

If your site has just broken and you want to get it running quickly then the simplest solution is to change your <cc1:ToolkitScriptManager> tag to be just a plain <asp:ScriptManager> tag.

The ToolkitScriptManager is a wrapper control which provides the features of ScriptManager but also has a script combining feature to reduce the number of external javascript references generated by the toolkit.

So its as simple as taking your code

<cc1:ToolkitScriptManager runat="server" ... />

and changing it to

<asp:ScriptManager runat="server" ... />

(You might have a different prefix than cc1 but it doesn't matter).

The Real Fix

The real reason that your site is throwing the error is that the latest version of Ajax Control Toolkit expects to have a .net 3.5 SP1 runtime environment. The key bit here is the SP1 which means Service Pack 1.

To fix it you simply need to install the SP1 release which can be downloaded from here:

http://www.microsoft.com/downloads/details.aspx?familyid=ab99342f-5d1a-413d-8319-81da479ab0d7&displaylang=en

This needs to be run on your server so you will need remote desktop access to do this. This kind of control over your server is typically only available with dedicated servers or VPS virtual servers.

If you have a simple shared hosting package then you need to contact your web host and find out why they haven't upgraded yet. The SP1 release was a major upgrade which not only has many bug fixes included in it but also some great new features such as ASP.NET Dynamic Data. You can read all about the new features on the download link above.

In the worst case scenario where you cant get your host to upgrade and you cant move hosts because you are locked into a contract with them then you can at least fall back on the quick fix listed in the middle of this article to get your site running again.

SOLVED: "Visual Studio setup cannot run in compatibility mode." error when attempting to uninstall Visual Studio 2010 Beta 2

2010-02-19T16:21:00.001Z

If you are having problems upgrading from Visual Studio 2010 Beta 2 to Release Candidate (RC1) then hopefully this will get you back on your way.

Scenario

When trying to get rid of Visual Studio 2010 Beta 2 so I could update it to the RC1 release on my home computer I ended up getting some annoying errors.

The following error message was being displayed every time I tried to click uninstall:

---------------------------
setup.exe
---------------------------
Visual Studio setup cannot run in compatibility mode. For more information see the 'Installing' section in the

Visual Studio Readme at "http://go.microsoft.com/fwlink/?LinkId=143397".
---------------------------
OK
---------------------------

This error cropped up for me because I tried to uninstall Visual Studio before I uninstalled Team Foundation Server. This caused the uninstall to abort which made Windows think that the uninstaller had problems. It tries to be helpful by setting the setup.exe to run in compatibility mode but as the error message above indicates - you cant run the Visual Studio setup application in compatibility mode.

So I turned to the documentation suggested in the link above but it didn't make it clear where I was supposed to find the setup.exe or how exactly I could change it. This article aims to fill that gap.

Solution

The setup.exe application can be found in the following location:

C:\Program Files (x86)\Microsoft Visual Studio 10.0\Microsoft Visual Studio 2010 {EDITION} Beta 2 - ENU

The edition will be whichever edition you installed. I had the following folders on my computer as I upgraded to the ultimate edition after first trialling professional:

C:\Program Files (x86)\Microsoft Visual Studio 10.0\Microsoft Visual Studio 2010 Professional Beta 2 - ENU
C:\Program Files (x86)\Microsoft Visual Studio 10.0\Microsoft Visual Studio 2010 Ultimate Beta 2 - ENU

To change the compatibility mode take the following steps:

Right click on setup.exe and click Properties
Switch to the Compatibility tab
Untick the "Run this program in compatibility mode for" checkbox
If you have a button at the bottom of the dialog entitled "Show settings for all users" click this and repeat step 3 in this window.
Click OK until you have dismissed all dialog windows
Go back to the uninstall entry and uninstall as normal.

Power User Bonus Tip

I love little tips like this but usually I forget them by the time I get around to being able to use them again. To get the uninstall window open you can enter the following command in Start | Run:

control appwiz.cpl

SOLVED: Error 1053 / EventType clr20r3 when trying to start a Windows Service

2010-02-06T20:43:00.001Z

If you have seen errors when trying to deploy your Windows Service that have error 1053 and cryptic codes starting with EventType clr20r3 in your Event Log then this is your solution!

Scenario

I have recently been writing my first Windows Service which I tested and successfully used on my local development rig. Then when it came to deploying it I got cryptic error codes appearing which had me totally stumped.

When I tried to start the service it would time out after 30 seconds and give me the following error message:

The Sample Web Service service failed to start due to the following error:
The service did not respond to the start or control request in a timely fashion.

Error 1053

I tried to test the service on Windows Server 2003 and Windows Server 2008 servers but it wouldn't work on either.

Because the Windows Service was installed on the remote server it was out of reach of my debugger so I started blindly editing parts of the code, compiling, uploading, reinstalling the service and then attempting to start it. Needless to say this was a time consuming and frustrating process.

During each test I would get the same error message popup but a slightly varying error message in the Application Event Log. The three unique errors that I noted down looked like this:

EventType clr20r3, P1 windowsservice.exe, P2 1.0.0.0, P3 4b69efe0, P4 mscorlib, P5 2.0.0.0, P6 4a7cd8f7, P7 35f9, P8 40b, P9 system.argumentexception, P10 NIL.

EventType clr20r3, P1 windowsservice.exe, P2 1.0.0.0, P3 4b69e583, P4 windowsservice, P5 1.0.0.0, P6 4b69e583, P7 17, P8 1a, P9 system.nullreferenceexception, P10 NIL.

EventType clr20r3, P1 windowsservice.exe, P2 1.0.0.0, P3 4b68be72, P4 system, P5 2.0.0.0, P6 4889de7a, P7 36dc, P8 7f, P9 system.argumentexception, P10 NIL.

Solution

After dropping all of the error messages I could into Google and discovering that a lot of other developers were having the same problems I thought it would be an easy fix. Unfortunately for most users their cries for help went unanswered or unresolved.

I did find several threads with people saying that I should put the service in a try catch block and then log the error to the Event Log but the problem was that nobody posted any code to go along with the suggestion. At the time I was stressed and wanted a copy paste answer!

So in the end I caved, wrote the code, went through the test cycle one more time and then checked my event log.

I should have done that the first time.

In my event log was the actual exception that was being raised plus the full stack trace pointing right at the line of code that was causing the problem.

It turned out that my problem was a FileSystemWatcher I had dropped on the design canvas. I had set a default path which was incorrect when placed on the server. At run time I manually set the path in my main code which I had checked and double checked but when the FileSystemWatcher was initialised at design time it was using the settings in the hidden .designer.cs file first - and crashing the service!

The only silver lining I can see in this experience is that I am not going to forget it any time soon. If this -ever- happens to me again I am sure that I wont have any trouble instantly recalling the exact steps to solve this.

Your specific error will probably not be the same one as mine, however by using the code in the next section you will be able to track down your offending error with ease.

Implementation

If you created a bog standard Windows Service project you should have a file called Program.cs. This file contains your Main() which is the entry point for the application. You should have some code that looks like this:

ServiceBase[] ServicesToRun;
ServicesToRun = new ServiceBase[] 
{ 
    new SampleWindowsService() 
};
ServiceBase.Run(ServicesToRun);

To trap the error you will need to wrap the whole block inside a try catch:

try
{
    ServiceBase[] ServicesToRun;
    ServicesToRun = new ServiceBase[] 
{ 
    new SampleWindowsService() 
};
    ServiceBase.Run(ServicesToRun);
}
catch (Exception ex)
{
}

In the catch() block we will need to write out the details of the Exception into the Application Event Log. Here is the minimum code you need to log an error to the Windows Event Log.

string SourceName = "WindowsService.ExceptionLog";
if (!EventLog.SourceExists(SourceName))
{
    EventLog.CreateEventSource(SourceName, "Application");
}

EventLog eventLog = new EventLog();
eventLog.Source = SourceName;
string message = string.Format("Exception: {0} \n\nStack: {1}", ex.Message, ex.StackTrace);
eventLog.WriteEntry(message, EventLogEntryType.Error);

I am not going to go through this code as it is reasonably self explanatory and not the focus of this article. When you drop that code in to the catch block you will also need to add in a reference to the System.Diagnostics namespace so that you can use EventLog.

Putting all of this together our Program.cs should now look something like this:

using System;
using System.Collections.Generic;
using System.Linq;
using System.ServiceProcess;
using System.Text;
using System.Diagnostics;

namespace SampleWindowsService
{
    static class Program
    {
        /// <summary>
        /// The main entry point for the application.
        /// </summary>
        static void Main()
        {
            try
            {
                ServiceBase[] ServicesToRun;
                ServicesToRun = new ServiceBase[] 
                { 
                    new SampleWindowsService() 
                };
                ServiceBase.Run(ServicesToRun);
            }
            catch (Exception ex)
            {
                string SourceName = "WindowsService.ExceptionLog";
                if (!EventLog.SourceExists(SourceName))
                {
                    EventLog.CreateEventSource(SourceName, "Application");
                }

                EventLog eventLog = new EventLog();
                eventLog.Source = SourceName;
                string message = string.Format("Exception: {0} \n\nStack: {1}", ex.Message, ex.StackTrace);
                eventLog.WriteEntry(message, EventLogEntryType.Error);
            }
        }
    }
}

Install your Windows Service on the server and attempt to start it up. You will still get your error 1053 message. Now you can go to Event Viewer (Look for it under Administrative Tools in the Start menu or type eventvwr into Run). Click through to the Application log and you will see an error logged under "WindowsService.ExceptionLog". Open it up and read the details to find a full stack trace of whatever exception it was that has been stopping you all this time!

You should now be able to solve the problem pretty quickly…

Final note

When I was working on this solution I was building my Windows Service in Release mode. This was one of the things that I tried early on thinking it might not work in Debug mode on the server. Each time I tested out my service I would delete all files from the ftp folder and then upload the whole Release folder. This meant that the .pdb files were uploaded next to the Windows Service executable.

I haven't tested it both ways but as far as I know the pdb file has to be there for the application to emit the line numbers in the stack trace. It can't hurt to include them while your doing this debugging.

Hopefully once you get over this hurdle you will start seeing Windows Services as a fun application

SOLVED: Compiler error CS1519: Invalid token 'void' in class, struct, or interface member declaration

2009-12-23T17:00:00.001Z

This one has cropped up a couple of times in my development activities recently, but with just enough of a gap for me to have forgotten the solution and I had to figure it out again.

It happens in situations where the project worked fine a minute ago and then all of a sudden the project wont run. It has also happened in situations where I have made a small update and then some seemingly unrelated part of the site has broken.

From researching the problem it seems to hint at the server not having the LINQ libraries installed or missing references but from investigation of the projects I found they were both installed and referenced correctly.

It turns out that, for me at least, it was a very simple fix. All you have to do is:

Find the file that is now complaining
Open it up in Visual Studio
Press the space bar and then delete the character you typed
Save the file
Upload the file to the website
Revisit the website

These steps simply "dirty" the file in the eyes of the asp.net compiler and forces it to recompile the website again the next time a visitor requests a page.

My theory as to what is going wrong is that when the previous update caused a recompile the old assemblies are locked and in use / not deleted / forgot about somehow so the next time it tries to run it has two many conflicting assemblies and crashes. That is about as much detail as I can go into though because I am just guessing.

If this article has not solved your problem then the following link could be useful which describes an alternative fix for the problem. It revolves around the fact that you might not have referenced the LINQ libraries correctly:

http://forums.asp.net/t/1222718.aspx

Firefox - Clear Recent History

2009-12-22T19:07:00.001Z

I just accidentally stumbled upon a new feature / keyboard shortcut that I didn't know about in Mozilla Firefox. Its called Clear Recent History and it is a way for you to clear only a short range of your recent browser history.

If you press ctrl-shift-del then the following window is displayed:

The selections give you the option to delete the last one, two or four hours. Or for a more drastic approach you can also delete the whole of today or everything.

From looking at the official documentation it looks like it is a new feature added in to Firefox 3.5.

At this time of year it could come in pretty handy to clean up your tracks after you have spent the last hour shopping online and it would also log you out of Amazon which can be a big surprise spoiler if you're not careful!

Firefox Extension

If you're a Firefox user then please consider checking out my Firefox extension called "Good Deeds".

Its a simple extension which loads up a website called TheRainforestSite.com once a day so that you can click the button on that page. Every time you click that button the advertising money which is earned on the following page is contributed towards saving the rainforest.

http://addons.mozilla.org/en-US/firefox/addon/4875

Reading the ProviderUserKey when using the SqlMembershipProvider

2009-12-21T21:55:00.001Z

The ProviderUserKey gives access to a unique identifier for each of the members in your membership data store. If you're doing a large amount of lookup's or want to cross link to another table you will find this technique will give you better performance than using the UserName property.

If you are using the SqlMembershipProvider as your membership provider (which is the most common setup) you might find that you want to get at this unique user id. This is available via the ProviderUserKey property.

Because of the nature of the provider pattern this is implemented in a generic fashion as an Object data type and its not immediately obvious how you can get at the data.

A brief introduction to the provider pattern

The provider pattern is used in several areas of the .net library. The basic concept behind it is that a common interface is defined that all the different implementations have to follow. It doesn't matter how they implement it behind the scenes but you have to promise to implement all of the methods and properties defined in the provider.

This provides a consistent model to program against and has several benefits:

The same code can be used in your programs without spreading provider specific code throughout your project
The provider can be swapped out without having to change any client code
Developers have skills that can be easily transferred between projects despite using different data stores
New developers on the team can get up to speed with the code base very quickly

To get a clearer idea, some examples of membership provider implementations could be powered by a sql server database, oracle database, web service or even xml files. The code to implement all of these providers would look very different but the code to use it from the front end would all be the same. Microsoft asp.net ships with two providers by default, a SQL powered one and one that runs on top of an Active Directory.

The SqlMembershipProvider implementation

As you will see in the MSDN documentation the official data type is the .net base class Object. The individual provider is then free to implement their ProviderUserKey in any format which inherits from Object.

So as long at you know the data type being used by your provider you can simply cast the ProviderUserKey into the correct data type and read the information.

There is one final catch with the SqlMembershipProvider; it uses a GUID data type. The GUID doesn't have a parameterless constructor which means you cannot cast it directly, you have to new up an instance of the class. This is demonstrated in the code sample below:

MembershipUser currentUser = Membership.GetUser();
GUID userKey = null;

if(currentUser != null)
{
   userKey = new GUID(currentUser.ProviderUserKey);
}

Why would you use this information?

The ProviderUserKey is a unique identifier and is quicker to match than the UserName column. The ProviderUserKey is a uniqueidentifier sql datatype and the UserName is an nvarchar[255].

Also consider the situation where a user signs up to your website, contributes some content to the community and then closes their account. The username is available again which could mean that you end up attributing data from another users contributions to the wrong account. The ProviderUserKey is guaranteed to be a unique identifier.

Membership.GetUser()

Once you have a membership ProviderUserKey you can use it with the Membership.GetUser() method. An overload is provided which accepts this; Membership.GetUser(Object providerUserKey).

One possible scenario is that you store the retrieved GUID in a session variable at the start of a page and then each reload you have a quicker way of looking up the users details.

SOLVED: TF31003 error when trying to connect to Team Foundation Server 2010 Beta 2

2009-12-05T00:53:00.001Z

Welcome searchers! This post is not exactly light reading for the casual .net enthusiast so I will presume that if you're reading this you have probably landed here via a search engine after having a TF31003 problem crop up.

Installed software / background

Vista 64 bit
VS 2010 beta 2
TFS 2010 beta 2
Single server / basic installation
No errors on install
Cannot log in to the TFS system at all - no combination of user accounts will be accepted

Scenario

At any login point within TFS (such as in the add server dialog, or the Team Foundation Server Administration Console > Application Tier > Administer Group Membership link) you get an error pop up that contains the following message:

TF31003: Your user account does not have permission to connect to the Team Foundation Server at http://yourcomputer:8080/tfs. Ask your server administrator to add the appropriate permissions to your account.

Cause of the problem

It turned out that issue was that the account I installed my TFS server in didn't have a password in it and the installer silently failed to add the required permissions to the account.

Solution

The solution is to create a new administrator account on your computer and then use a command line tool called tfsconfig.exe to add the required permissions to this account post-install.

Firstly you need to open up a command window in:

C:\Program Files\Microsoft Team Foundation Server 2010\Tools\

Read my tip which explains an easy way to open a command window here in Windows Vista if you aren't sure how to do this.

You then need to execute the following command:

tfsconfig.exe accounts /add /account:"yourAccount" /accountType:applicationTier /password:yourPassword

Replace yourAccount with your account name that you created. If you have spaces in your account name you must put speech marks around the account name as demonstrated above. If you are on a domain (such as a corporate network) you might have to enter your domain such as "someDomain\yourUsername". You should be able to figure this out based on the username and password you use to login to windows. I guess its not very likely that you will have a computer on a domain without a password so this probably was a wasted sentence for everyone who reads this.

Replace yourPassword with the password you assigned to the account.

Press enter and you will see a page or two of text coming up while it reports all the places it is changing the configurations to.

m_requiredInputs

If you see only a few lines of text after you issue the command in the last section and it ends with m_requiredInputs in red text then you have mistyped.

In my case it turned out that I was typing add instead of /add - it let me get away without a forward slash at the start of accounts though.

Ok well I hope this problem matches your problem and you are solved and on the way to starting out on your TFS journey. I am very excited to play with all the features I have read about so lets both go and make a start now!

Alternative version of this post

I wrote an abbreviated version of this post as soon as I solved the problem so that a) I wouldn't forget and b) it would be sure to catch the eye of the TFS2010 developers. You can read it over on the official forums at:

http://social.msdn.microsoft.com/Forums/en/tfssetup/thread/8e103318-4ce3-49be-9602-09d65ae72889

How to automatically track events with Google Analytics and jQuery

2009-12-02T23:04:00.001Z

Update

<script type='text/javascript'>
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type='text/javascript'>
try {
var pageTracker = _gat._getTracker("UA-XXXXXXX-X");
pageTracker._trackPageview();
} catch(err) {}</script>

Introduction

Just in case it hasn't occurred to you - GA is an abbreviation for Google Analytics.

What does the Event Tracking do that normal Analytics doesn't?

It is worth remembering that a maximum of 500 events can be tracked per user per visit so you shouldn't try to track events that happen very frequently.

You should now see that this is a potentially valuable feature to master.

_trackEvent

The way to track an event within Google Analytics is to call the _trackEvent() method on the pageTracker object.

The method takes several parameters - category, action, label and value.

category	string	The category is a general category (in my code I have used "Sample Application" and "Image Enlargement" as my categories).
action	string	The action is a specific action for the event (such as "Download", "Click", "Play", "Vote", etc).
label	string (optional)	If you want to record something specific like the filename of the video being played then you can put this in the label parameter.
value	integer (optional)	This last type is if you want to assign a specific value to the event such as somebody you can make £5 in advertising each time somebody watches one of your videos.

A simple page tracker event might look like this:

pageTracker._trackEvent("Videos", "Play", "Cat falls off table.avi", 5);

This would assign a value of 5 dollars and attribute it to a play of a video called "Cat falls off table.avi".

Planning your events

Look at the code

Now that you understand the background, lets take a look at the code I have implemented in my blog to track these items and then afterwards I will go over the code highlighting the major features.

<script src='http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js' type='text/javascript'></script> 
<script type='text/javascript'>
/* <![CDATA[ */
$(document).ready(function () {
    SetupGoogleAnalyticsTrackEvents();
});

function SetupGoogleAnalyticsTrackEvents()
{
    TrackEventsForCodeSampleDownloads();
    TrackEventsForImageClicks();
}

function TrackEventsForCodeSampleDownloads()
{
    var FilterByBlogSampleHref = "href^='http://cid-15f731b049c8a797.skydrive.live.com/self.aspx/BlogExamples/'";
    var FilterByRarFileExtension = "href$='.rar'";
    
    $("a[" + FilterByBlogSampleHref + "][" + FilterByRarFileExtension + "]").click(function() {
        var SampleFileName = ExtractFileNameFromUrl($(this).attr("href"));
        TrackEvent("Sample Application", "Download", SampleFileName);
    });
}

function TrackEventsForImageClicks()
{
    TrackEventByFileExtension(".gif");
    TrackEventByFileExtension(".jpg");
    TrackEventByFileExtension(".jpeg");
    TrackEventByFileExtension(".png");
}

function TrackEventByFileExtension(FileExtension)
{
    $("a[href$='" + FileExtension + "']").click(function() {
        var ImageFileName = ExtractFileNameFromUrl($(this).attr("href"));
        TrackEvent("Image Enlargement", "Click", ImageFileName);
    });
}

function ExtractFileNameFromUrl(Url)
{
    // Note this code assumes
    //   - that the url doesnt contain a query string
    //   - that a real url has been passed in
    //   - that the url has a filename and isnt a folder
    var SplitUrl = Url.split('/');
    
    var FileName = SplitUrl[SplitUrl.length-1];
    
    return FileName;
}
        
function TrackEvent(Category, Action, Label)
{
   pageTracker._trackEvent(Category, Action, Label);
}
/* ]]> */
</script>

Pseudo code theory

Lets take a quick run through the concept behind this script so you can see why I have structured it the way I have. The main method is called from a jQuery ready event so if you have put your analytics tag just before a </body> tag then pageTracker will be setup by the time this executes.

The code registers click events with all of the links it finds matching these criteria. Then when you click on one of these links the click handler fires and calls the track event method.

Double where clauses

I needed to filter the links to my sample applications by two criteria. First it needed to start with my Sky Drive url and secondly it should end with a .rar extension.

While researching how to do this I found that you can chain up multiple [] where clauses. The code that uses this technique looks like this:

$("a[" + FilterByBlogSampleHref + "][" + FilterByRarFileExtension + "]");

Ends with operator

The other cool trick I found which shows the power of jQuery was the ends with operator. This looks like this:

$("a[href$='" + FileExtension + "']");

Layout of the code (Refactored)

I extracted the code in TrackEventByFileExtension() so that I could reduce duplication in my code.

How to use this in your projects

The sample code that I have presented above is really tailored to my specific event tracking requirements (which I completely fabricated so that I had something to track).

Even if you have only a limited understanding of javascript I think this should provide you with enough information to pull out the bits you need to track your own custom events automatically.

More information

http://www.conversionuniversity.com/ - Conversion University
http://code.google.com/apis/analytics/docs/gaJS/gaJSApiEventTracking.html - Event Tracking API documentation

Update - VS2010 Beta 2 – Validation ($SCHEMA$): Element is not supported

2009-11-28T11:30:00.001Z

Note: This is an update to an earlier post based on feedback that I have received from various commenter's.

If you have adopted beta 2 of Visual Studio 2010 then you might have spotted a large amount of green squigglies underneath the tags in your markup. When you have over them you see a message like this:

Validation ($SCHEMA$): Element 'div' is not supported

This appears to be a bug in the system. When this is occurring your autocomplete will not have any html element – only asp.net controls and snippets – which makes it pretty hard to do your work.

To fix this error without resetting all of your Visual Studio configuration settings back to factory defaults follow these steps:

Click Tools | Options…
If you have "Show all settings" unticked then you can click the Validation node.

Otherwise you will have to click Text Editor | HTML | Validation.
Make a selection in the Target: drop down (I picked XHTML 1.0 Transitional).
Click OK to save your changes.

Run Tings Proper

SOLVED: “An error was encountered” in WSAT (Website Admin Tool)

Problem

Solution

A straightforward method to detecting RSS and Atom feeds in websites with HtmlAgilityPack

A little background

Syndication feeds? RSS? Atom?

Feed discovery

Writing the application

Download the HtmlAgilityPack – NuGet

Download the HtmlAgilityPack – Manual

Lay out the user interface

Making a DataObject

Adding bindable public properties

Preparing the Select() statement

Url Validation

Using HtmlDocument and HtmlWeb

Link tag extraction

Preparing for Data Binding

Putting our Select() together

How to bind our results to the GridView

The final code

What can I do with this data once I have found it?

Download the sample application

Conclusion

More in this series

SOLVED: JavaScript error .reset is not a function

PROBLEM

SOLUTION

SOLVED: Visual Studio inserts a text snippet instead of an EntityDataSource

Problem

Solution

SOLVED: Firebug Inspect Element Keyboard Shortcut Clash

Background

Problem

Solution

Summary

Did I help? Gauge if your articles are solving real world problems with Google Analytics and jQuery

Introduction

Implementation Overview

Markup and Styling

jQuery code

Google Analytics Seam

Old Google Analytics Code

Blogger Widget

Seeing Your Feedback Levels

Conclusion

Further Reading

Tracking scroll depth to reveal content engagement in Google Analytics async snippet

Updated article - async snippet version

Introduction

What is Event Tracking?

_trackEvent

Planning your events

Taking the first swing

Duplicate events

FINAL CODE - Tracking the event and wrapping up

Further reading

My Website Design Doesn't Look The Same In All Browsers!

Valid Doctype

W3C Validation

CSS Reset

Don’t Use Hacks

Conditional Comments

DOM Inspection Addons

Testing Older Versions

Cross Browser Testing Tools

Check Your Analytics

Ask In Forums

Conclusion

How to automatically track events with Google Analytics async snippet and jQuery

Updated article - async snippet version

Introduction

What does the Event Tracking do that normal Analytics doesn't?

_trackEvent

Planning your events

Look at the code

Pseudo code theory

Double where clauses

Ends with operator