Back when Visual Studio 2008 came out, Scott Guthrie wrote an excellent series of blog posts on using LINQ to SQL. Unfortunately, the various installments are not easy to follow when starting from Part 1 and going onward, so I've decided to gather and organize the links here for myself and for anyone else interested in his tutorial.

Using LINQ to SQL

• Part 1: Introduction to LINQ to SQL
• Part 2: Defining our Data Model Classes
• Part 3: Querying our Database
• Part 4: Updating our Database
• Part 5: Binding UI using the <asp:LinqDataSource> Control
• Part 6: Retrieving Data Using Stored Procedures
• Part 7: Updating our Database using Stored Procedures
• Part 8: Executing Custom SQL Expressions
• Part 9: Using a Custom LINQ Expression with the <asp:LinqDataSource> Control

Also, there was (at one time) a single PDF containing all of these tutorials, but the website where it was hosted appears to be offline. Does anyone have a copy of that PDF they'd care to send me to host?

UPDATE: Some time ago a developer by the name of Kadir Pekel compiled all nine tutorials into a single PDF and hosted them on his website, http://it-box.blogturk.net, but that website no longer is around. Helpful reader Milan had a copy of said PDF and sent it to me (thank you!), which you can download here, if interested: http://www.datawebcontrols.com/classes/LINQToSql.zip

Happy Programming!

If you're interested in such online consulting or training, please drop me a line at mitchell@4guysfromrolla.com. You can find out more about my experience and rates at http://www.4guysfromrolla.com/ScottMitchell.

In any event, I spend a fair amount of time - 5-15 hours a week, usually - sharing my desktop or working from the client's desktop. During these sessions there's the same sort of activities you perform when developing ASP.NET applications at your workstation: typing in code, switching between Visual Studio, the browser, running queries from SQL Server Management Studio, and so forth. I've evaluated four different screen sharing programs and thought I'd share what I liked best about each and what I liked least. Keep in mind that my rankings are based on my typical usage when sharing screens. If you are doing something different - showing a PowerPoint presentation, for instance - your mileage may vary.

Here they are, from worst to first:

#4.) FogCreek Copilot
Copilot has a couple of really nice selling points when compared to the other three competitors:

• It's the most affordable - starting at $244/year, or $24/month, Copilot is about half of what the other competitors charge. Plus you can buy a one-day pass for $5 during the week - on the weekends, it's free!
• It's especially easy to start the meeting - unlike some of the other options, which involve first time users to download and install software prior to joining the meeting, Copilot is run from an executable that doesn't require any installation steps. Just download the file, double-click it, and you're off and running. This can be helpful when assisting a computer "challenged" friend or when working with someone in a corporate environment that prohibits them from installing software on their machine.

The big problem with Copilot is that it is slooooow. Switching from one full screen window to another can take a could one to three seconds. What's more, if you're not a slow typer you'll find that there is a noticeable lag when viewing a remote user's screen and typing into it. Type - wait a half-second - the letter appears. Type - wait a half-second - the letter appears. Needless to say, it can be quite frustrating to speedily type out a long line of code. I don't have the patience to type one character at a time, continuing only when the letter shows up. My clients, who are paying by the hour, wouldn't be satisfied with this approach either. So I end up typing a line of code and don't see the whole line complete until a couple of seconds after I finished typing. And if you transposed two letters or forgot a parenthesis you have to carefully (and slowly) move the cursor back to the right spot and then fix the mistake.

Another problem with Copilot is that you can't seamlessly switch control from one desktop to another. Say that I am viewing the client's remote computer and want to show them a diagram on my computer. It would be nice to be able to just click a button and have them see my screen, but that's not possible with Copilot. Also, Copilot only allows one-on-one screen sharing. You can't have a meeting with three (or more) attendees.

Copilot's ease of setup and low price point may make it attractive to people doing limited screen sharing or for those giving presentations or assisting a family member with a computer problem, but it is not a viable option for online consulting and training due, primarily, to its speed issues.

#3.) Adobe Connect Pro
Of all the desktop sharing products I evaluated, Adobe Connect Pro is certainly the easiest to get a meeting started. Adobe Connect Pro meetings are powered by Flash, which means if the participants have Flash installed on their computers (and, honestly, who doesn't these days?) then they can join the meeting. There's no software to download, nothing to install.

It seems that Adobe Connect Pro is more targeted to online meetings and eLearning scenarios than desktop sharing. While Adobe Connect Pro certainly allows the host (or a participant) to share their desktop with everyone else, it also has features like online quizzes, registration forms, and other features that would be useful for teaching an online class, but not at all needed for doing the type of online consulting and training that I do. And while I'm sure their online quizzes and other eLearning features are all top notch, I regret to report that their screen sharing is not - it suffers from the same speed issues found in Copilot. In short, there is a perceptible delay when typing on the remote user's computer; likewise with switching between windows on the remote computer.

Adobe Connect Pro is also the most expensive option out of the bunch. An annual plan will run you $540. By the month it's $55. Adobe offers a pay-per-use option, but that's $0.32 per minute per user, which can add up fast. While the two share similar speed problems, I decided to rank Adobe Connect Pro ahead of Copilot because it does offer more screen sharing features, like the ability to toggle between the host and participant's screens, and the ability to choose which monitor to share (if you have multiple monitors), and audio conferencing options. But for some these extra features might not be worth the added cost.

#2.) GoToMeeting
After using Copilot and Adobe Connect Pro, the first thing you notice about GoToMeeting is that there is no longer a delay when typing. Sure, there may be a hiccup every now and then when the network gets congested, but for the most part every time you type a letter from your keyboard, wham, it appears on the remote computer instantly. Also, switching between windows on the remote computer is noticeably faster than with Copilot or Adobe Connect Pro.

Unlike the previous two products, GoToMeeting requires a bit more of an installation process to join (or host) a meeting. It's all very nicely automated - you only need to click a few "I Agree"s and "Next" buttons - but these extra steps might trip up a computer novice. And the need to install software may be a deal breaker in certain corporate environments.

My biggest gripe with GoToMeeting is that the client swallows (or outright disallows) certain keyboard shortcuts when typing from the host computer into a remote computer. And it's not just any keyboard shortcuts that are not permitted, but two of the most popular ones: Alt+Tab and Ctrl+C. Say you're writing code and want to copy some block of text and paste it elsewhere. If you're at all like me, you instinctively use the keyboard to highlight the selected text and then use Ctrl+C to copy it to the clipboard. However, this combination does not copy anything to the clipboard. Consequently, when you later hit Ctrl+V, what was previously in the clipboard gets emitted! In order to copy to the clipboard you need to select the text and then, using your mouse, right-click it and choose Copy from the context menu. Similarly, Alt+Tab doesn't work. Alt+Tab, when typed from the host computer, tabs out of the GoToMeeting window and to a different window on your desktop. If you want to switch between windows on the remote computer you have to use your mouse and click the appropriate window from the taskbar.

GoToMeeting has all of the screen sharing bells and whistles. You can have up to 15 participants. Sharing one participant's screen with the group or sharing the host's screen is quite simple, too. There's a phone number participants can optionally call to join an audio conference, or the conferencing can be done over the Internet using the computer's speakers and microphone.

Price-wise, GoToMeeting falls in between CoPilot and Adobe Connect Pro. You can sign up for an annual plan for $468 or go monthly for $49.

#1.) Webex
Webex is a lot like GoToMeeting. Both have a similar download and install story. Both cost the same. Both have comparable performance (although Webex does seem a tad bit faster to me). And both offer pretty much the same feature set.

The differences between the two are, by most accounts, minor ones, although as one who prefers using the keyboard over the mouse, these differences are important. Namely, the Webex client doesn't swallow keyboard shortcuts. Alt+C and Alt+Tab work as expected when typing from my keyboard to the remote client's computer. That's not to say the Webex client is not without its own annoyances. In fact, there are two that irk me. First, when the remote user is made the presenter and shares his screen with me, a little command window with various options appears on the remote computer's desktop in the lower right corner. These options are only displayed on the remote computer's screen and not on my screen. However, if I have control of the remote client's computer and move my mouse to the lower right corner and click it, my clicks are intercepted by that command window (even though I don't see it). The problem goes away if the remote client remembers to minimize that command window. It would be nice to have an option that would hide that command window right away (or not have it intercept my clicks or show it to me, as well).

The second issue is that when I have control of the remote client's computer a little bubble follows my mouse cursor that says to the remote client and me, "Scott has control of your computer. Click here to take control back." This bubble is supposed to be beneath the mouse cursor and offset to the right, but every now and then the mouse cursor gets positioned over it and, wouldn't you know, when that happens any mouse click is intercepted by that bubble. It doesn't revert control back to the remote client, but it does "swallow" my mouse click. I have to "jiggle the mouse" to get it off that bubble so that I can click what I meant to click in the first place.

In Conclusion...
So there you have it, Webex is the winner. You don't have to take my word for it, though - each of these products offers a free trial so you can experiment with each and find which one best fits your workload.

For background, when I first started offering online consulting and training I used Copilot for several months, suffering through the speed issues. I incorrectly had presumed that all screen sharing products were going to have a little bit of lag. After one particularly frustrating day I decided to try GoToMeeting for giggles as they had a free 30 day trial. I was blown away by the difference in speed and immediately switched. The $25 extra each month was definitely worth it. Earlier this year, GoToMeeting updated their software to a new version where the Ctrl+C shortcut no longer worked. Their telephone support was helpful and was able to roll me back to the previous version so that I could continue to use the keyboard to copy and paste. A month ago (or so), they stopped supporting the old version of the software and upgraded me to the new version (which still did not support Ctrl+C). At that point I evaluated Adobe Connect Pro and then Webex, which is what I use today.

Happy (Remote) Programming!

In addition to evaluating these four products, I also tried Microsoft Live Meeting. Unfortunately, the client I attempted to evaluate this product with received error messages when attempting to download the software used by the meeting. This happened on two separate occasions, so I threw in the towel.

SQL's UPDATE statement makes it easy to update one or more records in a database table. The most common UPDATE statement pattern assigns static or parameterized values to one or more columns:

UPDATE MyTable SET
    Column1 = Value1,
    Column2 = Value2,
    ...
WHERE PrimaryKeyColumn = SomeValue

But what if you need to update values in one database table from values in another database table? There are a couple ways this can be done. One way is to use a subquery:

UPDATE MyTable SET
    Column1 = (SELECT SomeColumn FROM SomeOtherTable WHERE SuchAndSuch = ThisAndThat),
    Column2 = (SELECT SomeOtherColumn FROM SomeOtherTable WHERE SuchAndSuch = ThisAndThat),
    ...
WHERE PrimaryKeyColumn = SomeValue

Alternatively, you can use a JOIN statement in your UPDATE clause. The precise syntax seems to vary a bit based on the database system. For Microsoft SQL Server, use the following syntax:

UPDATE MyTable SET
    Column1 = SomeOtherTable.SomeColumn,   
    Column2 = SomeOtherTable.SomeOtherColumn,
    ...
FROM MyTable
    INNER JOIN SomeOtherTable ON
        MyTable.SuchAndSuch = SomeOtherTable.ThisAndThat
WHERE PrimaryKeyColumn = SomeValue

Bear in mind that updating data in one table with data from another table may be a sign of bad database design. I've seen developers use these approaches to duplicate data across multiple tables so that it's "easier" or "quicker" to write a query to read the data, but such actions are (usually) folly. Data duplication may make your SELECT queries easier to write, but you can very easily end up with data integrity issues.

So when might you need to copy data from one table to another? Consider a help desk application that allows support staff to create support tickets, where each ticket in the system exists as a record in the Tickets table. A ticket may have dozens of data points. To ease data entry, let's say that administrative users can create "ticket templates," which pre-define the values for a number of ticket data points that are stored in a table named TicketTemplates. Applying a template to an existing ticket would require that the existing record in the Tickets table have its non-set data points assigned to the corresponding default values of the selected template. Presume that the Tickets table has a TicketTemplateId field that indicates what template is to be applied to the ticket. Once this value has been assigned, the following UPDATE statement could be executed to copy the template's pre-defined values to the non-assigned data points in the Tickets table:

UPDATE Tickets SET
    PriorityId = ISNULL(Tickets.PriorityId, TicketTemplates.PriorityId),
    CategoryId = ISNULL(Tickets.CategoryId, TicketTemplates.CategoryId),
    IsPublic = ISNULL(Tickets.IsPublic, TicketTemplates.IsPublic),
    ...
FROM Tickets
    INNER JOIN TicketTemplates ON
        Tickets.TicketTemplateId = TicketTemplates.TicketTemplateId
WHERE Tickets.TicketId = @TicketId

Happy Programming!

ASP.NET view state is the technique used by an ASP.NET Web page to persist changes to the state of a Web Form across postbacks. The view state of a page is, by default, placed in a hidden form field named __VIEWSTATE, and can easily get very large. Not only does the __VIEWSTATE form field cause slower downloads, but, whenever the user posts back the Web page, the contents of this hidden form field must be posted back in the HTTP request, thereby lengthening the request time, as well. Because view state is buried in a hidden form field and because as developer we typically test locally, the affect of view state bloat on the user experience requires preemptive action. Steps must be taken to measure view state's size and to take steps in trimming down view state if it begins to negatively affect the user experience.

There are a variety of techniques for measuring the view state size on a given page. Perhaps the simplest is to turn on page tracing. With page tracing enabled you can see the estimated view state of each control in the control hierarchy. For instance, the screen show below shows that two Labels on my page consume (roughly) 120 bytes of view state each.

There's also a free add-on for Firefox that reports view state size directly in your browser window: Viewstate Size. When installed, this add-on will show a little icon in your browser's lower right corner reporting the view state size for a given page.

It's also possible to determine the view state size programmatically. Today I was working on a demo for an article and wanted to have the view state size displayed on every page. After reading an article I wrote back in 2004 - Understanding ASP.NET View State - I came up with the following code snippet to compute and display the view state size for a given page. This technique uses the "old school" way of doing it, relying on objects that have been around since ASP.NET's inception. Consequently, the below code will work in any ASP.NET application.

Visual Basic Version:

Protected Overrides Sub SavePageStateToPersistenceMedium(ByVal state As Object)
    MyBase.SavePageStateToPersistenceMedium(state)

    Dim formatter As New LosFormatter()
    Dim viewStateLength = -1

    Using writer As New StringWriter()
        formatter.Serialize(writer, state)
        viewStateLength = writer.ToString().Length
    End Using

    Response.Write(String.Format("<h1 class="" viewstate-summary="">Total ViewState Size For This Page: {0:N0} bytes</h1>", viewStateLength))
End Sub

C# Version:

protected override void SavePageStateToPersistenceMedium(object state)
{
    base.SavePageStateToPersistenceMedium(state);

    var formatter = new LosFormatter();
    var viewStateLength = -1;

    using (var writer = new StringWriter())
    {
        formatter.Serialize(writer, state);
        viewStateLength = writer.ToString().Length;
    }

    Response.Write(String.Format(@"<h1 class="" viewstate-summary="">Total ViewState Size For This Page: {0:N0} bytes</h1>", viewStateLength));
}

The approach overrides the SavePageStateToPersistenceMedium method, which is what is invoked when the page is ready to persist its view state. In ASP.NET 1.x you would override this method to store view state to an alternative store, such as to a file on the web server, rather than in a hidden input field on the form. Starting with ASP.NET 2.0 you could use the PageStatePersister class. However, here I just want to compute the size of the serialized view state string. Consequently, I start by calling the base class's SavePageStateToPersistenceMedium method. Next, I replicate the default logic that the ASP.NET Page class uses to serialize view state - namely, I create a LosFormatter object and serialize the content to a StringWriter. Once I've done this I can determine the size of the persisted view state by getting the StringWriter's contents and determining how many characters are included. The above code can be placed directly in a code-behind class or, better yet, in a custom base Page class.

The above programmatic approach is relatively easy to implement and works in all versions of ASP.NET. However, it won't produce the precise view state size for ASP.NET 2.0 applications and beyond. This is because the LosFormatter class was replaced with a new formatting type, ObjectStateFormatter, starting in ASP.NET 2.0. (You can certainly use the LosFormatter code above in ASP.NET 2.0 and beyond applications, as the class remains in the framework for backwards compatibility. Granted, the reported view state size and actual size will differ slightly, but in analyzing whether a page contains too much view state or not, precise numbers aren't required - a close estimate will usually suffice.)

To get precise measurements we can use the ASP.NET 2.0+ by doing the following:

1. Create a class that extends the HiddenFieldPageStatePersister class. This is the class that is used by ASP.NET (by default) to persist view state and other information to hidden form fields. We want to extend this class to include a property that reports the size of the persisted state, and
   
2. Override the Page class's PageStatePersister property and return the custom persister class created in step 1.
3. Override the Page class's SavePageStateToPersistenceMedium method and read the value of the view state size from the class created in step 1.
   

Here's the code for the class that extends HiddenFieldPageStatePersister, which I've named MyHiddenFieldPageStatePersister (please don't mock me for my lack of naming creativity). This class is pretty simple: it defines a property named StateSize, overrides the Save method, and then sets the StateSize property from this method using the same code/logic as used internally by the HiddenFieldPageStatePersister class. The code snippet below takes advantage of some language features that you might not have at your disposal if you're using an older version of C# or VB (for example, the use of automatic properties). But the concept is sound and should work (with a little tweaking) in earlier versions of VB/C#. (I tested this using ASP.NET 4. You can download the complete source code here.)

Visual Basic Version:

Public Class MyHiddenFieldPageStatePersister
    Inherits HiddenFieldPageStatePersister

    Public Sub New(ByVal page As Page)
        MyBase.New(page)
    End Sub

    Public Overrides Sub Save()
        If MyBase.ViewState IsNot Nothing OrElse MyBase.ControlState IsNot Nothing Then
            Me.StateSize = MyBase.StateFormatter.Serialize(New Pair(MyBase.ViewState, MyBase.ControlState)).Length
        End If
        
        MyBase.Save()
    End Sub

    Public Property StateSize As Integer
End Class

C# Version:

public class MyHiddenFieldPageStatePersisterCS : HiddenFieldPageStatePersister
{
    public MyHiddenFieldPageStatePersisterCS(Page page) : base(page) { }

    public override void Save()
    {
        if (base.ViewState != null || base.ControlState != null)
            this.StateSize = base.StateFormatter.Serialize(new Pair(base.ViewState, base.ControlState)).Length;

        base.Save();
    }

    public int StateSize
    {
        get;
        private set;
    }
}

The last step, then, is to override the Page class's PageStatePersister property and return an instance of our persister class, MyHiddenFieldPageStatePersister. Again, this can be done in the code-behind class of an ASP.NET page, but I recommend putting it in a custom base Page class.

Visual Basic Version:

Private _PageStatePersister As PageStatePersister = Nothing

Protected Overrides ReadOnly Property PageStatePersister As System.Web.UI.PageStatePersister
    Get
        If _PageStatePersister Is Nothing Then
            _PageStatePersister = New MyHiddenFieldPageStatePersister(Me)
        End If

        Return _PageStatePersister
    End Get
End Property

C# Version:

private PageStatePersister _PageStatePersister = null;

protected override PageStatePersister PageStatePersister
{
    get
    {
        if (_PageStatePersister == null)
            _PageStatePersister = new MyHiddenFieldPageStatePersisterCS(this);

        return _PageStatePersister;
    }
}

EDIT [2010-07-07]: I forget an important final piece of the puzzle for using the MyHiddenFieldPageStatePersister class! In addition to overriding the PageStatePersister property you also need to override the SavePageStateToPersistenceMedium method like in the LosFormatter example, but instead of using LosFormatter you need to read the value of the StateSize property from the MyHiddenFieldPageStatePersister class. The code for this overridden method follows:

Visual Basic Version:

Protected Overrides Sub SavePageStateToPersistenceMedium(ByVal state As Object)
    MyBase.SavePageStateToPersistenceMedium(state)

    Dim myPersister As MyHiddenFieldPageStatePersister = CType(Me.PageStatePersister, MyHiddenFieldPageStatePersister)

    Response.Write(String.Format("
Total ViewState Size For This Page: {0:N0} bytes
", myPersister.StateSize))
End Sub

C# Version:

protected override void SavePageStateToPersistenceMedium(object state)
{
    base.SavePageStateToPersistenceMedium(state);

    var myPersister = this.PageStatePersister as MyHiddenFieldPageStatePersisterCS;

    if (myPersister != null)
        Response.Write(String.Format(@"
Total ViewState Size For This Page: {0:N0} bytes
", myPersister.StateSize));
}

Happy Programming!

The SoCal Code Camp is coming to San Diego, California this weekend, June 26th and 27th. This free event boasts nearly 100 talks given by dozens of speakers from around the area covering a wide swath of interesting technology-related topics. This year the Code Camp is hosted at the beautiful UC-San Diego campus.

I will be presenting two talks:

• Take Control of Your Website's URLs with ASP.NET Routing -  Sunday, June 27th, 9:00 AM, Rm 101
  Did you know that ASP.NET has a powerful URL routing framework built into it? This talk explores the ASP.NET Routing system and how to use it to create SEO-friendly, human-readble URLs in both MVC and Web Form applications.
  
  
• Getting Started with ASP.NET MVC - Sunday, June 27th, 10:15 AM, Rm 101
  ASP.NET MVC brings the Model-View-Controller design pattern to ASP.NET. In this talk, Scott shows how to get started with ASP.NET MVC, explores how to create and use Models, Views, and Controllers, and walks through a creating a simple, end-to-end ASP.NET MVC application.

If you plan on attending the Getting Started with ASP.NET MVC talk I encourage you to also attend Take Control of Your Website's URLs with ASP.NET Routing, as routing is an important aspect of ASP.NET MVC.

For a full list of talks being presented this year, see the schedule posted on the SoCal Code Camp website.

Hope to see you there!

Thanks everyone who came to my Ajax talk tonight at the .NET Developers Association! The slides and demos from the talk can be downloaded by clicking the following link:

• ASP.NET Ajax: What’s New? 

You need Visual Studio  2010 to view the code samples. The first project, named Demos, contains the following samples:

• ASPAjax4
  • 1_CompositeScripts.aspx – Demonstrates how to use the ScriptManger to combine, compress, and cache JavaScript files automatically.
  • 2_EnableCdn.aspx – Demonstrates how to retrieve ASP.NET Ajax framework scripts from the Microsoft Ajax CDN automatically.
• jQuery
  • 1_Selectors.aspx – Demonstrates how to use jQuery selectors
  • 2_WebForms.aspx – Demonstrates how to use the client tablesorter plugin with ASP.NET Web Forms.
  • 3_MVC.aspx – Demonstrates how to use jQuery animation and the templating plugin with ASP.NET MVC.
  • 4_OData.aspx – Demonstrates how to use jQuery with the Netflix API by using JSONP and odata.
  • 5_Templating.aspx – Demonstrates how to use jQuery client templating.
  • 6_TemplateConditionals.aspx – Demonstrates how to use logic within a jQuery template.
  • 7_DataLinking.aspx – Demonstrates how to perform data-binding in jQuery.
  • 8_Converters.aspx – Demonstrates how to defines converters that work with data-binding.

The second project, named ACT_Tools, illustrates how to use the Microsoft Ajax Minifier and the JSBuild JavaScript preprocessor. When you perform a build in Visual Studio, all JavaScript and CSS files are minified automatically. Furthermore, any *.pre.js file is processed using the JSBuild preprocessor and the output is saved to the ScriptOutput folder. Select Show All Files in Visual Studio to see the generated results of the minifier and the preprocessor.

Thanks everyone who came to my talks on ASP.NET Web Forms and MVC in Moscow last week! 

Here are the slide decks and demo code for the two talks (You need Visual Studio 2010):

• What’s New in ASP.NET MVC 2?

• What’s New in ASP.NET 4 Web Forms?

I had a great time in Russia. On the second day, I had an opportunity to walk around Moscow. Here’s a picture of me standing in Red Square:

Here’s a picture of me eating Chicken Kiev with Microsoft evangelist James Senior.

James has just started his worldwide Web Camp tour to promote ASP.NET 4. He is traveling non-stop country to country. After Russia, he is off to China and Australia. You can find out more about the Web Camps here:

http://www.webcamps.ms/

I’m traveling to Russia and speaking in Moscow next week at the DevConf. This will be the first time that I have visited Russia, and I know that there is a strong ASP.NET community in Russia, so I am very excited about the trip.

I’m speaking at the DevConf (http://www.devconf.ru/). I don’t speak Russian, so the only words that I recognize off the home page of the conference website are ASP.NET and JavaScript (PHP, Perl, Python, and Ruby must be Russian words).

I’m giving talks on both ASP.NET Web Forms and ASP.NET MVC:

What’s New in ASP.NET 4 Web Forms

Learn about the new features just released with ASP.NET 4 Web Forms and Visual Studio 2010 that enable you to be more productive and build better websites. Learn how to take control of your markup, client IDs, and view state. Learn how to take advantage of routing with Web Forms to make your websites more search engine friendly.

 

What’s New in ASP.NET MVC 2

Come learn about the new features being introduced with ASP.NET MVC 2. Templated helpers allow associating edit and display elements with data types automatically. Areas provide a means of dividing a large Web application into multiple projects. Data annotations allows attaching metadata attributes on a model to control validation. Client validation enables form field validation without the need to perform a roundtrip to the server. Learn how these new features enable you to be more productive when building ASP.NET MVC applications.

Hope to see you at the conference next week!

The goal of this blog entry is to describe how you can host a simple Ajax application created with jQuery in the Windows Azure cloud. In this blog entry, I make no assumptions. I assume that you have never used Windows Azure and I am going to walk through the steps required to host the application in the cloud in agonizing detail.

Our application will consist of a single HTML page and a single service. The HTML page will contain jQuery code that invokes the service to retrieve and display set of records.

There are five steps that you must complete to host the jQuery application:

1. Sign up for Windows Azure
2. Create a Hosted Service
3. Install the Windows Azure Tools for Visual Studio
4. Create a Windows Azure Cloud Service
5. Deploy the Cloud Service

Sign Up for Windows Azure

Go to http://www.microsoft.com/windowsazure/ and click the Sign up Now button. Select one of the offers. I selected the Introductory Special offer because it is free and I just wanted to experiment with Windows Azure for the purposes of this blog entry.

To sign up, you will need a Windows Live ID and you will need to enter a credit card number. After you finish the sign up process, you will receive an email that explains how to activate your account.

Accessing the Developer Portal

After you create your account and your account is activated, you can access the Windows Azure developer portal by visiting the following URL:

http://windows.azure.com/

When you first visit the developer portal, you will see the one project that you created when you set up your Windows Azure account (In a fit of creativity, I named my project StephenWalther).

Creating a New Windows Azure Hosted Service

Before you can host an application in the cloud, you must first add a hosted service to your project. Click your project on the summary page and click the New Service link. You are presented with the option of creating either a new Storage Account or a new Hosted Services.

Because we have code that we want to run in the cloud – the WCF Service -- we want to select the Hosted Services option. After you select this option, you must provide a name and description for your service. This information is used on the developer portal so you can distinguish your services.

When you create a new hosted service, you must enter a unique name for your service (I selected jQueryApp) and you must select a region for this service (I selected Anywhere US). Click the Create button to create the new hosted service.

Install the Windows Azure Tools for Visual Studio

We’ll use Visual Studio to create our jQuery project. Before you can use Visual Studio with Windows Azure, you must first install the Windows Azure Tools for Visual Studio.

Go to http://www.microsoft.com/windowsazure/ and click the Get Tools and SDK button. The Windows Azure Tools for Visual Studio works with both Visual Studio 2008 and Visual Studio 2010.

Installation of the Windows Azure Tools for Visual Studio is painless. You just need to check some agreement checkboxes and click the Next button a few times and installation will begin:

Creating a Windows Azure Application

After you install the Windows Azure Tools for Visual Studio, you can choose to create a Windows Azure Cloud Service by selecting the menu option File, New Project and selecting the Windows Azure Cloud Service project template. I named my new Cloud Service with the name jQueryApp.

Next, you need to select the type of Cloud Service project that you want to create from the New Cloud Service Project dialog.

I selected the C# ASP.NET Web Role option. Alternatively, I could have picked the ASP.NET MVC 2 Web Role option if I wanted to use jQuery with ASP.NET MVC or even the CGI Web Role option if I wanted to use jQuery with PHP.

After you complete these steps, you end up with two projects in your Visual Studio solution. The project named WebRole1 represents your ASP.NET application and we will use this project to create our jQuery application.

Creating the jQuery Application in the Cloud

We are now ready to create the jQuery application. We’ll create a super simple application that displays a list of records retrieved from a WCF service (hosted in the cloud).

Create a new page in the WebRole1 project named Default.htm and add the following code:

 <!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>
    <title>Products</title>
    <style type="text/css">
    
        #productContainer div {
            border:solid 1px black;
            padding:5px;
            margin:5px;
        }
        
    
    </style>
</head>
<body>

    <h1>Product Catalog</h1>    

    <div id="productContainer"></div>

    <script id="productTemplate" type="text/html">
    <div>
        Name: {{= name }} <br />
        Price: {{= price }}     
    </div>
    </script>

    <script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script>
    <script src="Scripts/jquery.tmpl.js" type="text/javascript"></script>

    <script type="text/javascript">

        var products = [
            {name:"Milk", price:4.55},
            {name:"Yogurt", price:2.99},
            {name:"Steak", price:23.44}
        ];

        $("#productTemplate").render(products).appendTo("#productContainer");

    </script>

</body>
</html>

The jQuery code in this page simply displays a list of products by using a template. I am using a jQuery template to format each product. You can learn more about using jQuery templates by reading the following blog entry by Scott Guthrie:

http://weblogs.asp.net/scottgu/archive/2010/05/07/jquery-templates-and-data-linking-and-microsoft-contributing-to-jquery.aspx

You can test whether the Default.htm page is working correctly by running your application (hit the F5 key). The first time that you run your application, a database is set up on your local machine to simulate cloud storage. You will see the following dialog:

If the Default.htm page works as expected, you should see the list of three products:

Adding an Ajax-Enabled WCF Service

In the previous section, we created a simple jQuery application that displays an array by using a template. The application is a little too simple because the data is static. In this section, we’ll modify the page so that the data is retrieved from a WCF service instead of an array.

First, we need to add a new Ajax-enabled WCF Service to the WebRole1 project. Select the menu option Project, Add New Item and select the Ajax-enabled WCF Service project item. Name the new service ProductService.svc.

Modify the service so that it returns a static collection of products. The final code for the ProductService.svc should look like this:

using System.Collections.Generic;
using System.ServiceModel;
using System.ServiceModel.Activation;

namespace WebRole1 {

    public class Product {
        public string name { get; set; }
        public decimal price { get; set; }
    }

    [ServiceContract(Namespace = "")]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class ProductService {

        [OperationContract]
        public IList<Product> SelectProducts() {
            var products = new List<Product>();
            products.Add(new Product {name="Milk", price=4.55m} );
            products.Add(new Product { name = "Yogurt", price = 2.99m });
            products.Add(new Product { name = "Steak", price = 23.44m });
            
            return products;
        }

    }
}

In real life, you would want to retrieve the list of products from storage instead of a static array. We are being lazy here.

Next you need to modify the Default.htm page to use the ProductService.svc. The jQuery script in the following updated Default.htm page makes an Ajax call to the WCF service. The data retrieved from the ProductService.svc is displayed in the client template.

<!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>
    <title>Products</title>
    <style type="text/css">
    
        #productContainer div {
            border:solid 1px black;
            padding:5px;
            margin:5px;
        }
        
    
    </style>
</head>
<body>

    <h1>Product Catalog</h1>    

    <div id="productContainer"></div>

    <script id="productTemplate" type="text/html">
    <div>
        Name: {{= name }} <br />
        Price: {{= price }}     
    </div>
    </script>

    <script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script>
    <script src="Scripts/jquery.tmpl.js" type="text/javascript"></script>

    <script type="text/javascript">

        $.post("ProductService.svc/SelectProducts", function (results) {
            var products = results["d"];
            $("#productTemplate").render(products).appendTo("#productContainer");
        });

    </script>

</body>
</html>

Deploying the jQuery Application to the Cloud

Now that we have created our jQuery application, we are ready to deploy our application to the cloud so that the whole world can use it. Right-click your jQueryApp project in the Solution Explorer window and select the Publish menu option.

When you select publish, your application and your application configuration information is packaged up into two files named jQueryApp.cspkg and ServiceConfiguration.cscfg. Visual Studio opens the directory that contains the two files.

In order to deploy these files to the Windows Azure cloud, you must upload these files yourself. Return to the Windows Azure Developers Portal at the following address:

http://windows.azure.com/

Select your project and select the jQueryApp service. You will see a mysterious cube. Click the Deploy button to upload your application.

Next, you need to browse to the location on your hard drive where the jQueryApp project was published and select both the packaged application and the packaged application configuration file. Supply the deployment with a name and click the Deploy button.

While your application is in the process of being deployed, you can view a progress bar.

Running the jQuery Application in the Cloud

Finally, you can run your jQuery application in the cloud by clicking the Run button.

It might take several minutes for your application to initialize (go grab a coffee). After WebRole1 finishes initializing, you can navigate to the following URL to view your live jQuery application in the cloud:

http://jqueryapp.cloudapp.net/default.htm

The page is hosted on the Windows Azure cloud and the WCF service executes every time that you request the page to retrieve the list of products.

Summary

Because we started from scratch, we needed to complete several steps to create and deploy our jQuery application to the Windows Azure cloud. We needed to create a Windows Azure account, create a hosted service, install the Windows Azure Tools for Visual Studio, create the jQuery application, and deploy it to the cloud. Now that we have finished this process once, modifying our existing cloud application or creating a new cloud application is easy.

jQuery and Windows Azure work nicely together. We can take advantage of jQuery to build applications that run in the browser and we can take advantage of Windows Azure to host the backend services required by our jQuery application.

The big benefit of Windows Azure is that it enables us to scale. If, all of the sudden, our jQuery application explodes in popularity, Windows Azure enables us to easily scale up to meet the demand. We can handle anything that the Internet might throw at us.

One objection that people always raise against Ajax applications concerns browser history. Because an Ajax application updates its content by performing sneaky Ajax postbacks, the browser backwards and forwards buttons don’t work as you would normally expect.

In a normal, non-Ajax application, when you click the browser back button, you return to a previous state of the application. For example, if you are paging through a set of movie records, you might return to the previous page of records.

In an Ajax application, on the other hand, the browser backwards and forwards buttons do not work as you would expect. If you navigate to the second page in a list of records and click the backwards button, you won’t return to the previous page. Most likely, you will end up navigating away from the application entirely (which is very unexpected and irritating).

Bookmarking presents a similar problem. You cannot bookmark a particular page of records in an Ajax application because the address bar does not reflect the state of the application.

The Ajax Solution

There is a solution to both of these problems. To solve both of these problems, you must take matters into your own hands and take responsibility for saving and restoring your application state yourself. Furthermore, you must ensure that the address bar gets updated to reflect the state of your application.

In this blog entry, I demonstrate how you can take advantage of a jQuery library named bbq that enables you to control browser history (and make your Ajax application bookmarkable) in a cross-browser compatible way.

The JavaScript Libraries

In this blog entry, I take advantage of the following four JavaScript files:

1. jQuery-1.4.2.js – The jQuery library. Available from the Microsoft Ajax CDN at http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js
2. jquery.pager.js – Used to generate pager for navigating records. Available from http://plugins.jquery.com/project/Pager
3. microtemplates.js – John Resig’s micro-templating library. Available from http://ejohn.org/blog/javascript-micro-templating/
4. jquery.ba-bbq.js – The Back Button and Query (BBQ) Library. Available from http://benalman.com/projects/jquery-bbq-plugin/

All of these libraries, with the exception of the Micro-templating library, are available under the MIT open-source license.

The Ajax Application

Let’s start by building a simple Ajax application that enables you to page through a set of movie database records, 3 records at a time.

We’ll use my favorite database named MoviesDB. This database contains a Movies table that looks like this:

We’ll create a data model for this database by taking advantage of the ADO.NET Entity Framework. The data model looks like this:

Finally, we’ll expose the data to the universe with the help of a WCF Data Service named MovieService.svc. The code for the data service is contained in Listing 1.

Listing 1 – MovieService.svc

using System.Data.Services;
using System.Data.Services.Common;

namespace WebApplication1
{
    public class MovieService : DataService<MoviesDBEntities>
    {
        public static void InitializeService(DataServiceConfiguration config)
        {
            config.SetEntitySetAccessRule("Movies", EntitySetRights.AllRead);
            config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V2;
        }
    }
}

The WCF Data Service in Listing 1 exposes the movies so that you can query the movie database table with URLs that looks like this:

• http://localhost:2474/MovieService.svc/Movies -- Returns all movies
• http://localhost:2474/MovieService.svc/Movies?$top=5 – Returns 5 movies

The HTML page in Listing 2 enables you to page through the set of movies retrieved from the WCF Data Service.

Listing 2 – Original.html

<!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>
    <title>Movies with History</title>
    <link href="Design/Pager.css" rel="stylesheet" type="text/css" />
</head>
<body>

<h1>Page <span id="pageNumber"></span> of <span id="pageCount"></span></h1>

<div id="pager"></div>
  <br style="clear:both" /><br />
<div id="moviesContainer"></div>

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script> 
<script src="App_Scripts/Microtemplates.js" type="text/javascript"></script>
<script src="App_Scripts/jquery.pager.js" type="text/javascript"></script>
<script type="text/javascript">
    var pageSize = 3, pageIndex = 0;

    // Show initial page of movies
    showMovies();

    function showMovies() {
        // Build OData query
        var query = "/MovieService.svc" // base URL
            + "/Movies" // top-level resource
            + "?$skip=" + pageIndex * pageSize // skip records
            + "&$top=" + pageSize  // take records
            + " &$inlinecount=allpages";  // include total count of movies

        // Make call to WCF Data Service
        $.ajax({
            dataType: "json",
            url: query,
            success: showMoviesComplete
        });
    }

    function showMoviesComplete(result) {
        // unwrap results
        var movies = result["d"]["results"];
        var movieCount = result["d"]["__count"]

        // Show movies using template
        var showMovie = tmpl("<li><%=Id%> - <%=Title %></li>");
        var html = "";
        for (var i = 0; i < movies.length; i++) {
            html += showMovie(movies[i]);
        }
        $("#moviesContainer").html(html);

        // show pager
        $("#pager").pager({
            pagenumber: (pageIndex + 1),
            pagecount: Math.ceil(movieCount / pageSize),
            buttonClickCallback: selectPage
        });

        // Update page number and page count
        $("#pageNumber").text(pageIndex + 1);
        $("#pageCount").text(movieCount);
    }

    function selectPage(pageNumber) {
        pageIndex = pageNumber - 1;
        showMovies();
    }

</script>
</body>
</html>

The page in Listing 3 has the following three functions:

• showMovies() – Performs an Ajax call against the WCF Data Service to retrieve a page of movies.
• showMoviesComplete() – When the Ajax call completes successfully, this function displays the movies by using a template. This function also renders the pager user interface.
• selectPage() – When you select a particular page by clicking on a page number in the pager UI, this function updates the current page index and calls the showMovies() function.

Figure 1 illustrates what the page looks like when it is opened in a browser.

Figure 1

If you click the page numbers then the browser history is not updated. Clicking the browser forward and backwards buttons won’t move you back and forth in browser history.

Furthermore, the address displayed in the address bar does not change when you navigate to different pages. You cannot bookmark any page except for the first page.

Adding Browser History

The Back Button and Query (bbq) library enables you to add support for browser history and bookmarking to a jQuery application. The bbq library supports two important methods:

1. jQuery.bbq.pushState(object) – Adds state to browser history.
2. jQuery.bbq.getState(key) – Gets state from browser history.

The bbq library also supports one important event:

1. hashchange – This event is raised when the part of an address after the hash # is changed.

The page in Listing 3 demonstrates how to use the bbq library to add support for browser navigation and bookmarking to an Ajax page.

Listing 3 – Default.html

<!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>
    <title>Movies with History</title>
    <link href="Design/Pager.css" rel="stylesheet" type="text/css" />
</head>
<body>

<h1>Page <span id="pageNumber"></span> of <span id="pageCount"></span></h1>

<div id="pager"></div>
  <br style="clear:both" /><br />
<div id="moviesContainer"></div>

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script> 
<script src="App_Scripts/jquery.ba-bbq.js" type="text/javascript"></script>
<script src="App_Scripts/Microtemplates.js" type="text/javascript"></script>
<script src="App_Scripts/jquery.pager.js" type="text/javascript"></script>
<script type="text/javascript">
    var pageSize = 3, pageIndex = 0;

    $(window).bind('hashchange', function (e) {
        pageIndex = e.getState("pageIndex") || 0;
        pageIndex = parseInt(pageIndex);
        showMovies();
    });

    $(window).trigger('hashchange');

    function showMovies() {
        // Build OData query
        var query = "/MovieService.svc" // base URL
            + "/Movies" // top-level resource
            + "?$skip=" + pageIndex * pageSize // skip records
            + "&$top=" + pageSize  // take records
            +" &$inlinecount=allpages";  // include total count of movies

        // Make call to WCF Data Service
        $.ajax({
            dataType: "json",
            url: query,
            success: showMoviesComplete
        });
    }

    function showMoviesComplete(result) {
        // unwrap results
        var movies = result["d"]["results"];
        var movieCount = result["d"]["__count"]

        // Show movies using template
        var showMovie = tmpl("<li><%=Id%> - <%=Title %></li>");
        var html = "";
        for (var i = 0; i < movies.length; i++) {
            html += showMovie(movies[i]);
        }
        $("#moviesContainer").html(html);

        // show pager
        $("#pager").pager({
            pagenumber: (pageIndex + 1),
            pagecount: Math.ceil(movieCount / pageSize),
            buttonClickCallback: selectPage
        });

        // Update page number and page count
        $("#pageNumber").text(pageIndex + 1);
        $("#pageCount").text(movieCount);
    }

    function selectPage(pageNumber) {
        pageIndex = pageNumber - 1;
        $.bbq.pushState({ pageIndex: pageIndex });
    }

</script>
</body>
</html>

Notice the first chunk of JavaScript code in Listing 3:

$(window).bind('hashchange', function (e) {
    pageIndex = e.getState("pageIndex") || 0;
    pageIndex = parseInt(pageIndex);
    showMovies();
});

$(window).trigger('hashchange');

When the hashchange event occurs, the current pageIndex is retrieved by calling the e.getState() method. The value is returned as a string and the value is cast to an integer by calling the JavaScript parseInt() function. Next, the showMovies() method is called to display the page of movies.

The $(window).trigger() method is called to raise the hashchange event so that the initial page of records will be displayed.

When you click a page number, the selectPage() method is invoked. This method adds the current page index to the address by calling the following method:

$.bbq.pushState({ pageIndex: pageIndex });

For example, if you click on page number 2 then page index 1 is saved to the URL. The URL looks like this:

Notice that when you click on page 2 then the browser address is updated to look like:

/Default.htm#pageIndex=1

If you click on page 3 then the browser address is updated to look like:

/Default.htm#pageIndex=2

Because the browser address is updated when you navigate to a new page number, the browser backwards and forwards button will work to navigate you backwards and forwards through the page numbers. When you click page 2, and click the backwards button, you will navigate back to page 1.

Furthermore, you can bookmark a particular page of records. For example, if you bookmark the URL /Default.htm#pageIndex=1 then you will get the second page of records whenever you open the bookmark.

Summary

You should not avoid building Ajax applications because of worries concerning browser history or bookmarks. By taking advantage of a JavaScript library such as the bbq library, you can make your Ajax applications behave in exactly the same way as a normal web application.