Stephen Walther on ASP.NET

ASP.NET MVC + Selenium + IISExpress

Stephen Walther — Thu, 22 Dec 2011 20:11:55 GMT

The goal of this blog entry is to explain how you can create integration tests for ASP.NET MVC applications by using a combination of Selenium WebDriver and IISExpress.

Integration tests are useful when you want to test an entire user story. For example, you might want to test whether a user can successfully add an item to a shopping cart. Adding an item to a shopping cart might require the execution of C# code, database code, and JavaScript code. Using an integration test, you can verify that the entire process of buying an item from your website works.

Typically, an integration test is contrasted with a unit test. A unit test is used to test a unit of code in isolation. A unit test is typically used to verify the behavior of a single method (Does the AddNumbers() method return the right value?). An integration test is used to test many components and methods working together (Can a user add an item to a shopping cart?).

Normally, unit tests are created by developers while they write the code for an application. Integration tests, in contrast, are typically written by Quality Assurance engineers after code has been written.

Another important difference between unit tests and integration tests are the speed of the tests. Unit tests must be fast. Typically, you run your unit tests each and every time a developer checks in code. Integration tests, in contrast, might be much slower than unit tests. Typically, you run all of your integration tests once a day in the middle of the night. Because integration tests require the execution of actual browsers, integration tests can be agonizingly slow.

The ASP.NET MVC framework was designed from the ground up to make it easy to write unit tests for your code. For example, you can unit test your controller actions without spinning up a web server.

On the other hand, the ASP.NET MVC framework has no built-in support for integration tests. If you want to write integration tests then you need a way to simulate the interactions of a web browser with your ASP.NET MVC application. In this blog entry, you learn how to use the open-source Selenium WebDriver testing framework to build integration tests which work with ASP.NET MVC.

Spinning Up IISExpress when Executing a Test

In an integration test, you perform a test against a live website. Therefore, the first problem that we must solve is how to launch a live website automatically when executing tests with Visual Studio.

======== Begin Note ======

Visual Studio supports a type of test called an ASP.NET Unit Test which starts the ASP.NET Developer Web Server (Cassini) automatically. In other words, an ASP.NET Unit Test does exactly what we want. You create an ASP.NET Unit Test by adding three special attributes to a test method:

[TestMethod()]

[HostType("ASP.NET")]

[UrlToTest("http://localhost:25153/Home/Index")]

[AspNetDevelopmentServerHost(@"C:\TestSelenium", "/")]

public void TestMethod1() {

…

}

Unfortunately, ASP.NET Unit Tests only work with ASP.NET Web Form applications and not ASP.NET MVC applications. The [URLToTest] attribute must point at an ASP.NET Web Forms page. This attribute does not work with ASP.NET MVC controller actions. Therefore, if we want to launch a web server when performing a test with an ASP.NET MVC application, we must take on the responsibility of launching the web server ourselves.

========= End Note ==============

We’ll start a live website by taking advantage of IISExpress. IISExpress is a lightweight version of IIS that you can start from the command-line. You get IISExpress automatically when you install Visual Studio 2010 Service Pack 1 using the Microsoft Web Platform Installer. IISExpress is also available as a separate download using the Web Platform Installer.

After you install IISExpress, you can run iisexpress.exe from the command line. Open a command prompt and switch to either your Program Files\IIS Express or Program Files (x86)\IIS Express directory (depending on your operating system). Next, enter the following command to launch a website located at the path c:\MyWebsite using port 2020:

iisexpress /path:c:\MyWebsite /port:2020

The IISExpress web server will keep running until you hit Q to quit. Each time you make a request against the MyWebsite site using a web browser, you’ll see the request logged to the window.

Warning: You can only have one instance of IISExpress open at a particular port at a time. If you attempt to open IISExpress with the same port number twice then you will get an error.

We want to automate this process of starting IISExpress so that we can start IISExpress automatically in our tests. Listing 1 contains a base class named SeleniumTest.

Listing 1 – SeleniumTest.cs (First Attempt)

using System;
using System.Diagnostics;
using System.IO;
using Microsoft.VisualStudio.TestTools.UnitTesting;

namespace TestSelenium.Tests {
    
    [TestClass]
    public abstract class SeleniumTest {

        const int iisPort = 2020;
        private string _applicationName;
        private Process _iisProcess;

        protected SeleniumTest(string applicationName) {
            _applicationName = applicationName;
        }

        [TestInitialize]
        public void TestInitialize() {
            // Start IISExpress
            StartIIS();
        }


        [TestCleanup]
        public void TestCleanup() {
            // Ensure IISExpress is stopped
            if (_iisProcess.HasExited == false) {
                _iisProcess.Kill();
            }
        }



        private void StartIIS() {
            var applicationPath = GetApplicationPath(_applicationName);
            var programFiles = Environment.GetFolderPath(Environment.SpecialFolder.ProgramFiles);

            _iisProcess = new Process();
            _iisProcess.StartInfo.FileName = programFiles + "\\IIS Express\\iisexpress.exe";
            _iisProcess.StartInfo.Arguments = string.Format("/path:\"{0}\" /port:{1}", applicationPath, iisPort);
            _iisProcess.Start();
        }


        protected virtual string GetApplicationPath(string applicationName) {
            var solutionFolder = Path.GetDirectoryName(Path.GetDirectoryName(Path.GetDirectoryName(AppDomain.CurrentDomain.BaseDirectory)));
            return Path.Combine(solutionFolder, applicationName);
        }


        public string GetAbsoluteUrl(string relativeUrl) {
            if (!relativeUrl.StartsWith("/")) {
                relativeUrl = "/" + relativeUrl;
            }
            return String.Format("http://localhost:{0}{1}", iisPort, relativeUrl);
        }


    }
}

Notice that the class in Listing 1 has a required parameter for its constructor. You must specify the name of the application being tested. The base class in Listing 1 assumes that your solution contains at least two projects: the MVC project being tested and the test project itself (see Figure 2). The GetApplicationPath() method calculates the path of the ASP.NET MVC application being tested relative to the path of the Test project.

Figure 2 – Solution Structure

The SeleniumTest class includes a StartIIS() method which uses the .NET framework Process class to start IISExpress in a new process. The StartIIS() method is called by the TestInitialize() method. Immediately before each test is run, a new instance of IISExpress is started. In the TestCleanup() method, after the test completes, the IISExpress instance is stopped.

The SeleniumTest class is a base class. Listing 2 illustrates how you can use the SeleniumTest base class with an actual test.

Listing 2 – A simple integration test

using System.Net;
using Microsoft.VisualStudio.TestTools.UnitTesting;
using OpenQA.Selenium;

namespace TestSelenium.Tests.Controllers {

    [TestClass]
    public class HomeControllerTests:SeleniumTest {

        public HomeControllerTests() : base("MyMVCApp") { }

        [TestMethod]
        public void TestMethod1() {
            // Arrange
            var client = new WebClient();
            
            // Act
            var result = client.DownloadString(this.GetAbsoluteUrl("/home/index")
);

            // Assert
            StringAssert.Contains(result, "hello");
        }

    }
}

The integration test is contained in the TestMethod1() method. This method creates a new instance of the .NET Framework WebClient class. The WebClient class represents a simple Web Browser. Next, the WebClient class is used to perform a GET request against an ASP.NET MVC controller action named /home/index. If the ASP.NET MVC view returned by the /home/index action includes the string “hello” then the test completes successfully (see Figure 3).

Figure 3 – An integration test with a successful conclusion

Each time you run the tests in your solution, IISExpress is started automatically. In fact, IISExpress is started and stopped for each test. This can make running the tests slow. However, by stopping and starting IISExpress with each test, you are providing more test isolation. For example, if one test crashes IIS then IIS will work again for the next test.

In this section, we used the WebClient class to make requests against our ASP.NET MVC application. This is a useful, but limited class. We want to be able to simulate actual browsers such as Internet Explorer, Firefox, and Google Chrome. We want to be able to easily test JavaScript/jQuery code. In the next section, we’ll use Selenium WebDriver to drive actual web browsers in our integration tests.

Using Selenium WebDriver

Selenium is an open-source browser automation testing framework. You can use Selenium WebDriver to control (drive) browsers such as Internet Explorer, Firefox, and Google Chrome from C# code. It is the most mature integration testing framework.

The easiest way to install Selenium WebDriver is to use NuGet. Within Visual Studio, select the menu option Tools, Library Package Manager Console to open the Package Manager console. Within the Package Manager Console, make sure that you select your Test project from the dropdown list. Finally, execute the following command to install Selenium Web Driver (see Figure 4):

Install-Package Selenium.WebDriver

Figure 4 – Installing Selenium WebDriver

You can use Selenium WebDriver to control instances of Internet Explorer, Firefox, Google Chrome, and the Android browser. You don’t need to do any special configuration to start using Selenium Web Driver with Firefox.

If you want to use Selenium WebDriver with Google Chrome then you first need to download chromedriver.exe from the Chromium website and add chromedriver.exe to your Test project. You can download chromedriver.exe from the Chromium download page here:

http://code.google.com/p/chromium/downloads/list

Download the ChromeDriver server for win32 and add chromedriver.exe to your Test project.

Finally, to get Internet Explorer to work, you need to change the Protected Mode Settings for Internet Explorer. Open Internet Explorer and choose the menu option Tools, Internet Options and select the Security tab (see Figure 5). For each zone – Internet, Local intranet, Trusted sites, Restricted sites – you need to set Protected Mode to the same value (either checked or not checked).

Listing 5 – Changing Internet Explorer Protected Mode

After you get everything setup, you can use Selenium WebDriver to drive browsers by creating instances of the Selenium FirefoxDriver, ChromeDriver, and InternetExplorerDriver classes. Each of the driver classes implements the IWebDriver interface.

Imagine, for example, that you want to test the ASP.NET MVC in Listing 3. This view contains a button and a DIV tag. When you click the button, jQuery is used to display the hidden message in the DIV tag.

Listing 3 – An ASP.NET MVC View with jQuery

<button id="btn">Click</button>

<div id="msg" style="display:none">
    hello!
</div>

<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">

    $("#btn").click(function () {
        $("#msg").show();
    });

</script>

The view in Listing 3 is not a super advanced view, but it does contain features that are difficult to test without running an actual browser. The view requires JavaScript and jQuery.

In order to test the view, we need to start an instance of a web browser, click the button, and verify that the hidden message is displayed.

First, we need to modify our TestSelenium base class. The modified version of this class is contained in Listing 4.

Listing 4 – TestSelenium.cs (final version)

using System;
using System.Diagnostics;
using System.IO;
using Microsoft.VisualStudio.TestTools.UnitTesting;
using OpenQA.Selenium.Chrome;
using OpenQA.Selenium.Firefox;
using OpenQA.Selenium.IE;

namespace TestSelenium.Tests {
    
    [TestClass]
    public abstract class SeleniumTest {

        const int iisPort = 2020;
        private string _applicationName;
        private Process _iisProcess;

        protected SeleniumTest(string applicationName) {
            _applicationName = applicationName;
        }


        public FirefoxDriver FirefoxDriver { get; set; }
        public ChromeDriver ChromeDriver { get; set; }
        public InternetExplorerDriver InternetExplorerDriver { get; set; }


        [TestInitialize]
        public void TestInitialize() {
            // Start IISExpress
            StartIIS();

            // Start Selenium drivers
            this.FirefoxDriver = new FirefoxDriver();
            this.ChromeDriver = new ChromeDriver();
            this.InternetExplorerDriver = new InternetExplorerDriver();
        }


        [TestCleanup]
        public void TestCleanup() {
            // Ensure IISExpress is stopped
            if (_iisProcess.HasExited == false) {
                _iisProcess.Kill();
            }

            // Stop all Selenium drivers
            this.FirefoxDriver.Quit();
            this.ChromeDriver.Quit();
            this.InternetExplorerDriver.Quit();
        }



        private void StartIIS() {
            var applicationPath = GetApplicationPath(_applicationName);
            var programFiles = Environment.GetFolderPath(Environment.SpecialFolder.ProgramFiles);

            _iisProcess = new Process();
            _iisProcess.StartInfo.FileName = programFiles + "\\IIS Express\\iisexpress.exe";
            _iisProcess.StartInfo.Arguments = string.Format("/path:\"{0}\" /port:{1}", applicationPath, iisPort);
            _iisProcess.Start();
        }


        protected virtual string GetApplicationPath(string applicationName) {
            var solutionFolder = Path.GetDirectoryName(Path.GetDirectoryName(Path.GetDirectoryName(AppDomain.CurrentDomain.BaseDirectory)));
            return Path.Combine(solutionFolder, applicationName);
        }


        public string GetAbsoluteUrl(string relativeUrl) {
            if (!relativeUrl.StartsWith("/")) {
                relativeUrl = "/" + relativeUrl;
            }
            return String.Format("http://localhost:{0}{1}", iisPort, relativeUrl);
        }


    }
}

Notice that the TestInitialize() method in Listing 4 has been modified to create an instance of the FirefoxDriver, ChromeDriver, and InternetExplorerDriver Selenium drivers. Instances of these drivers are created in TestInitialize() and then they are shutdown in the TestCleanup() method by calling Quit().

Listing 5 demonstrates how you can use the FirefoxDriver to test the ASP.NET MVC view using the Firefox web browser.

Listing 5 – Using the Selenium FirefoxDriver

using System.Net;
using Microsoft.VisualStudio.TestTools.UnitTesting;
using OpenQA.Selenium;

namespace TestSelenium.Tests.Controllers {

    [TestClass]
    public class HomeControllerTests:SeleniumTest {

        public HomeControllerTests() : base("MyMVCApp") { }


        [TestMethod]
        public void IndexFirefoxTest() {
            // Act
            this.FirefoxDriver.Navigate().GoToUrl(this.GetAbsoluteUrl("/home/index"));
            this.FirefoxDriver.FindElement(By.Id("btn")).Click();

            // Assert
            Assert.IsTrue(this.FirefoxDriver.FindElement(By.Id("msg")).Displayed);
        }


    }
}

When you run the IndexFirefoxTest() in Listing 5, an instance of IISExpress is started. Next, instances of Firefox, Chrome, and Internet Explorer are created. The test is run and the instances of the browsers are closed.

Typically, you want to run a test using an instance of all three browsers. The test in Listing 6 illustrates how you can run the same test for multiple types of browsers.

Listing 6 – Running the same test for multiple browsers

using System.Net;
using Microsoft.VisualStudio.TestTools.UnitTesting;
using OpenQA.Selenium;

namespace TestSelenium.Tests.Controllers {

    [TestClass]
    public class HomeControllerTests:SeleniumTest {

        public HomeControllerTests() : base("MyMVCApp") { }



        [TestMethod]
        public void IndexTest() {
            IndexTestByDriver(this.FirefoxDriver);
            IndexTestByDriver(this.ChromeDriver);
            IndexTestByDriver(this.InternetExplorerDriver);
        }

        private void IndexTestByDriver(IWebDriver driver) {
            // Act
            driver.Navigate().GoToUrl(this.GetAbsoluteUrl("/home/index"));
            driver.FindElement(By.Id("btn")).Click();

            // Assert
            Assert.IsTrue(driver.FindElement(By.Id("msg")).Displayed, driver.GetType().ToString());
        }


    }
}

In Listing 6, the IndexTest is broken into two methods. The IndexTest() method is decorated with the [TestMethod] attribute and it is this method which is called by the Visual Studio test runner. This method calls the IndexTestByDriver() method three times passing the Firefox, Chrome, and Internet Explorer Selenium drivers.

Fortunately, all of the Selenium drivers implement the same IWebDriver interface. This makes it easy to write a single test which can be used with multiple types of browsers.

The IWebDriver interface exposes all of the methods for controlling a web browser. For example, you can use the IWebDriver Navigate() method to navigate to a particular URL, refresh a browser, or move back and forth in browser history.

You can use the IWebDriver FindElement() method to find elements by a number of different criteria including element Id, element name, class name, tag name, and link text.

After you retrieve an element with FindElement(), you can use methods such as Click(), SendKeys(), and Submit() to interact with forms and links in a view.

Summary

In this blog entry, I discussed how you can use Selenium WebDriver in combination with IISExpress to create integration tests for ASP.NET MVC applications. You can use integration tests to test complex user interactions with an ASP.NET MVC application such as the entire experience of adding an item to a shopping cart.

The advantage of using Selenium WebDriver is that you can use WebDriver to drive actual browser instances such as Firefox, Internet Explorer, and Google Chrome. Because actual browser instances are used, you are able to test your ASP.NET MVC applications against real browsers with all of their warts and quirks.

Ajax Control Toolkit November 2011 Release

Stephen Walther — Thu, 17 Nov 2011 03:48:29 GMT

I’m happy to announce the November 2011 Release of the Ajax Control Toolkit. This release introduces a new Balloon Popup control and several enhancements to the existing Tabs control including support for on-demand loading of tab content, support for vertical tabs, and support for keyboard tab navigation. We also fixed the top-voted bugs associated with the Tabs control reported at CodePlex.com.

You can download the new release by visiting the CodePlex website:

http://AjaxControlToolkit.CodePlex.com

Alternatively, the fast and easy way to get the latest release of the Ajax Control Toolkit is to use NuGet. Open your Library Package Manager console in Visual Studio 2010 and type:

After you install the Ajax Control Toolkit through NuGet, please do a Rebuild of your project (the menu option Build, Rebuild). After you do a Rebuild, the ajaxToolkit prefix will appear in Intellisense:

Using the Balloon Popup Control

Why a new Balloon Popup control? The Balloon Popup control is the second most requested new feature for the Ajax Control Toolkit according to CodePlex votes:

The Balloon Popup displays a message in a balloon when you shift focus to a control, click a control, or hover over a control. You can use the Balloon Popup, for example, to display instructions for TextBoxes which appear in a form:

Here’s the code used to create the Balloon Popup:

<ajaxToolkit:ToolkitScriptManager ID="tsm1" runat="server" />

<asp:TextBox
    ID="txtFirstName"
    Runat="server" />

<asp:Panel ID="pnlFirstNameHelp" runat="server">
    Please enter your first name    
</asp:Panel>

<ajaxToolkit:BalloonPopupExtender 
    TargetControlID="txtFirstName" 
    BalloonPopupControlID="pnlFirstNameHelp"
    BalloonSize="Small"
    UseShadow="true"
    runat="server" />

You also can use the Balloon Popup to explain hard to understand words in a text document:

Here’s how you display the Balloon Popup when you hover over the link:

The point of the conversation was 
<asp:HyperLink ID="lnkObfuscate" Text="obfuscated" CssClass="hardWord" runat="server" /> 
by his incessant coughing.

<ajaxToolkit:ToolkitScriptManager ID="tsm1" runat="server" />
<asp:Panel id="pnlObfuscate" Runat="server">
    To bewilder or render something obscure
</asp:Panel>
<ajaxToolkit:BalloonPopupExtender
    TargetControlID="lnkObfuscate"
    BalloonPopupControlID="pnlObfuscate"
    BalloonStyle="Cloud"
    UseShadow="true"
    DisplayOnMouseOver="true"
    Runat="server" />

There are four important properties which you need to know about when using the Balloon Popup control:

BalloonSize – The three balloon sizes are Small, Medium, and Large.
BalloonStyle -- The two built-in styles are Rectangle and Cloud.
UseShadow – When true, a drop shadow appears behind the popup.
Position – Can have the values Auto, BottomLeft, BottomRight, TopLeft, TopRight. When set to Auto, which is the default, the Balloon Popup will appear where it has the most screen real estate.

The following screenshots illustrates how these settings affect the appearance of the Balloon Popup:

Customizing the Balloon Popup

You can customize the appearance of the Balloon Popup by creating your own Cascading Style Sheet and Sprite. The Ajax Control Toolkit sample site includes a sample of a custom Oval Balloon Popup style:

This custom style was created by using a custom Cascading Style Sheet and image. You point the Balloon Popup at a custom Cascading Style Sheet and Cascading Style Sheet class by using the CustomCssUrl and CustomClassName properties like this:

<asp:TextBox ID="txtCustom" autocomplete="off" runat="server" />
<br />
<asp:Panel ID="Panel3" runat="server">
    This is a custom BalloonPopupExtender style created with a custom 
    Cascading Style Sheet. 
</asp:Panel>
<ajaxToolkit:BalloonPopupExtender 
    ID="bpe1" 
    TargetControlID="txtCustom"
    BalloonPopupControlID="Panel3" 
    BalloonStyle="Custom"    
    CustomCssUrl="CustomStyle/BalloonPopupOvalStyle.css"
    CustomClassName="oval" 
    UseShadow="true" 
    runat="server" />

Learn More about the Balloon Popup

To learn more about the Balloon Popup control, visit the sample page for the Balloon Popup at the Ajax Control Toolkit sample site:

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/BalloonPopup/BalloonPopupExtender.aspx

Improvements to the Tabs Control

In this release, we introduced several important new features for the existing Tabs control. We also fixed all of the top-voted bugs for the Tabs control.

On-Demand Loading of Tab Content

Here is the scenario. Imagine that you are using the Tabs control in a Web Forms page. The Tabs control displays two tabs: Customers and Products. When you click the Customers tab then you want to see a list of customers and when you click on the Products tab then you want to see a list of products.

In this scenario, you don’t want the list of customers and products to be retrieved from the database when the page is initially opened. The user might never click on the Products tab and all of the work to load the list of products from the database would be wasted.

In this scenario, you want the content of a tab panel to be loaded on demand. The products should only be loaded from the database and rendered to the browser when you click the Products tab and not before.

The Tabs control in the November 2011 Release of the Ajax Control Toolkit includes a new property named OnDemand. When OnDemand is set to the value True, a tab panel won’t be loaded until you click its associated tab.

Here is the code for the aspx page:

<ajaxToolkit:ToolkitScriptManager ID="tsm1" runat="server" />

<ajaxToolkit:TabContainer ID="tabs" OnDemand=”true" runat="server">
    <ajaxToolkit:TabPanel HeaderText="Customers" runat="server">
    <ContentTemplate>
        <h2>Customers</h2>
        
        <asp:GridView ID="grdCustomers" DataSourceID="srcCustomers" runat="server" />
        <asp:SqlDataSource 
            ID="srcCustomers" 
            SelectCommand="SELECT * FROM Customers"
            ConnectionString="<%$ ConnectionStrings:StoreDB %>"
            runat="server" />

    </ContentTemplate>    
    </ajaxToolkit:TabPanel>
    <ajaxToolkit:TabPanel HeaderText="Products" runat="server">
    <ContentTemplate>
        <h2>Products</h2>
                 
        <asp:GridView ID="grdProducts" DataSourceID="srcProducts" runat="server" />
        <asp:SqlDataSource 
            ID="srcProducts" 
            SelectCommand="SELECT * FROM Products"
            ConnectionString="<%$ ConnectionStrings:StoreDB %>"
            runat="server" />
         
    </ContentTemplate>
    </ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>

Notice that the TabContainer includes an OnDemand=”True” property. The Tabs control contains two Tab Panels. The first tab panel uses a DataGrid and SqlDataSource to display a list of customers and the second tab panel uses a DataGrid and SqlDataSource to display a list of products.

And here is the code-behind for the page:

using System;
using System.Diagnostics;
using System.Web.UI.WebControls;

namespace ACTSamples {
    public partial class TabsOnDemand : System.Web.UI.Page {

        protected override void OnInit(EventArgs e) {
            srcProducts.Selecting += new SqlDataSourceSelectingEventHandler(srcProducts_Selecting);
        }

        void srcProducts_Selecting(object sender, SqlDataSourceSelectingEventArgs e) {
            Debugger.Break();
        }
    }
}

The code-behind file includes an event handler for the Products SqlDataSource Selecting event. The handler breaks into the debugger by calling the Debugger.Break() method. That way, we can know when the Products SqlDataSource actually retrieves the list of products.

When the OnDemand property has the value False then the Selecting event handler is called immediately when the page is first loaded. The contents of all of the tabs are loaded (and the contents of the unselected tabs are hidden) when the page is first loaded.

When the OnDemand property has the value True then the Selecting event handler is not called when the page is first loaded. The event handler is not called until you click on the Products tab. If you never click on the Products tab then the list of products is never retrieved from the database.

If you want even more control over when the contents of a tab panel gets loaded then you can use the TabPanel OnDemandMode property. This property accepts the following three values:

None – Never load the contents of the tab panel again after the page is first loaded.
Once – Wait until the tab is selected to load the contents of the tab panel
Always – Load the contents of the tab panel each and every time you select the tab.

There is a live demonstration of the OnDemandMode property here in the sample page for the Tabs control:

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Tabs/Tabs.aspx

Displaying Vertical Tabs

With the November 2011 Release, the Tabs control now supports vertical tabs.

To create vertical tabs, just set the TabContainer UserVerticalStripPlacement property to the value True like this:

<ajaxToolkit:TabContainer ID="tabs" OnDemand="false" UseVerticalStripPlacement="true" runat="server">
    <ajaxToolkit:TabPanel ID="TabPanel1" HeaderText="First Tab" runat="server">
    <ContentTemplate>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
    </p>
    </ContentTemplate>    
    </ajaxToolkit:TabPanel>
    <ajaxToolkit:TabPanel ID="TabPanel2" HeaderText="Second Tab" runat="server">
    <ContentTemplate>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
    </p>
         
    </ContentTemplate>
    </ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>

In addition, you can use the TabStripPlacement property to control whether the tab strip appears at the left or right or top or bottom of the tab panels:

Tab Keyboard Navigation

Another highly requested feature for the Tabs control is support for keyboard navigation. The Tabs control now supports the arrow keys and the Home and End keys.

In order for the arrow keys to work, you must first move focus to the tab control on the page by either clicking on a tab with your mouse or repeatedly hitting the Tab key.

You can try out the new keyboard navigation support by trying any of the demos included in the Tabs sample page:

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Tabs/Tabs.aspx

Summary

I hope that you take advantage of the new Balloon Popup control and the new features which we introduced for the Tabs control. We added a lot of new features to the Tabs control in this release including support for on-demand tabs, support for vertical tabs, and support for tab keyboard navigation.

I want to thank the developers on the Superexpert team for all of the hard work which they put into this release.

ASP.NET Connections Fall 2011 Slides and Code

Stephen Walther — Mon, 07 Nov 2011 02:00:39 GMT

Thanks everyone who came to my talks at ASP.NET Connections in Las Vegas! There was a definite theme to my talks this year…taking advantage of JavaScript to build a rich presentation layer. I gave the following three talks:

JsRender Templates – Originally, I was scheduled to give a talk on jQuery Templates. However, jQuery Templates has been deprecated and JsRender is the new technology which replaces jQuery Templates. In the talk, I give plenty of code samples of using JsRender. You can download the slides and code samples RIGHT HERE

HTML5 – In this talk, I focused on the features of HTML5 which are the most interesting to developers building database-driven Web applications. In particular, I discussed Web Sockets, Web workers, Web Storage, Indexed DB, and the Offline Application Cache. All of these features are supported by Safari, Chrome, and Firefox today and they will be supported by Internet Explorer 10. You can download the slides and code samples RIGHT HERE

Ajax Control Toolkit – My company, Superexpert, is responsible for developing and maintaining the Ajax Control Toolkit. In this talk, I discuss all of the bug fixes and new features which the developers on the Superexpert team have added to the Ajax Control Toolkit over the previous six months. We also had a good discussion of the features which people want in future releases of the Ajax Control Toolkit. The slides and code samples for this talk can be downloaded RIGHT HERE

I had a great time in Las Vegas! Good questions, friendly audience, and lots of opportunities for me to learn new things!

-- Stephen

September 2011 Release of the Ajax Control Toolkit

Stephen Walther — Tue, 27 Sep 2011 21:28:43 GMT

I’m happy to announce the release of the September 2011 Ajax Control Toolkit. This release has several important new features including:

Date ranges – When using the Calendar extender, you can specify a start and end date and a user can pick only those dates which fall within the specified range. This was the fourth top-voted feature request for the Ajax Control Toolkit at CodePlex.
Twitter Control – You can use the new Twitter control to display recent tweets associated with a particular Twitter user or tweets which match a search query.
Gravatar Control – You can use the new Gravatar control to display a unique image for each user of your website. Users can upload custom images to the Gravatar.com website or the Gravatar control can display a unique, auto-generated, image for a user.

You can download this release this very minute by visiting CodePlex:

http://AjaxControlToolkit.CodePlex.com

Alternatively, you can execute the following command from the Visual Studio NuGet console:

Improvements to the Ajax Control Toolkit Calendar Control

The Ajax Control Toolkit Calendar extender control is one of the most heavily used controls from the Ajax Control Toolkit. The developers on the Superexpert team spent the last sprint focusing on improving this control. There are three important changes that we made to the Calendar control: we added support for date ranges, we added support for highlighting today’s date, and we made fixes to several bugs related to time zones and daylight savings.

Using Calendar Date Ranges

One of the top-voted feature requests for the Ajax Control Toolkit was a request to add support for date ranges to the Calendar control (this was the fourth most voted feature request at CodePlex). With the latest release of the Ajax Control Toolkit, the Calendar extender now supports date ranges.

For example, the following page illustrates how you can create a popup calendar which allows a user only to pick dates between March 2, 2009 and May 16, 2009.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CalendarDateRange.aspx.cs" Inherits="WebApplication1.CalendarDateRange" %>
<%@ Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>
<html>
<head runat="server">
    <title>Calendar Date Range</title>
</head>
<body>
    <form id="form1" runat="server">

        <asp:ToolkitScriptManager 
            ID="tsm" 
            runat="server" />

        <asp:TextBox 
            ID="txtHotelReservationDate" 
            runat="server" /> 
        
        <asp:CalendarExtender 
            ID="Calendar1" 
            TargetControlID="txtHotelReservationDate" 
            StartDate="3/2/2009"
            EndDate="5/16/2009"
            SelectedDate="3/2/2009"
            runat="server" /> 

    </form>
</body>
</html>

This page contains three controls: an Ajax Control Toolkit ToolkitScriptManager control, a standard ASP.NET TextBox control, and an Ajax Control Toolkit CalendarExtender control. Notice that the Calendar control includes StartDate and EndDate properties which restrict the range of valid dates.

The Calendar control shows days, months, and years outside of the valid range as struck out. You cannot select days, months, or years which fall outside of the range. The following video illustrates interacting with the new date range feature:

If you want to experiment with a live version of the Ajax Control Toolkit Calendar extender control then you can visit the Calendar Sample Page at the Ajax Control Toolkit Sample Site.

Highlighted Today’s Date

Another highly requested feature for the Calendar control was support for highlighting today’s date. The Calendar control now highlights the user’s current date regardless of the user’s time zone.

Fixes to Time Zone and Daylight Savings Time Bugs

We fixed several significant Calendar extender bugs related to time zones and daylight savings time. For example, previously, when you set the Calendar control’s SelectedDate property to the value 1/1/2007 then the selected data would appear as 12/31/2006 or 1/1/2007 or 1/2/2007 depending on the server time zone.

For example, if your server time zone was set to Samoa (UTC-11:00), then setting SelectedDate=”1/1/2007” would result in “12/31/2006” being selected in the Calendar. Users of the Calendar extender control found this behavior confusing.

After careful consideration, we decided to change the Calendar extender so that it interprets all dates as UTC dates. In other words, if you set StartDate=”1/1/2007” then the Calendar extender parses the date as 1/1/2007 UTC instead of parsing the date according to the server time zone.

By interpreting all dates as UTC dates, we avoid all of the reported issues with the SelectedDate property showing the wrong date. Furthermore, when you set the StartDate and EndDate properties, you know that the same StartDate and EndDate will be selected regardless of the time zone associated with the server or associated with the browser. The date 1/1/2007 will always be the date 1/1/2007.

The New Twitter Control

This release of the Ajax Control Toolkit introduces a new twitter control. You can use the Twitter control to display recent tweets associated with a particular twitter user. You also can use this control to show the results of a twitter search.

The following page illustrates how you can use the Twitter control to display recent tweets made by Scott Hanselman:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TwitterProfile.aspx.cs" Inherits="WebApplication1.TwitterProfile" %>
<%@ Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Twitter Profile</title>
</head>
<body>
    <form id="form1" runat="server">
    
        <asp:ToolkitScriptManager 
            ID="tsm" 
            runat="server" />

        <asp:Twitter 
            ID="Twitter1"
            ScreenName="shanselman"
            runat="server" />

    </form>
</body>
</html>

This page includes two Ajax Control Toolkit controls: the ToolkitScriptManager control and the Twitter control. The Twitter control is set to display tweets from Scott Hanselman (shanselman):

You also can use the Twitter control to display the results of a search query. For example, the following page displays all recent tweets related to the Ajax Control Toolkit:

Twitter limits the number of times that you can interact with their API in an hour. Twitter recommends that you cache results on the server (https://dev.twitter.com/docs/rate-limiting). By default, the Twitter control caches results on the server for a duration of 5 minutes. You can modify the cache duration by assigning a value (in seconds) to the Twitter control's CacheDuration property.

The Twitter control wraps a standard ASP.NET ListView control. You can customize the appearance of the Twitter control by modifying its LayoutTemplate, StatusTemplate, AlternatingStatusTemplate, and EmptyDataTemplate.

To learn more about the new Twitter control, visit the live Twitter Sample Page.

The New Gravatar Control

The September 2011 release of the Ajax Control Toolkit also includes a new Gravatar control. This control makes it easy to display a unique image for each user of your website.

A Gravatar is associated with an email address. You can visit Gravatar.com and upload an image and associate the image with your email address. That way, every website which uses Gravatars (such as the www.ASP.NET website) will display your image next to your name.

For example, I visited the Gravatar.com website and associated an image of a Koala Bear with the email address Test@Superexpert.com. The following page illustrates how you can use the Gravatar control to display the Gravatar image associated with the Test@superexpert.com email address:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GravatarDemo.aspx.cs" Inherits="WebApplication1.GravatarDemo" %>
<%@ Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Gravatar Demo</title>
</head>
<body>
    <form id="form1" runat="server">
    
        <asp:ToolkitScriptManager 
            ID="tsm" 
            runat="server" />

        <asp:Gravatar 
            ID="Gravatar1"
            Email="test@superexpert.com"
            runat="server" />

    </form>
</body>
</html>

The page above simply displays the Gravatar image associated with the Test@superexpert.com email address:

If a user has not uploaded an image to Gravatar.com then you can auto-generate a unique image for the user from the user email address. The Gravatar control supports four types of auto-generated images:

Identicon -- A different geometric pattern is generated for each unrecognized email.
MonsterId -- A different image of a monster is generated for each unrecognized email.
Wavatar -- A different image of a face is generated for each unrecognized email.
Retro -- A different 8-bit arcade-style face is generated for each unrecognized email.

For example, there is no Gravatar image associated with the email address someone@somewhere.com. The following page displays an auto-generated MonsterId for this email address:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GravatarMonster.aspx.cs" Inherits="WebApplication1.GravatarMonster" %>
<%@ Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Gravatar Monster</title>
</head>
<body>
    <form id="form1" runat="server">
    
        <asp:ToolkitScriptManager 
            ID="tsm" 
            runat="server" />

        <asp:Gravatar 
            ID="Gravatar1"
            Email="someone@somewhere.com"
            DefaultImageBehavior="MonsterId"
            runat="server" />

    </form>
</body>
</html>

The page above generates the following image automatically from the supplied email address:

To learn more about the properties of the new Gravatar control, visit the live Gravatar Sample Page.

ASP.NET Connections Talk on the Ajax Control Toolkit

If you are interested in learning more about the changes that we are making to the Ajax Control Toolkit then please come to my talk on the Ajax Control Toolkit at the upcoming ASP.NET Connections conference. In the talk, I will present a summary of the changes that we have made to the Ajax Control Toolkit over the last several months and discuss our future plans.

Do you have ideas for new Ajax Control Toolkit controls? Ideas for improving the toolkit? Come to my talk – I would love to hear from you.

You can register for the ASP.NET Connections conference by visiting the following website:

Summary

The previous release of the Ajax Control Toolkit – the July 2011 Release – has had over 100,000 downloads. That is a huge number of developers who are working with the Ajax Control Toolkit. We are really excited about the new features which we added to the Ajax Control Toolkit in the latest September sprint. We hope that you find the updated Calender control, the new Twitter control, and the new Gravatar control valuable when building your ASP.NET Web Forms applications.

Adding the New HTML Editor Extender to a Web Forms Application using NuGet

Stephen Walther — Wed, 17 Aug 2011 22:29:19 GMT

The July 2011 release of the Ajax Control Toolkit includes a new, lightweight, HTML5 compatible HTML Editor extender. In this blog entry, I explain how you can take advantage of NuGet to quickly add the new HTML Editor control extender to a new or existing ASP.NET Web Forms application.

Installing the Latest Version of the Ajax Control Toolkit with NuGet

NuGet is a package manager. It enables you to quickly install new software directly from within Visual Studio 2010. You can use NuGet to install additional software when building any type of .NET application including ASP.NET Web Forms and ASP.NET MVC applications.

If you have not already installed NuGet then you can install NuGet by navigating to the following address and clicking the giant install button:

http://nuget.org/

After you install NuGet, you can add the Ajax Control Toolkit to a new or existing ASP.NET Web Forms application by selecting the Visual Studio menu option Tools, Library Package Manager, Package Manager Console:

Selecting this menu option opens the Package Manager Console. You can enter the command Install-Package AjaxControlToolkit in the console to install the Ajax Control Toolkit:

After you install the Ajax Control Toolkit with NuGet, your application will include an assembly reference to the AjaxControlToolkit.dll and SanitizerProviders.dll assemblies:

Furthermore, your Web.config file will be updated to contain a new tag prefix for the Ajax Control Toolkit controls:

<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.0" />
    <pages>
      <controls>
        <add tagPrefix="ajaxToolkit" assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" />
      </controls>
    </pages>
  </system.web>
</configuration>

The configuration file installed by NuGet adds the prefix ajaxToolkit for all of the Ajax Control Toolkit controls. You can type ajaxToolkit: in source view to get auto-complete in Source view. You can, of course, change this prefix to anything you want.

Using the HTML Editor Extender

After you install the Ajax Control Toolkit, you can use the HTML Editor Extender with the standard ASP.NET TextBox control to enable users to enter rich formatting such as bold, underline, italic, different fonts, and different background and foreground colors.

For example, the following page can be used for entering comments. The page contains a standard ASP.NET TextBox, Button, and Label control. When you click the button, any text entered into the TextBox is displayed in the Label control. It is a pretty boring page:

Let’s make this page fancier by extending the standard ASP.NET TextBox with the HTML Editor extender control:

Notice that the ASP.NET TextBox now has a toolbar which includes buttons for performing various kinds of formatting. For example, you can change the size and font used for the text. You also can change the foreground and background color – and make many other formatting changes.

You can customize the toolbar buttons which the HTML Editor extender displays. To learn how to customize the toolbar, see the HTML Editor Extender sample page here:

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/HTMLEditorExtender/HTMLEditorExtender.aspx

Here’s the source code for the ASP.NET page:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.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>Add Comments</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    <ajaxToolkit:ToolkitScriptManager 
        ID="TSM1" 
        runat="server" />

    <asp:TextBox
        ID="txtComments"
        TextMode="MultiLine"
        Columns="50"
        Rows="8"
        Runat="server" />

    <ajaxToolkit:HtmlEditorExtender
        ID="hee"
        TargetControlID="txtComments"
        Runat="server" />

    <br /><br />

    <asp:Button 
        ID="btnSubmit"
        Text="Add Comment"
        Runat="server" onclick="btnSubmit_Click" />


    <hr />

    <asp:Label
        ID="lblComment"
        Runat="server" />


    </div>
    </form>
</body>
</html>

Notice that the page above contains 5 controls. The page contains a standard ASP.NET TextBox, Button, and Label control. However, the page also contains an Ajax Control Toolkit ToolkitScriptManager control and HtmlEditorExtender control.

The HTML Editor extender control extends the standard ASP.NET TextBox control. The HTML Editor TargetID attribute points at the TextBox control.

Here’s the code-behind for the page above:

using System;

namespace WebApplication1 {
    public partial class Default : System.Web.UI.Page {

        protected void btnSubmit_Click(object sender, EventArgs e) {
            lblComment.Text = txtComments.Text;
        }
    }
}

Preventing XSS/JavaScript Injection Attacks

If you use an HTML Editor -- any HTML Editor -- in a public facing web page then you are opening your website up to Cross-Site Scripting (XSS) attacks. An evil hacker could submit HTML using the HTML Editor which contains JavaScript that steals private information such as other user’s passwords.

Imagine, for example, that you create a web page which enables your customers to post comments about your website. Furthermore, imagine that you decide to redisplay the comments so every user can see them. In that case, a malicious user could submit JavaScript which displays a dialog asking for a user name and password. When an unsuspecting customer enters their secret password, the script could transfer the password to the hacker’s website.

So how do you accept HTML content without opening your website up to JavaScript injection attacks? The Ajax Control Toolkit HTML Editor supports the Anti-XSS library. You can use the Anti-XSS library to sanitize any HTML content. The Anti-XSS library, for example, strips away all JavaScript automatically.

You can download the Anti-XSS library from NuGet. Open the Package Manager Console and execute the command Install-Package AntiXSS:

Adding the Anti-XSS library to your application adds two assemblies to your application named AntiXssLibrary.dll and HtmlSanitizationLibrary.dll.

After you install the Anti-XSS library, you can configure the HTML Editor extender to use the Anti-XSS library your application’s web.config file:

<?xml version="1.0" encoding="utf-8"?>
<configuration>

    <configSections>
        <sectionGroup name="system.web">
            <section name="sanitizer" requirePermission="false" type="AjaxControlToolkit.Sanitizer.ProviderSanitizerSection, AjaxControlToolkit"/>
        </sectionGroup>
    </configSections>

    <system.web>

        <sanitizer defaultProvider="AntiXssSanitizerProvider">
            <providers>
                <add name="AntiXssSanitizerProvider" 
                     type="AjaxControlToolkit.Sanitizer.AntiXssSanitizerProvider"></add>
            </providers>
        </sanitizer>


        <compilation debug="true" targetFramework="4.0" />
        <pages>
            <controls>
                <add tagPrefix="ajaxToolkit" assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" />
            </controls>
        </pages>

    </system.web>
</configuration>

Summary

In this blog entry, I described how you can quickly get started using the new HTML Editor extender – included with the July 2011 release of the Ajax Control Toolkit – by installing the Ajax Control Toolkit with NuGet. If you want to learn more about the HTML Editor then please take a look at the Ajax Control Toolkit sample site:

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/HTMLEditorExtender/HTMLEditorExtender.aspx