---

July 2011

Volume 26 Number 07

Web Development - Visual Studio 2010 SP1 for Web Developers

By Scott Hanselman | July 2011

Visual Studio 2010 SP1 was released in March. This service pack addresses issues found by customers in partner feedback and internal testing. At the same time Visual Studio 2010 SP1 was released, a number of new components for Web developers came out. This article explores the Web development improvements in Visual Studio 2010 SP1. Most of the improvements were done to integrate Visual Studio SP1 with the new offerings on the Microsoft Web Platform, such as IIS Express 7.5, SQL Server Compact Edition 4.0 (SQL Server CE hereafter for brevity), the new Razor syntax and the Web Platform Installer (Web PI). Other improvements include support for bin-deployable dependencies such as ASP.NET MVC 3, as well as HTML5 and CSS3 support within Visual Studio 2010 SP1 itself.

This article assumes that you have Visual Studio 2010 SP1 installed. It can be downloaded as a standalone installer or using the Web PI. Details on where to get it can be found at bit.ly/hnU6mm.

The Web PI is a free tool that makes it easier to get the latest components of the Microsoft Web Platform. More details can be found at bit.ly/a6dLu.

New Features Light Up in Visual Studio 2010 SP1

IIS Express 7.5, SQL Server CE, Visual Studio Tools for SQL Server CE and ASP.NET MVC 3 with Razor are separate components installed after Visual Studio 2010 SP1. In fact, support for these features within Visual Studio 2010 SP1 lies in a dormant state until you’ve installed them on your machine.

There are various ways to download and install the components. There are a few hard ways, and the easy way. You could look for and download each standalone component on your own. Perhaps this would be appropriate for an enterprise or controlled deployment of Visual Studio 2010 SP1. You can use the Web PI to find, download and install each package separately, which is useful if you only want certain features. We’ll discuss individual installations later. However, the easiest way is to use a “bundle” of all these features within the Web PI. We’ve taken the liberty of making this short URL for you that will launch the Web PI and automatically select the right options for you to get everything: hnsl.mn/VS2010SP1Bundle.

The Web PI is smart about what you have on your machine. If you have literally nothing—no development tools—on your machine, this link will automatically install the free Visual Studio Web Developer Express SP1 and all the new features. However, if you have any version of Visual Studio already installed, or even if you have Visual Studio 2010 SP1 and some of the tools, the Web PI will automatically get just the minimum you need to be up-to-date. It’s the “get everything” link.

Make sure that you’ve shut down all your instances of Visual Studio (remember to check Task Manager for devenv.exe) before you start installation.

 You might find yourself opening a project that uses new components you don’t have. Visual Studio 2010 SP1 will detect the missing components automatically if you’re opening an existing Web project that uses some of these new features, and use the Web PI to install them.

Web PI Integration

In this section, we’ll explain how Visual Studio 2010 SP1 can automatically detect missing Web components that are required by a Web project, and also introduce the Web PI toolbar.

Missing component dialogThis is a new dialog introduced in the service pack. This dialog comes up when you open an existing Web project that uses IIS 7.5 Express, SQL Server CE or ASP.NET MVC Razor syntax—and if any of these components aren’t installed on your machine. It offers to download and install the missing components used by the Web project using the Web PI.

For example, Figure 1 shows what you see on a box without SQL Server CE while opening a Web site that uses a SQL Server CE database.

Figure 1 A Warning About a Missing Component and an Offer to Fetch It

At this point, if you click Yes, Visual Studio 2010 SP1 will try to detect if you have the Web PI installed on your machine. If not, it will open the download page in a browser window to at least get you the Web PI.

If you already have the Web PI installed, it will launch the Web PI with the missing component installation selected. It’ll just download what you need. Don’t worry, it’s smart. It won’t download Visual Studio 2010 SP1, because you already have that!

Figure 2 explains what happens after you click Yes or No on the missing component dialog (the orange figures are where your inputs are required; blue figures are steps performed by Visual Studio 2010 SP1).

Figure 2 Steps Taken After You’re Presented with the Missing Component Dialog Box

The Web PI toolbar If you want to download any other components using the Web PI, a new toolbar with an “Install Web Components” button is also added to Visual Studio.

When you click on the button, it will launch the Web PI, or if you don’t have the Web PI, it will take you to the download page. You can select View | Toolbars | Web Platform Installer to show the toolbar if it’s not already up. The “Install Web Components” option is also available under the Tools menu.

IIS Express 7.5 Support

Now that you know how to get the various components installed, let’s explore the IIS Express 7.5 feature in Visual Studio.

IIS Express 7.5 is a lightweight version of IIS optimized for developers. More details can be found at bit.ly/cOfrt4.

IIS Express 7.5 is built from the same code base as IIS 7.5, so it provides Web developers with features of IIS—such as SSL, URL rewrite and MIME types—on the development box, which is similar to the full-product Web server.

IIS Express 7.5 can be downloaded and installed using the Web PI (bit.ly/dfikKe) or the standalone installer (bit.ly/g5RMgc).

Perhaps you have an existing Web site or project that uses Visual Web Development Server (the tiny Web server formerly known as Cassini). You can right-click the Web project in Solution Explorer and convert it to use IIS Express 7.5 (see Figure 3).

Figure 3 Converting from Visual Web Development Server to IIS Express 7.5

Visual Studio 2010 SP1 prompts for a confirmation and then shows that Web project has been successfully set to use IIS Express 7.5.

However, setting projects to use IIS Express 7.5 over and over again is tedious. If you want, you can make IIS Express 7.5 the default Web server for all your projects from the Tools | Options dialog, under Project and Solutions | Web Projects. Check the “Use IIS Express for new file-based web site and projects” option (see Figure 4).

Figure 4 Making IIS Express 7.5 Your Default Web Server

Of course, you can pick and choose and even convert back from IIS Express 7.5 to the Visual Studio Web Development Server on a project-by-project basis. Just right-click a project in Solution Explorer and converting it to use the Visual Studio Web Development Server.

IIS Express 7.5 and Non-Administrators

To create or open an existing IIS Web site or Web project, you need to run Visual Studio 2010 SP1 as an elevated user (administrative mode). This is a hassle for many folks who don’t have that ability. Perhaps it’s restricted by IT, or perhaps you just like to avoid running as an administrator when you don’t have a good reason to do so.

Fortunately, you can use IIS Express 7.5 as the Web server for Web projects without the need to run Visual Studio 2010 SP1 in the context of an administrator account. Once it’s installed, any user can work with Visual Studio 2010 SP1 and IIS Express 7.5 as a non-admin.

IIS Express 7.5 Properties

IIS Express 7.5 has a number of custom properties for each project that can be set from the properties window (select the project in Solution Explorer and press F4 to bring up the properties window). Figure 5 shows the properties window.

Figure 5 The Project Properties Window

Following are the properties specific to IIS Express 7.5:

1. Anonymous Authentication—To enable/disable anonymous authentication. Anonymous authentication allows any user to access the site without providing a user name and password challenge to the client browser. By default it’s enabled.

2. Managed Pipeline Mode (can be integrated or classic):

   Integrated—The ApplicationPool object will use the integrated request-processing pipelines of IIS 7 and ASP.NET to process requests for managed code.

   Classic—IIS 7 will route requests for managed code through the aspnet_isapi.dll, which processes requests the same as if the application were running in IIS 6.

3. SSL Enabled—Set it to true to enable SSL for the site.

4. SSL URL—The SSL URL.

5. URL—The URL of the Web site.

6. Windows Authentication—This can be enabled or disabled; use Windows authentication to authenticate using the Windows NT LAN Manager (NTLM) or Kerberos protocols.

Settings that you change in the properties toolbox are stored in “My Documents\IISExpress\config\applicationhost.config.” Note that these settings are not in the “C:\Program Files” folder. Each user has its own IIS Express 7.5 configuration. Because these are strictly set on the local IIS Express 7.5 instance and the config file isn’t included in the solution file, it isn’t persisted in the source control, so be aware.

Sharing IIS Express 7.5 Projects with Visual Studio 2010 RTM

Say you have a project using IIS Express 7.5 on localhost:20221 and you want to share it with your teammate who still has Visual Studio 2010 RTM. As soon as she opens the Web project on her box, it would throw an error similar to “Could not find the server ‘https://localhost:20221’ on the local machine.”  

The reason behind this error is that Visual Studio 2010 RTM doesn’t know about IIS Express and is trying to find locahost:20221.

You can work around this in a Web Application Project by un-checking “Apply server settings to all users (store in project file)” in the Property pages | Web tab (see Figure 6).

(click to zoom)

Figure 6 Make Server Selection and Related Settings on a Per-User Basis

Right-click the project in Solution Explorer and select Properties from the context menu to bring up the Property pages.

This causes the server selection (Visual Web Development Server or IIS Express 7.5) and related settings to be stored on a per-user basis in the user file rather than in the project file, thus causing the server selection to not persist into source control.

This will allow the Visual Studio 2010 RTM users on the team to still use Visual Studio Development Server while the Visual Studio 2010 SP1 user can use IIS Express 7.5 for the same project. For Web site projects, everyone on the team needs to be using Visual Studio 2010 SP1 to be able to share projects and use IIS Express 7.5.

SQL Server CE Support

Microsoft SQL Server CE is a free, embedded database that can be used for building ASP.NET Web sites and desktop applications. It’s a lightweight database that doesn’t need any installations. On a production server, a Web project can use a SQL Server CE database by just dropping SQL Server CE database engine assemblies in the bin folder. (See the “Deployable Dependency” section of this article to see how Visual Studio can automatically help add the required assemblies to the bin folder.)

For more details on SQL Server CE, see bit.ly/dsWBbM and bit.ly/hvgQQV. To get SQL Server CE support in Visual Studio 2010 SP1, components can be downloaded using the Web PI (bit.ly/maOfQX) or via a standalone installer. For the latter, install the following two components: the SQL Server CE runtime (bit.ly/f86AyF) and the Visual Studio for SQL Server tools (bit.ly/kvxEQi).

In this section we’ll explore SQL Server CE features that light up after you install the required components.

With Visual Studio 2010 SP1, you can now create a SQL Server CE database using the new templates (see Figure 7). (To bring up the “Add a new item” dialog, right-click on the project in the Solution Explorer and select “Add new item.”) While adding the .sdf file into a Web application project, Visual Studio 2010 SP1 automatically adds a reference to System.Data.SqlServerCE, whereas for a Web site, it updates the web.config to add the assembly.

(click to zoom)

Figure 7 Creating a SQL Server CE Database

To perform various tasks with .sdf files, double-click the .sdf file in Solution Explorer, which will open up the Server Explorer pane (see Figure 8).

Figure 8 Right-Clicking on an .sdf File to Perform Various Tasks

The Server Explorer helps perform various tasks such as creating a new table, editing an existing one, editing the table schema, showing table data and more.

Other data features in Visual Studio 2010 SP1 such as keys/index management, Entity Framework Designer and Server/Database Explorer have also been updated to support SQL Server CE databases.

Razor Support

In Visual Studio 2010 SP1, changes are made to the Web project systems and to the HTML editor to support the new Razor syntax. This new syntax is used by ASP.NET Web Pages and by ASP.NET MVC 3.

Read more about the ASP.NET MVC Razor syntax at bit.ly/aj0AuM.

To get Razor syntax support in Visual Studio 2010 SP1, you need to download ASP.NET MVC 3.

The Web PI link to download ASP.NET MVC 3 is bit.ly/biXkTD. The ASP.NET MVC 3 standalone installer is at bit.ly/hd2LDs.

Here’s a post that explains what gets installed with ASP.NET MVC 3: bit.ly/e7T4A3.

The following support has been added for Razor syntax:

Colorization With Visual Studio 2010 SP1 and ASP.NET MVC 3, when you open a Razor file (.cshtml or .vbhtml), the Visual Studio Editor colorizes the HTML and the C# or Visual Basic content.

You can also change the default background color for Razor code blocks on the Tools | Options dialog, by selecting Environment | Fonts and Colors (see Figure 9).

Figure 9 Changing the Default Background Color for Razor Code Blocks

IntelliSense Full HTML and C#/Visual Basic language IntelliSense support is provided in a Razor file. See Figure 10 for an example.

(click to zoom)

Figure 10 IntelliSense Support for Razor Code

Debugging As with support for other language files, you can add breakpoints in a Razor file and use all the debugging features of the IDE (such as step over, watch list and more).

For an inline Razor expression, breakpoints can’t be added by clicking on the margin. The trick is to move the cursor to an expression and then press F9 (shortcut to add a breakpoint).

Deployable Dependencies

In previous sections, we talked about how to download, install and explore features for SQL Server CE, Razor and ASP.NET MVC 3. Now we want to publish our Web project that’s using these features to a remote Web server. We’re not sure if the remote server has SQL Server CE, Razor or ASP.NET MVC 3 installed and we don’t have control over what can be installed on it. Visual Studio 2010 SP1 can actually help us “bin deploy” binaries for these components using the Add Deployable Dependencies feature (see Figure 11).

Figure 11 The Add Deployable Dependencies Feature

The bin folder is a special folder in Web projects that’s recognized by ASP.NET. A bin folder can contain compiled assemblies for custom ASP.NET controls, components or other code referenced in the Web application.

Our Web application might have dependency on a component (for example, SQL Server CE), and we want to publish our Web site on a server that doesn’t have this dependency installed (it doesn’t have SQL Server CE installed).

To “bin deploy” means to deploy an application with the dependencies copied into the application’s bin folder rather than installing the dependencies into the Global Assembly Cache (GAC) using an installer.

To bring up the dialog, right-click on the Web project in the Solution Explorer and select “Add Deployable Dependencies …”

Visual Studio 2010 SP1 will show you a dialog with a list of components that are installed on your machine and can be deployed. It shows ASP.NET MVC as an additional option only for an ASP.NET MVC 3 project (see Figure 12).

Figure 12 The Add Deployable Dependencies Dialog Box for a Bin Deploy

Here’s what happens after you click OK. In the case of a Web site, the required assemblies for the components selected would be copied from the dependency install location on your box to an application’s bin folder. Now when you copy or publish your Web site to the Web server, the component works using assemblies from the bin folder.

In a Web application project, assemblies for the components selected would be copied to the _bin_deployableassemblies folder. When the Web application project is built or when we package it for deployment, binaries are copied from _bin_deployableassemblies folder to the bin folder.

This is done so that even if you delete files from the bin during your custom build process, it would still copy the dependency again correctly from the _bin_deployableassemblies folder when the project is published.

HTML5 and CSS3 Support

Preliminary support is added for HTML5 to the HTML editor so that IntelliSense and validation for HTML elements and attributes can be obtained. A complete version that brings a fuller HTML5 experience will be provided in future versions of Visual Studio.

To get HTML5 support, go to Tools | Options, select Text Editor | HTML | Validation, then select HTML5 from the dropdown. Or you can also select HTML5 from the HTML source editing toolbar (see Figure 13). To enable the toolbar while editing an HTML or Razor file, select View | Toolbar | HTML Source Editing.

Figure 13 Selecting HTML5 from the HTML Source Editing Toolbar

In Visual Studio 2010 SP1, there are a few improvements in CSS3 support, though these improvements aren’t as elaborate as those of HTML5. The CSS editor now supports the more advanced selectors such as div:nth-child(2n+1) and the new color values rgba, hsl and hsla, and eight-digit hex values.

Wrapping Up

To recap, Visual Studio 2010 SP1 tightens up a few things in Visual Studio, but it’s the new Web components working together with things such as IIS Express 7.5, ASP.NET MVC 3 with Razor, SQL Server CE with tooling and HTML5/CSS3—tied together with the Web PI—that really make Web development more enjoyable. We hope you enjoy these tools as much as we do.

---

Scott Hanselman works as a principal community architect for Microsoft outside of Redmond, Wash. You can follow him on Twitter at twitter.com/shanselman, read his blog at hanselman.com or listen to his podcasts at hanselminutes.com.

Deepak Verma works as a software development engineer in test for Microsoft in Redmond, Wash. His team blog is at blogs.msdn.com/b/webdevtools.