Timlee's Blog

Hosting a SignalR application on Windows 2008r2 and IIS 7.5

TimLT — Thu, 21 Mar 2013 16:23:00 GMT

ASP.NET SignalR is Microsoft's new library for adding real-time functionality to applications. You can host ASP.NET applications with SignalR on Windows Server 2012 and IIS 8 (this setup provides full HTML 5 WebSocket API support for real-time functionality), or you can host on previous versions of Windows Server and IIS. Previous server versions do not offer websockets support, instead they use fallback transport mechanisms such as forever frames, server-sent events, and Ajax long polling. For more information, see SignalR Transports. Because previous server versions use fallback transport mechanisms, hosting on a previous server platform requires a few extra steps to get your SignalR application working in all browsers.

This posts pulls together several related steps that it takes to get a SignalR application working on a common previous-version hosting scenario: Windows 2008r2 and IIS 7.5. You can see a listing of these and other steps for working with SignalR applications on the SignalR Wiki FAQ page. The application sample used to test the steps in this post is from the tutorial Getting Started with SignalR. Instead of building the sample on .NET Framework 4.5 (as in the tutorial), I built it on .NET Framework 4, a common hosting scenario on IIS 7.5.

Here's a summary of the required setup steps to host on Windows 2008r2 with IIS 7.5:

Update the SignalR application's web.config file to enable "run all managed modules for all requests" (for short, this is the RAMMFAR setting).
Update the web page that uses SignalR to communicate with the server:

Add a reference to the json2.js library.
Add a <meta> tag that forces the content to display in a recent browser mode.

Set up a Windows Server 2008r2 with IIS 7.5 as follows:

Install the .NET Framework version that your SignalR application requires.
Create a site and associate it with the appropriate application pool.

Update the Signalr Application's Web.config File

In your SignalR application's web.config file, add the RAMMFAR setting to enable running all managed modules for all requests. This setting was required to get the SignalR sample application running in on Windows 2008r2 and IIS 7.5 in all browsers.

<system.webServer>
<modules runAllManagedModulesForAllRequests="true">
</modules>
</system.webServer>

Update the Web Page that Uses SignalR

In the application web page that uses SignalR to communicate with the server, add the following code.

Add a reference to the json2.js JSON parser library. This script provides a JSON parser for previous browser versions that don't have it. You can add the script in one of two ways:

Add the NuGet package json2.js to your project, and then reference it in your web page:

Or as an alternative, reference json2.js on a CDN:

Add the following <meta> tag in the head section of the page. This tag, specifically the IE=edge value, forces Internet Explorer to display content in the most recent version available, rather than earlier modes (such as IE7) which prevent SignalR code from working.

Set up Windows Server 2008r2 and IIS 7.5

As noted, I built the sample SignalR application from the Getting Started with SignalR tutorial on .NET 4. This is a common hosting scenario on Windows 2008r2 and IIS 7.5. The server was a new default default installation of Windows Server 2008r2 and IIS 7.5.

Install the required .NET Framework version. In this case I installed .NET Framework 4.
Create a new site in IIS Manager, and associate the site with an application pool. Use integrated mode application pools, classic mode is not supported for SignalR. For this application I used the ASP.NET v4.0 application pool.

After following the above setup steps, I was able to deploy the .NET Framework 4-based version of the Getting Started with SignalR sample to the server, and it worked perfectly in IE (versions 8, 9, and 10), Chrome, and Firefox even though it was using fallback transport methods (forever frames in IE, and server-sent events in the other browsers). The interesting thing for SignalR developers is that apart from the above steps, I didn't have to change a single line of the SignalR code anywhere in the application to make this work.

This is a simple case but shows that SignalR really does support "automatic fallback" to earlier transport mechanisms when websockets support is not available on the server.

Publish the SignalR Getting Started Sample as a Windows Azure Web Site

TimLT — Wed, 27 Feb 2013 22:42:00 GMT

Here's a quick walkthrough for publishing the ASP.NET SignalR Getting Started tutorial sample as a free Windows Azure Web Site. This shows how simple it is to deploy and host an ASP.NET application that adds SignalR real-time functionality.

Note: HTML5 WebSocket transport is available in SignalR, but is not currently supported for Windows Azure Web Sites. When WebSocket transport is not available, your SignalR application still works but uses the other available transports as described in the Transports section of the Introduction to SignalR documentation.

Prerequisites:

Get the SignalR Getting Started tutorial sample or the Getting Started with SignalR and MVC 4 sample running locally as described in the topic.
Create a free Windows Azure trial account (or use an existing Windows Azure account).
Install the Windows Azure SDK for .NET for Visual Studio 2012 or Visual Studio 2010 (if not already installed). This provides the tools to deploy the project to a web site.

Deployment Steps:

1. Log into the Windows Azure Management Portal and click Web Sites.

2. Click New, select Web Site, and click Quick Create.

3. Specify a URL and a region for your site.

4. Click Create Web Site.

5. After the site has been created and its status on the Web Sites tab shows as Running, click on the site name to view the dashboard.

6. In the site Dashboard, click Download Publish Profile and save the publishing profile to your computer.

Security Note: The downloaded .publishsettings file contains your credentials (unencoded) that are used to administer your Windows Azure subscriptions and services. The security best practice for this file is to store it temporarily outside your source directories (for example in the Libraries\Documents folder), and then delete it once the import has completed. A malicious user gaining access to the publishsettings file can edit, create, and delete your Windows Azure services.

7. Open the Visual Studio project you created for the SignalR tutorial, right-click the project in Solution Explorer, and then click Publish.

8. In the Publish Web | Profiles tab, click Import and then import the downloaded publishing profile.

9. In the Publish Web | Connections tab, select Web Deploy as the publish method, validate the connection, and then click Publish.

10. When publishing is complete, you can access the site and run the sample SignalR application.

Using the Library Package Manager with Add-on Libraries in Visual Studio

aspnetfan — Thu, 11 Nov 2010 19:09:56 GMT

Have you ever noticed how complex it can be to add, remove, and update libraries of code functionality in Visual Studio? First you have to hunt all over the place to find the library you want. Then you have to download it, and figure out how to install it. Often, you find it has dependencies, which then means finding, downloading, and installing other libraries too. After everything is installed and working, suppose one of the libraries you installed gets updated. How will you find out about the update? How will you install it? And if there are dependencies among libraries, how will they be affected? Finally, when it’s time to remove a library, unless the library and its dependencies were installed as an integrated package, you get to experience the joy of reversing the installation process and removing each library. As you know if you’ve done this, working with libraries can quickly become painful.

Microsoft has released some new tools to streamline the process of finding, adding, and managing libraries and add-on packages in Visual Studio. NuGet is an open source package management system based on the .NET Framework. The NuGet application has been added into Visual Studio in the form of the Library Package Manager. In this post, I’ll demonstrate how to use the new Library Package Manager to install and remove a library in Visual Studio 2010. This also works in Visual Web Developer 2010 Express, which is what I’ll use here.

Installing the Library Package Manager

You can install the Library Package Manager by downloading it directly as a Visual Studio extension (*.vsix file) from the NuGet downloads page, or you can install the latest Web Platform Installer and then install the ASP.NET MVC3 Release Candidate. Here we’ll use the second approach.

To install the Library Package Manager in Visual Studio:

Run the latest release of Web Platform Installer (version 3.0). You may have to click Allow in your browser one or more times to enable the Web Platform Installer to load.
Click Install to start installing the ASP.NET MVC3 Release Candidate.

Working with Libraries and Packages

There are two ways you can use the Library Package Manager in Visual Studio to work with packages:

The package manager window. This is a simple UI window for adding, removing, and updating packages.
The package manager console. This is a console-type window in which you can enter Powershell commands for adding, removing, and updating packages.

Using the Package Manager Window

In this section we’ll show how to use the package manager window to manage packages in Visual Studio.

To add a package using the package manager window:

Start Visual Studio (in this post, I am using the free edition, Visual Web Developer 2010 Express).
Click New Web Site, and then create a new site or project. In this post I will create an ASP.NET web site (Razor) to use with the package manager.
After the site is created, right-click the node for the site in Solution Explorer, and then click Add Library Package Reference.
In the Add Library Package Reference window, click Online to display the list of available online packages.
In the Search Online box type “logging” to search for available libraries with enhanced logging functionality.
Use the paging links at the bottom of the results window to scroll through the packages until you find the Elmah package.

Note: This is a good example of how the Library Package Manager helps you find useful packages. If you didn’t know ahead of time that you wanted the Elmah logging package, you can search more generally to find a list of packages that supply the features you want.
Select the elmah package and then click Install.
After the installation, completes, click Close.
You can see the Elmah assembly appears in the bin folder in Solution Explorer. To demonstrate that you can now use the library, add the following block of Razor syntax and type Elmah. to see that Intellisense recognizes the library.
```
@{
     Elmah.
}
```
The following screen shot shows the Elmah assembly in bin, and Intellisense working when you type “Elmah.” in a Razor code block.

After you see the Intellisense working with the Elmah library, remove the code block you just added.

Now that you’ve seen how to add a package, let’s remove the same package.

To remove a package using the package manager window:

In Solution Explorer, right-click the node for the site, and then click Add Library Package Reference.
Click Uninstall on the elmah package in the Add Library Package Reference window.
Close the window. The Elmah assembly has been removed from the bin folder in Solution Explorer.

Using the Package Manager Console

We’ve seen how to add and remove the Elmah library in a Visual Studio project, using the package manager window. Now we’ll go through the same process using the package manager console. This console gives you the ability to manage packages in a more powerful way, using Windows Powershell commands.

To add a package using the package manager console:

In Visual Studio click Tools | Library Package Manager | Package Manager Console. The package manager console window appears. If you click the drop-down icon in the upper right corner of the window, you can select whether to display it as a floating or a docked window, or as a tabbed document.
To see the list of available packages in the console, at the prompt type list-package and then press Enter.
If you are new to Windows Powershell command, at the prompt you can type get-help * and then press Enter to display a list of available commands.
To get help on a particular command, type get-help [command]. To display help for the install-package command, type get-help install-package and then press Enter.
The syntax and options for the install-package command are displayed.
To install the Elmah package, type install-package elmah and then press Enter. After the installation completes, the Elmah assembly again appears in the bin folder in Solution Explorer.
Optionally, you can add a block of code in the editor and type “Elmah.” as you did in the previous section, to demonstrate that the library is recognized by Intellisense.
After you establish that Intellisense recognizes the Elmah library, remove the test block of code.

Now that you’ve seen how to add a package, let’s remove the same package.

To remove a package using the package manager console:

To remove the Elmah package, at the prompt type uninstall-package elmah and then press Enter. After the removal completes, the Elmah assembly is no longer visible in the bin folder.
Close the package manager console.

Summary

You’ve seen how you can use the Library Package Manager in Visual Studio to find, add, and manage libraries and packages. You can use the package manager window, or the package manager console, to do the same basic tasks. In addition to adding and removing packages, you can also use these tools to update a package. When updates are available, they are automatically displayed for your installed packages when you display them, and you can simply click an Update button (in package manager window) or run an update-package [package name] command (in package manager console) to update a package. The nice thing is that this updates both a package and its dependencies if needed.

You can also use the NuGet package management application to create packages of the type you installed here. For information on creating basic packages, see Creating a Package at the NuGet project.

Working with HTML5 pages in WebMatrix and the Razor Syntax

aspnetfan — Fri, 06 Aug 2010 17:07:29 GMT

Most web developers know that HTML5 is available and is already supported (though not completely supported in all its features) in the leading browsers. See a summary of new tags and features in HTML5. Internet Explorer 8, Firefox 3.6+, and the latest versions of Safari and Chrome all have strong support for HTML5. Upcoming releases, including IE9, will improve the level of support. For this reason, in Microsoft’s recent beta release of the WebMatrix development platform, the templates for creating a new HTML page or a new ASP.NET page that uses the Razor syntax (pages with a .cshtml or .vbhtml file extension), all use the new HTML5 doctype.

Often when I develop web pages, I don’t think much about the doctype that is used; I want to get onto the “good stuff” and start writing code. However, using the new HTML5 doctype and understanding it is worthwhile for the following reasons:

HTML5 offers some significant new tags and improved options for rendering content.
Using the HTML5 doctype declaration results in much simpler and cleaner code in your pages, as you’ll see.
Using the HTML5 doctype forces most browsers to render your pages in a “standards” mode (which is a good thing if you want to use new HTML features and validate your pages—see this article for more on browser modes).

HTML5 Versus Previous DocTypes

Let’s start by comparing a plain HTML page declared with an earlier doctype to one that is declared using the HTML5 doctype. The following block of code is the template for a new blank HTML page in Visual Studio 2010. VS uses this same doctype for creating HTML pages and also ASP.NET pages (the ASP.NET pages add some additional ASP.NET-related tags, but the doctype and HTML tags are otherwise the same).

Visual Studio Page 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></title>
</head>
<body>

</body>
</html>

Notice that the doctype declaration element specifies the XHTML 1.0 Transitional doctype, and (on the second line) a URI for the doctype declaration file. This doctype has been used for some time now in the VS templates for HTML and ASP.NET web pages. Also, note that the <html> tag specifies a default namespace that includes the XHTML 1.0 elements.

WebMatrix Page Template

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>

    </body>
</html>

Now in contrast, look at the above template that WebMatrix uses for HTML and ASP.NET pages with the Razor syntax. You can see right away how much cleaner and simpler this is: there’s no long DTD specifier or URI in the doctype, and you do not have to declare a namespace on the root <html> tag. This is really all you need to start taking advantage of HTML5 tags and content in your web pages. As mentioned, most of the leading browsers already support HTML5 so this doctype will validate and the majority of HTML5 tags should render properly in leading browsers.

One More Item: Character Encoding

One detail that the new page templates do not include is a <meta> tag that specifies character encoding. To be clear, this is not strictly required and you can validate pages without it. The above markup for the new page template validates at the W3 validation service even without the encoding declaration (although it does mention in a warning: “No character encoding declared at document level”). However, it is a really good idea, even a best practice, to declare a character encoding in your pages.

Here are some possible consequences of not declaring a character encoding:

It can affect the rendering of your content. If you use certain characters, and no encoding is specified, a browser may render them in some odd way.
It can create security vulnerabilities. Without a character encoding, for example, users (whether intentionally or unintentionally) could enter characters in a form which would become active HTML (like a <script> tag) that would then be capable of executing. Ultimately, you should both validate user input and declare a character encoding, to minimize security vulnerabilities of this type.

To declare a character encoding in an HTML5 page is very simple. In previous doctypes it required a fairly long, detailed <meta> tag with several attributes. But in HTML5 pages, all you need is a <meta> tag with a charset attribute, like the following examples which declares a utf-8 encoding:

<meta charset="utf-8" />

If you add an encoding declaration like this one to the standard page template in WebMatrix, you’ll have a validating doc with the character encoding declared, which is a good thing. The following modified template is what I’ve been using to create my new HTML and .cshtml pages in WebMatrix, given that I use a utf-8 character encoding:

WebMatrix Page Template with Character Encoding Declared

<!DOCTYPE html>
<html>
    <meta charset="utf-8" />
    <head>
        <title></title>
    </head>
    <body>

    </body>
</html>

This updated form of the template also validates on the W3 validation service, and it gives you a clean, straightforward way to declare an encoding in your pages.

The Bottom line

The use of the new HTML5 doctype in the WebMatrix page templates gives you cleaner, simpler pages, and lets you take advantage of the new features in HTML5. It’s a good idea to add to the template a <meta> tag that declares the character encoding you will use in your web pages, because it gives you more consistent rendering and helps to reduce security vulnerabilities.

Using @functions in an ASP.NET page with Razor Syntax

aspnetfan — Fri, 30 Jul 2010 21:50:03 GMT

In July Microsoft released the WebMatrix Beta. WebMatrix is a set of tools and technologies which includes a code editor, a development web server, various tools, and the new simplified "Razor syntax." The Razor syntax is a type of syntax for writing server code in ASP.NET pages. It is simple to use and has some affinity for PHP developers. You can find information on installing WebMatrix, and documentation on programming with the Razor syntax, on the ASP.NET site: http://www.asp.net/webmatrix.

The @functions Block

Chapter 2 of the documentation is titled Coding with Razor Syntax. This documentation covers the basics of the new syntax. But one syntax feature that is not yet included in the beta documentation is the @functions block.

The purpose of the @functions block is to let you wrap up reusable code, like the methods and properties that are discussed in Chapter 2, and then be able to call those methods or properties from other parts of the page. Say that you have a common method called GetUserName, and you need to call this method more than once in your code. It doesn't make sense to rewrite that same code every time you want to get a user name. By placing this method in an @functions block, you can just call the GetUserName method whenever you want. So the basic idea is, put reusable code in an @functions block.

The Structure of an @functions Block

As you learn in Chapter 2, a block of code in Razor syntax begins with @, and then is contained with a pair of braces ( "{" and "}"). An @functions block simply adds the functions keyword to a basic block, and looks like this:

C#

@functions {

    // Add code here.

}

VB

@Functions

    ' Add code here.

End Functions

Code Example of an @functions Block

The following code example contains a complete page showing a simple @functions block. In the @functions block at the top of the page, it declares a method named HelloMessage and a property named Age. Then the method and the property are both called within the body of the page to display their values. Note that when you call a method in the Razor syntax, you must use parentheses whether the method has a parameter or not. When you call the Age property in the body of the page, because it is typed as an integer, you must call the ToString method (including parentheses) to properly convert and display its value. If the Age property had been a string type property, you would not need to call the ToString method to convert its value for display, and you would not need to use parentheses to call the property.

C#

@functions {

    // Create a variable to store the age.
    int userAge = 0;
    
    // Pass a user name to this method.
    string HelloMessage(string user)
    {
        var msg = "Hi " + user + ", how are you?";
        return msg;
    }
    
    int Age
    {
        get 
        {
            return userAge;
        }
        set
        {
            userAge = value;
        }
    }
}

<!DOCTYPE html>

<html>
    <head>
        <title></title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    </head>
    <body>
    @{
        // Here we set a value on the Age property. 
        // In a real page, you might retrieve the user's
        // age from a form or database, and then assign 
        // the value to the property.
        Age = 27;
      
    }
       
    <!-- Pass a hard-coded user name to the HelloMessage method. 
         In a real  page you would likely get the user name from 
         a login form or database, and pass it to the method.
    -->
    <p>The value of the <code>HelloMessage</code> method: @HelloMessage("James")</p>
    
    <!-- Because the Age property is typed as an int (a number), 
         you must convert it to a string to display the value.
    -->
    <p>The value of the <code>Age</code> property: @Age.ToString()</p>
    
</body>
    
</html>

VB

@Functions

    ' Create a variable to store the age.
    Dim userAge as Integer = 0

    Function HelloMessage(user as String) As String
        Dim msg = "Hi " & user & ", how are you today?"
        Return msg
    End Function
    
    Property Age() As Integer
        Get
            Return userAge
        End Get
        Set(ByVal value As Integer)
            userAge = value
        End Set
    End Property

End Functions

<!DOCTYPE html>

<html>
    <head>
        <title></title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    </head>
    <body>
    @Code
        ' Here we set a value on the Age property. 
        ' In a real page, you might retrieve the user's
        ' age from a form or database, and then assign 
        ' the value to the property.
        Age = 27
    
    End Code
        
    <!-- Pass a hard-coded user name to the HelloMessage method. 
         In a real  page you would likely get the user name from 
         a login form or database, and pass it to the method.
    -->
    <p>The value of the <code>HelloMessage</code> method: @HelloMessage("James")</p>
    
    <!-- Because the Age property is typed as an int (a number), 
         you must convert it to a string to display the value.
    -->
    <p>The value of the <code>Age</code> property: @Age.ToString()</p>
    
</body>
    
</html>

The Future of @functions Blocks

The @functions block is a useful tool in the Razor syntax. It lets you develop reusable code and then call it from anywhere else that you want in your page. In future releases, it won't be surprising to see additional capabilities added to @functions to make it even more useful.

The New ASP.NET Default Web Template in Visual Studio 2010

aspnetfan — Mon, 14 Jun 2010 18:32:00 GMT

Introduction

When Visual Studio 2010 hit the market in April 2010, it had a nice surprise for hard-working web developers: a new default ASP.NET web site template that you can use to jumpstart a new site. The new template improves on previous VS site templates by giving you some nice extras in the areas of commonly requested site infrastructure that many developers are likely to use.

The basic elements of the new default ASP.NET web template:

A built-in membership infrastructure, including forms-based login, user account creation and management, and an auto-generated membership database.
The Jquery library, a library of AJAX functionality that you can call from client script, fully integrated with VS Intellisense in the source editor.
A base CSS stylesheet with a default theme and style definitions.
A basic master page infrastructure. When you create a new content page for your site and link it to the default master page, the built-in membership infrastructure is automatically added to your page.
Default and About ASPX pages integrated with the membership infrastructure.
A global application page to contain application-level code.
A web.config file preconfigured for membership and related features.

In this post I'll give you a quick overview of the main details in the new default ASP.NET web template (from here on we'll call it the "default template.").

The Web Site Template and the Empty Web Template

One of the key things to note when you create a new site in VS 2010, is that there are two general template types for creating an ASP.NET site: an empty template that contains no site content, and the default template that contains the items listed above.

If you choose the New Web Site project option in VS (also called the Web site project type), you will see these two templates referred to as sites. The New Web Site dialog lists the templates as ASP.NET Web Site and ASP.NET Empty Web Site:

In the same way, if you choose the New Project option in VS (also called the Web Application Project type), both templates are referred to as applications. The New Project dialog lists the templates as ASP.NET Web Application and ASP.NET Empty Web Application:

If you want to know more about when to create a web application project versus a web site project, see Web Application Projects versus Web Site Projects. The reasons for choosing the web application project type versus the web site project type involve how you work in as a developer, and how you plan to deploy, debug, and update your web applications.

If you create a site using the default template as a web application (using the New Project option on the menu), it's true that you will see a few additional VS-related project folders and files in Solution Explorer compared to the web site project type. But again, the additional items relate to project-level options for how you prefer to compile, debug, and work with your project in VS, they do not mean that the site content or files in the default web template are any different. In short, the point to remember is that the site content and functionality in the default web template are the same, regardless which VS project type you use to create a site based on the default template.

Here's a screen shot of Solution Explorer. It shows the content of a new site created with the default template from the New Web Site dialog:

And here is a screen shot of Solution Explorer for a new web application. It shows the content of a new application created with the default template from the New Project dialog. When you examine the content of the site files, it is clear that, despite the addition of some VS-related project folders, the site content and features of this template are the same:

Membership and Login

The new ASP.NET web site template gives you a full membership infrastructure, preconfigured and ready to use from the first time you run the site in VS. As you can see from the previous screen shots of a new site created by the template, the Account folder contains several ASPX files for changing passwords, login, and new user registration.

The default master page, Site.Master, integrates the login functionality so that all site pages that link to this master page can utilize the membership and login.

To demonstrate the included login and membership features, run the site in VS. When it loads the start page (default.aspx), if you click the Log In link, it takes you to the login.aspx page:

New users who do not yet have an account can follow the Register link to proceed to the Register.aspx page. You may want to create a test user account on the Register page, which looks like the following screen shot:

After the first valid user has registered, the ASP.NET CreateUserWizard control (which is used on the Register page) creates a new SQL Express database MDF file for the membership data. The file is created in the App_Data folder. After you have created the new user account on the Register page, if you click Refresh in Solution Explorer you can see the new membership database:

The ChangePassword page is not visibly linked into the site. However, it is fully integrated with the membership structure and uses the Site.master master page. If you select the ChangePassword.aspx file in Solution Explorer and then press Ctrl + F5 to run the page, you can see it is fully functional. If you log into this page using a user account that you created previously, you can change a password. The following screen shot shows the form on the ChangePassword page:

In addition to the features of integrated login, registration, and management of membership, the Web.Config file contains entries preconfigured for membership, profiles, and roles. Membership and profiles are enabled of course, because the site template already uses them. Roles are currently disabled, but if you later decide to enable roles in your application (for instance, if you want to create permission-based roles such as "Admin", "Contributor", "Guest", and so on), the basic required entry is already in the configuration file.

To create additional site pages wired up to the new membership infrastructure, just select Site.Master as the master page when you create a new ASPX page. Your new page is then hooked into the site's existing membership and login infrastructure.

The Jquery Library

The Jquery library is not completely new to VS 2010, but the level of support for it is. The Jquery library was first added to VS 2008, around the time that ASP.NET version 3.5 was released. Jquery is a lightweight Javascript library that has become one of the most popular of its type on the web. Web developers use Jquery to quickly find and manipulate the UI of HTML controls with a minimum amount of client-side script. This enables developers to write powerful, AJAX-like client-side functionality into their applications, without having to write hundreds or even thousands of lines of complex, hard-to-maintain Javascript.

In VS 2010, the Jquery library included is version 1.4.1, and it is the full, open version of Jquery. There are three Jquery files that the ASP.NET web template installs with a new site, as you can see from the screen shot of the Scripts folder within a newly created site:

Each of the three files is used for a different development scenario.

Jquery-1.4.1-vsdoc.js: Used for design-time work only. Contains additional VS XML documentation-style comments (prefaced by "//"), which are included automatically by VS to provide Intellisense in the editor at design time.
Jquery-1.4.1.js: The full version of the Jquery library. This is a readable, commented version of the library file. It does not contain the extra comments to support Visual Studio Intellisense.
Jquery-1.4.1.min.js: This is a minimized version of the full library file, with all comments and white space removed. After you have sufficiently debugged your application and you are ready to deploy, you can use this version of the Jquery library to deploy your application.

During development, you can add a reference to the regular Jquery-1.4.1.js file. You do not need to reference the vsdoc version of the file to get Intellisense to work; VS references the content of that file automatically. Here's an example of how to reference the Jquery library file using a <script> tag in an ASXP page:

After you have added this reference in a page, you will have full Intellisense on the Jquery library within <script> blocks, as you can see from the following screen shot showing Intellisense working on the base Jquery object:

For more information on using Jquery with VS to support ASP.NET AJAX, ASP.NET MVC development, see Scott Guthrie's blog article, the Jquery site itself, and Scott Hanselman's tutorial. Even though the blog entries are not based on the current version of Jquery included in VS, they give you a lot of helpful information for getting started with Jquery.

CSS Styles

The new ASP.NET web template also include a base CSS style sheet. The file is named Site.css. In the style sheet are definitions for a number of aspects of the site:

Common page elements: the body, links, headers.
Common layout regions: columns, header, footer, page area.
Display options for controls and forms.

Because all these fundamental UI elements are predefined for you in the style sheet, it is fairly straightforward to update the styles in your site when you are ready to customize the look of your UI or create a theme.

This screenshot demonstrates some of the styling options provided by the CSS, including the style for the selected About menu item:

The second screenshot demonstrates the styling on the login form controls for registration. There is even styling provided for the missing form information messages:

Site page Structure

As mentioned earlier, the new ASP.NET web template gives you by default a master page named Site.master that implements the membership infrastructure and login controls for the site. The About and Default pages use Site.master, as do all the membership-related pages in the Account folder, so they are all wired into the existing membership. If you create new ASPX pages and link them to Site.master as their master page, they of course will also be automatically included in the provided membership and login implementation with no coding required.

The About and Default pages are also included in the top navigation menu you have seen in previous screen shots. The master page uses the ASP.NET LoginView and Menu controls to provide the menu of available pages, and the login UI. The LoginView control provides different templates depending on what kind of login scenario is being addressed (an anonymous user, a logged-in user, etc.). The Menu control provides one child MenuItem control for each page linked to the top menu. If you create new site pages and want them to appear in the top navigation menu, you must add a new MenuItem control to the Menu control for each page (similar to the MenuItem controls for the About and Default page in this screen shot):

Summary

Overall, you will find that new default ASP.NET web template adds a lot of useful functionality for creating a site. When you consider the amount of code it used to take just to code up a full site with a membership infrastructure, or a set of scripts for creating rich client-side UI effects or AJAX functionality, the features included in the new template seem like a nice addition for web developers.

Timlee's Blog

Hosting a SignalR application on Windows 2008r2 and IIS 7.5

Publish the SignalR Getting Started Sample as a Windows Azure Web Site

Using the Library Package Manager with Add-on Libraries in Visual Studio

Installing the Library Package Manager

Working with Libraries and Packages

Using the Package Manager Window

Using the Package Manager Console

Summary

Working with HTML5 pages in WebMatrix and the Razor Syntax

HTML5 Versus Previous DocTypes

Visual Studio Page Template

WebMatrix Page Template

One More Item: Character Encoding

WebMatrix Page Template with Character Encoding Declared

The Bottom line

Using @functions in an ASP.NET page with Razor Syntax

The @functions Block

The Structure of an @functions Block

C#

VB

Code Example of an @functions Block

C#

VB

The Future of @functions Blocks

The New ASP.NET Default Web Template in Visual Studio 2010

Introduction

The Web Site Template and the Empty Web Template

Membership and Login

The Jquery Library

CSS Styles

Site page Structure

Summary

See Also