by Andreas

Selenium – Working with dynamic ASP.NET controls

Selenium LogoI recently had to find a replacement for our extensive Watin UI test framework. The reason being problems as a result of the IE11 release, and that Watin seems to have been abandonded in April 2011.

The choice landed on Selenium, which seems to be the de facto standard these days. It allows you to test in a variety of browsers, and is very much alive and kicking. There’s a .NET web driver available as a NuGet package, which makes it very easy to get started. But this isn’t a post about how great (or not?) Selenium is, it’s just a tip for those who’s using it for ASP.NET projects and came across the same annoyance as I did.

Selenium doesn’t handle dynamic ASP.NET controlId’s very well. It says in the docs that they recommend using static id’s, but seriously.. For projects before ClientIdMode was supported (< 4.0) this simply wasn’t an option. And should we go through thousands of lines of code and change this? I think not.

The solution is using XPath. Which, in Selenium’s defence, is supported. But it’s ugly, compared to using RegEx which was supported by Watin. Take the following example:

<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>


To reference this textbox control, Selenium out-of-the-box requires this:

[csharp]IWebElement e = driver.FindElement(By.XPath("//input[@id[substring(.,string-length()-7)=’txtEmail’]]"));[/csharp]


That’s not pretty. And you have to calculate the length of the controlId, take zero base into consideration (8 minus 1 = 7) and you will hopefully get a working reference. My preferred solution would be to add an extension to the By class, like By.RegEx() or something. But it’s a static class and extension methods require you to create an instance of it, so I had to scrap that idea (something for the next version of C#, Microsoft??)

My second best solution was a set of helper methods to generate the ugly XPath string. I’ve implemented a couple of options, where one get’s a reference without taking the type of control into consideration while the other allows you to look specifically for a textbox (input).

[csharp]public class SeleniumTools

public static string GetXPath(string controlId)
return GetXPath(controlId, "*");

public static string GetXPathForTextBox(string controlId)
return GetXPath(controlId, "input");

private static string GetXPath(string controlId, string controlType)
return "//" + controlType + "[@id[substring(.,string-length()-" + (controlId.Length – 1) + ")=’" + controlId + "’]]";


At least this makes it a bit easier to read, and you don’t have to work out the XPath string manually:

[csharp]IWebElement e = driver.FindElement(By.XPath(SeleniumTools.GetXPath("txtEmail")));[/csharp]

by Joakim

Detecting Browser Types and Browser Capabilities in Asp.Net

The following helper class allows you to detect browser types and browser capabilities in Asp.Net. It works in both MVC-controllers/views and WebAPI-controllers (and I would think it should work with WebForms as well).

using System;
using System.Collections;
using System.Collections.Specialized;
using System.Web;
using System.Web.Configuration;

namespace MyProject.Helpers
    public static class BrowserInfoHelper
        public static string GetUserAgent()
            return HttpContext.Current.Request.UserAgent;

        public static HttpBrowserCapabilities GetCapabilities()
            var capabilities = new HttpBrowserCapabilities();

            var hashtable = new Hashtable(180, StringComparer.OrdinalIgnoreCase);
            hashtable[string.Empty] = GetUserAgent();
            capabilities.Capabilities = hashtable;

            var capabilitiesFactory = new BrowserCapabilitiesFactory();
            var headers = new NameValueCollection();
            capabilitiesFactory.ConfigureBrowserCapabilities(headers, capabilities);
            capabilitiesFactory.ConfigureCustomCapabilities(headers, capabilities);

            return capabilities;


Then use it, for example in an MVC-view, like so;

    var browserCapabilities = BrowserInfoHelper.GetCapabilities();
    var browserIsOldIE = browserCapabilities.Browser.Equals("IE", StringComparison.InvariantCultureIgnoreCase) && browserCapabilities.MajorVersion < 9;
@if (browserIsOldIE)
    <div>Please upgrade your browser!</div>
by Andreas

Aborting AJAX requests in ASP.NET applications

imageI’ve been working on a pretty extensive web application lately, build on top of the .NET framework but with around 80% client side functionality (KnockoutJS, jQuery). There’s a lot of AJAX calls back to the server (naturally.. ) and one of the challenges I faced was that ASP.NET refused to navigate away from a page until all AJAX requests were processed. I did some searching and found out that an AJAX request could be aborted by adding some functionality to the window.onbeforeunload event:

window.onbeforeunload = function() {
    if (ajaxRequest !== undefined) {


By adding some logging to console I could clearly see that as soon as I clicked a link to navigate away this event was called and processed. But still nothing happened until the request had fully been processed – which made me think this had to do with the browser. Wrong assumption, and when writing this it seems very obvious to me why but then again retrospect is an ugly thing.

A bit more research and it turned out that this was all due to ASP.NET session state (which is enabled by default). Because of the session state my site serializes all requests within the same session, so the request for a new page would not be processed until the first one had completed. Turning session state off completely was out of the question, but by changing my .ashx handler (which receives all my ajax requests) to implement the IReadOnlySessionState interface rather than IRequiresSessionState there is no lock on the current session and concurrent requests are made possible.

Something to keep in mind though is that aborting an ajax request obviously doesn’t stop the server from processing it.

by Joakim

JavaScript file missing from resource bundle (ASP.NET Web Optimization Framework)

I came across some odd behavior related to the Microsoft ASP.NET Web optimization Framework the other day, when I was creating a JavaScript resource bundle in an application I was working on. When I ran the website with optimizations enabled, the script file showed up as part of the bundle, but if I turned optimizations off the script include for the file in question was nowhere to be found.

For the application I was working on, which was only a proof of concept, I had simply copied the minified version of the JavaScript libraries I needed into the Script manually. I then included my libraries in a script bundle like so;

If you have used this bundling functionality before, you probably know that if you include a JavaScript file in a bundle and you enable optimizations, the file will be minified and added to a single resource together with any other JavaScript files in the bundle. During the minification process the system will look for other files in the directory called exactly the same filename as the file in question only with .min.js at the end instead of only .js. If it finds a file like this, it assumes that this it is a pre-minified version of the file in question and uses it instead of minifying the original file.

However, if you add a file to your bundle that has a name that ends in .min.js (like I did) and optimizations aren’t enabled (e.g. debug is set to true in web.config and BundleTable.EnableOptimizations has not been set to true), this file will be ignored (i.e no script include will be generated for it in your html).

by Andreas

KnockoutJS – how to force binding refresh / re-evaluation

Observable bindings in KnockoutJS get re-evaluated when the focus is changed in a form, for instance when you click a button or use TAB to move from one input field to the next. When KnockoutJS is used in combination with an ASP.NET panel control where a DefaultButton is defined, re-evaluation of observable bindings is not performed when the user clicks ENTER to trigger the button click event. As a result of this, a value entered in an input field that is bound to the view model will not be registered if the user doesn’t navigate (move focus) away from the field first. 

A work-around for this is to use jQuery (or pure javascript) and programmatically set the focus to a different control, for instance the button itself when the event is fired.

self.addNewTimeRegEntry = function () {
    // set focus to button control to force re-evaluation
    $("#<%= btnAddRegEntry.ClientID %>").focus();

    ... // continue as normal

The button click event is bound to the addNewTimeRegEntry function above (through the KnockoutJS framework), and by moving the focus all variables will be refreshed before further processing is done.

by Joakim

Could not load file or assembly 'xyz' or one of its dependencies. An attempt was made to load a program with an incorrect format.

Having recently performed a complete wipe and OS re-install/upgrade on my work computer, I also had to get all my projects etc. up and running again. After getting the source for one of the ASP.NET applications I’m working on, I built the source and ran it using the VS Development Server, no problem at all. However, when I set everything up manually in IIS (not IIS Express, that also also worked like a charm), I got the the beautiful yellow screen of death. And since it had been a while since I set this particular project up to run in IIS on my computer, the error dumbfounded me for a while.


Visual Studio did provide me with a warning when building the solution though, which jogged my memory.


One of the project dependencies was built specifically for the x86 architecture, and when running the web app in IIS the default setting for any Application Pool is NOT to enable 32-bit applications (at least on a 64-bit computer). This is easy to fix though, open up IIS Manager, find the App Pool in question, go into “Advanced Settings” and change the value for “Enable 32-Bit Applications” to “True” (or alternatively, and perhaps even better, replace the offending reference dll with a compatible version if you can).


No more yellow screen of death! Smile

by Joakim

Creating a simple form wizard in ASP.NET MVC 4

UPDATE: As of jquery.validation version 1.8+ hidden input fields are not validated by default, which means that the wizard form is submitted without client-side validation being performed. The solution is to set the default back to validating everything in the JavaScript section by including the following line; $.validator.setDefaults({ ignore: "" });
I’ve also added a sample project at the bottom of this post.

For small MVC sample application I’m fiddling with on my spare time, I wanted to be able to split my form up in smaller parts, much like the ASP.NET Wizard Control that is available to you when you are using Web Forms.

Now, there are quite a few jQuery plugins out there that does this for you (like the Smart Wizard by TechLaboratory), but I wanted to create my own (based on some sample code created by Nadeem Afana) just for fun (and to improve my jQuery skills).

Basically I wanted a pretty simple Wizard, where I break up the input fields in a form in two or more steps, and display a summary at the end. I wanted the users to be able to step through the wizard without filling in required fields (just so they can get a grasp of the amount of info they would need to fill in), but of course they should be stopped when trying to submit it if anything is missing. I also wanted to avoid going to the server to retrieve a partial view for the summary.

The model I will use is pretty straight forward. It contains some fields for the user to fill inn, that I will split up in “Personal Details”, “Address” and “Contact Details”:

public class SimpleWizardFormModel : IValidatableObject
    [Display(Name = "First Name")]
    public string FirstName { get; set; }

    [Display(Name = "Last Name")]
    public string LastName { get; set; }

    [Display(Name = "Street Address")]
    public string Address { get; set; }

    [Display(Name = "Postal Code")]
    public string PostalCode { get; set; }

    [Display(Name = "City")]
    public string City { get; set; }

    [Display(Name = "Home Phone")]
    public string Phone { get; set; }

    [Display(Name = "Mobile Phone")]
    public string Mobile { get; set; }

    [Display(Name = "I'm at least 18 years old?")]
    public bool HasTurned18 { get; set; }

    public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
        if (!HasTurned18)
            yield return new ValidationResult("You must be 18 or older.", new[] { "HasTurned18" });

The view isn’t very complicated either:

@model SimpleWizardFormModel
@section head
    <style type="text/css">
        .wizard-step { display: none; }
        .wizard-confirmation { display: none; }
        .wizard-nav {  }
        .wizard-nav input[type="button"] { width: 100px; }
@section script
    <script type="text/javascript">
<h2>Simple Wizard Form</h2>
@using (Html.BeginForm())
        <div class="wizard-step">
            <h4>Personal Details</h4>
                    @Html.LabelFor(m => m.FirstName)
                    @Html.TextBoxFor(m => m.FirstName)
                    @Html.ValidationMessageFor(m => m.FirstName)
                    @Html.LabelFor(m => m.LastName)
                    @Html.TextBoxFor(m => m.LastName)
                    @Html.ValidationMessageFor(m => m.LastName)
                    @Html.LabelFor(m => m.HasTurned18)
                    @Html.CheckBoxFor(m => m.HasTurned18)
                    @Html.ValidationMessageFor(m => m.HasTurned18)
        <div class="wizard-step">
        <div class="wizard-step wizard-confirmation">
            <div id="field-summary"></div>
            <div id="validation-summary">
                <span class="message-error">Please correct the following errors;</span>
        <div class="wizard-nav">
            <input type="button" id="wizard-prev" value="<< Previous" />
            <input type="button" id="wizard-next" value="Next >>" />
            <input type="button" id="wizard-submit" value="Submit" />

I’ve cut out the javascript as I will get back to that later, as well as a couple of the wizard steps since they are look just like step 1 (just with other input fields). Inside my Layout.cshtml-file I’m importing jquery, jquery.validate, jquery.validate.unobtrusive, and rendering the “head”-section (in the head-tag) and “script”-section (just before body-close-tag) seen above.

The most important “feature” of the view are the divs which have been given the “wizard-step”-class. These contains the various input fields and will become the (as the class name suggests) steps in the wizard that is presented to the user. Initially all these divs are hidden from the user (note the display –> none in the css styles), and the javascript will take care of showing the div that represents the current wizard step to the user.

And now the stuff which actually performs some work, the javascript:

function DisplayStep() {
    var selectedStep = null;
    var firstInputError = $("input.input-validation-error:first"); // check for any invalid input fields
    if (firstInputError.length) {
        selectedStep = $(".wizard-confirmation");
        if (selectedStep && selectedStep.length) { // the confirmation step should be initialized and selected if it exists present
        else {
            selectedStep = firstInputError.closest(".wizard-step"); // the first step with invalid fields should be displayed
    if (!selectedStep || !selectedStep.length) {
        selectedStep = $(".wizard-step:first"); // display first step if no step has invalid fields

    $(".wizard-step:visible").hide(); // hide the step that currently is visible
    selectedStep.fadeIn(); // fade in the step that should become visible

    // enable/disable the prev/next/submit buttons
    if (selectedStep.prev().hasClass("wizard-step")) {
    else {
    if ("wizard-step")) {
    else {

The first method in my javascript, called “DisplayStep”, takes care of displaying the correct wizard step (typically this means the first step) when the view is loaded. if the view is loaded after submitting it to the server and server validation errors are found however, it will show the confirmation step if there is one, and if not it will show the first step which contains erroneous input. Once the correct step to show is found, it will decide where this step is located in relation to the other steps and show or hide the “previous”, “next” and “submit” buttons.

function PrevStep() {
    var currentStep = $(".wizard-step:visible"); // get current step

    if (currentStep.prev().hasClass("wizard-step")) { // is there a previous step?

        currentStep.hide().prev().fadeIn();  // hide current step and display previous step

        $("#wizard-submit").hide(); // disable wizard-submit button
        $("#wizard-next").show(); // enable wizard-next button

        if (!currentStep.prev().prev().hasClass("wizard-step")) { // disable wizard-prev button?

The “PrevStep” method is pretty straight forward. It just finds the current step, hides it, shows the previous one, and shows/hides the buttons. No validation is performed before navigation to the previous step, but if desired, this could be done just like in the “NextStep” shown below.

function NextStep() {
    var currentStep = $(".wizard-step:visible"); // get current step

    var validator = $("form").validate(); // get validator
    var valid = true;
    currentStep.find("input:not(:blank)").each(function () { // ignore empty fields, i.e. allow the user to step through without filling in required fields
        if (!validator.element(this)) { // validate every input element inside this step
            valid = false;
    if (!valid)
        return; // exit if invalid

    if ("wizard-step")) { // is there a next step?

        if ("wizard-confirmation")) { // is the next step the confirmation?

        currentStep.hide().next().fadeIn();  // hide current step and display next step

        $("#wizard-prev").show(); // enable wizard-prev button

        if (!"wizard-step")) { // disable wizard-next button and enable wizard-submit?

The “NextStep” is a little more complicated. In addition to performing pretty much the same tasks as the “PrevStep” (only the opposite), it validates all input fields in the current step, and if there are any errors, you won’t be allowed to go to the next step. It only validates none empty fields however, i.e. the required rule if applicable for a given field isn’t evaluated. This is done because I wanted the user to be able to step through the entire form to see how much needs to be filled in (you can easily change this by changing the part of the script where the input fields are found). If the next step has been given the “wizard-confirmation”-class a call is also made to setup/update the confirmation (the specifics of this function will be explained further down).

function Submit() {
    if ($("form").valid()) { // validate all fields, including blank required fields
    else {
        DisplayStep(); // validation failed, redisplay correct step

The last function related to navigation is “Submit”. This function validates the entire form (including required fields), and submits the form if all is good, or calls “DisplayStep” to show the confirmation step (if there is one), or the first step with errors on it (in cases where there are no confirmation step).

function UpdateConfirmation() {
    var fieldList = $("<ol/>");
    $(".wizard-step:not(.wizard-confirmation)").find("input").each(function () {
        var input = this;
        var value;
        switch (input.type) {
        case "hidden":
        case "checkbox":
            value = input.checked;
            value = input.value;
        var name = $('label[for="' + + '"]').text();
        fieldList.append("<li><label>" + name + "</label><span>" + value + "&nbsp;</span></li>");

function UpdateValidationSummary() {
    var validationSummary = $("#validation-summary");
    if (!validationSummary.find(".validation-summary-errors").length) { // check if validation errors container already exists, and if not create it
        $('<div class="validation-summary-errors"><ul></ul></div>').appendTo(validationSummary);
    var errorList = $(".validation-summary-errors ul");
    errorList.find("li.field-error").remove(); // remove any field errors that might have been added earlier, leaving any server errors intact
    $('.field-validation-error').each(function () {
        var element = this;
        $('<li class="field-error">' + element.innerText + '</li>').appendTo(errorList); // add the current field errors
    if (errorList.find("li").length) {
        $("#validation-summary span").show();
    else {
        $("#validation-summary span").hide();

The “UpdateConfirmation” function (and the “UpdateValidationSummary”-function called by this function) takes care of setting up / displaying the confirmation step. The “UpdateValidationSummary” function finds all input errors (if any) and adds them to the server validation error list (creating this list if it doesn’t already exist). The “UpdateConfirmation” function, in addition to calling “UpdateValidationSummary”, finds all input fields and associated labels and created a list with them that is displayed to the user.

$(function () {
    // attach click handlers to the nav buttons
    $("#wizard-prev").click(function () { PrevStep(); });
    $("#wizard-next").click(function () { NextStep(); });
    $("#wizard-submit").click(function () { Submit(); });

    // display the first step (or the confirmation if returned from server with errors)

Last part of the javascript is where we hook up handlers for the navigation buttons and calls the function to display the first (or correct) step when the view is first loaded.

That was all the code needed, not to bad if I say so myself.

A couple of screens to show how it looks in action (first picture shows one of the steps, while the second picture shows the confirmation step):


As I said in the beginning, this wizard is pretty basic, but it works pretty good. In the future I might add a navbar that lists all the wizard steps at the top, highlights any steps that contain errors, and allows the user to navigate directly to given step without needing to use the “next” and “prev” buttons.

Download sample code:

by Joakim

Microsoft Goes (More) Open Source

Great news from Redmond this morning, as Microsoft announced that they will release the source code for ASP.NET Web API and ASP.NET WebPages (Razor) under the Apache 2.0 open source license (ASP.NET MVC has been available under an open source license since version 1). The source code is already available on CodePlex using Git as the repository; (Git support on CodePlex was announced just last week, and is also pretty cool news).

For more details take a look at Scott Guthrie’s blog or Scott Hanselman’s blog (Hanselman also some nice info about why Microsoft is doing this, why they are putting it on CodePlex, etc.)

by Joakim

Validation of required checkbox in Asp.Net MVC

Why would you want to have a required checkbox, i.e. a checkbox that user would have to check? Well, a typical example would be that you have some sort of terms associated with submitting a form that the user has to agree to.

You might think that decorating a boolean property on one of your MVC models with a RequiredAttribute, would mean that if you presented that property in your view as a checkbox, that would require the user to click that checkbox before submitting the form. This is not the case however. If you take a look at the implementation of the RequiredAttribute it is actually casting the value to validate into a string and checking the string length. If it can’t cast the value to a string, it will just return true for IsValid.

It is quite easy however to create your own custom validation attribute that you could decorate your boolean property with. The following code checks if the decorated property is a bool, and if so, requires it to have been set to true;

public class BooleanRequiredAttribute : ValidationAttribute, IClientValidatable
    public override bool IsValid(object value)
        if (value is bool)
            return (bool)value;
            return true;

    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(
        ModelMetadata metadata,
        ControllerContext context)
        yield return new ModelClientValidationRule
                                ErrorMessage = FormatErrorMessage(metadata.GetDisplayName()),
                                ValidationType = "booleanrequired"

Notice the GetClientValidationRules-method above where we specify the error message to display if client-side validation fails, and what the validation type is. The value we provide as the validation type will be rendered as the name of the rule in the HTML element, and will be used further down to tell jQuery how to validate this property.

After creating the new validation attribute, we need to apply it to a boolean property on out model;

[BooleanRequired(ErrorMessage = "You must accept the terms and conditions.")]
[Display(Name = "I accept the terms and conditions")]
public bool TermsAndConditionsAccepted { get; set; }

Next, create a simple view with a form that includes you boolean property;

@model MyModel@using (Html.BeginForm())
        <legend>Terms and Conditions</legend>
        @Html.ValidationSummary(true, "Please correct the errors and try again.")
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Fusce facilisis ullamcorper consequat. Vestibulum non sapien lectus.
            Nullam at quam eu sapien mattis ultrices.
                @Html.CheckBoxFor(m => m.TermsAndConditionsAccepted)
                @Html.LabelFor(m => m.TermsAndConditionsAccepted, new { @class = "checkbox" })
                @Html.ValidationMessageFor(m => m.TermsAndConditionsAccepted)
        <input type="submit" value="Submit" />

Lastly, in order for client-side validation to work, you need to include the following script in your view (or you can just put line 3 in a javascript file that you reference);

<script type="text/javascript">
    (function ($) {
        $.validator.unobtrusive.adapters.addBool("booleanrequired", "required");
    } (jQuery));

This just registers a new validation adapter for the boolean required attribute, where the first parameter is the adapter name and the second parameter is the name of jQuery validate rule. The adapter name should match the value we specified earlier as the validation type, and the jQuery validation required-rule will require the user to check the checkbox.

That’s it! This will make sure that the checkbox is checked by the user client-side (using jQuery unobtrusive validation*) and that the boolean property is set to true server-side when the form is submitted to the server.

*The ClientValidationEnabled and UnobtrusiveJavaScriptEnabled application settings must be set to true in your web.config for client-side validation to work.

by Stian

Call ASP.NET AJAX page methods using jQuery

If you are used to working with MVC.NET and jQuery you might not want to start playing with the ScriptManager when you go back to writing an ASP.NET Web application again. Calling WebMethods using the ScriptManager will automatically add 100kb of Javascript to your page and will add three extra http requests per call! Of course, it is very simple to use, but so is the jQuery way as well, so if you are used to calling your actions directly with .ajax(), there is no reason not to .

To call ASP.NET page methods directly from jQuery without the need of a ScriptManager in your page, use the following:

Your jQuery code

   1:  var params = '{"firstname":"' + $("#firstname").val() + 
   2:               '", "lastname":"' + $("#lastname").val() + '"}';
   3:  $.ajax({
   4:      type: "POST",
   5:       url: "Default.aspx/SavePerson",
   6:       data: params,
   7:        contentType: "application/json; charset=utf-8",
   8:        dataType: "json",
   9:        success: function (msg) {
  10:            alert(msg.d)                      
  11:        }
  12:  });

Your serverside code

   1:  [WebMethod]
   2:  public static string SavePerson(string firstname, string lastename)
   3:  {
   4:      //do saving or wheatever
   5:      return "Some message back to client";
   6:  }


If you’re already using the ScriptManager for other purposes, there’s no harm in using its JavaScript proxy to call your page methods. However, if you aren’t using a ScriptManager or have already included jQuery on your page, I think it makes sense to use the more efficient jQuery method.