web

Hands-On Lab
Web Development in Visual Studio 2010


Lab version: 1.0.0

Last updated: 12/10/2010








Page 1

---

CONTENTS
OVERVIEW ............................................................................................................................................. 3
EXERCISE 1: USING HTML CODE SNIPPETS IN VISUAL STUDIO 2010 ............................................. 6
Task 1 - Adding a New ListView to an HTML Page Using an HTML Code Snippet .............................. 6
Task 2 - Creating a Custom HTML Snippet ..................................................................................... 10
Exercise 1: Verification
16
EXERCISE 2: TRANSFORMING A WEB.CONFIG FILE FOR DEPLOYMENT ...................................... 19
Task 1 - Creating a Staging Configuration in Visual Studio 2010 ..................................................... 19
Task 2 - Adding Code to Populate Text Value of EnvName from a Value in the web.config ............ 22
Task 3 - Adding a Logging Database Connection String to the web.config File ................................ 24
Task 4 - Writing a Transform to Change the Environment and Logging Connection Strings in the
Staging web.config ......................................................................................................................... 25
Task 5 - Generating a Transformed web.config File from the Command Line ................................. 26
Task 6 - Generating a Transformed web.config File from Visual Studio .......................................... 28
Exercise 2: Verification
31
EXERCISE 3: PACKAGING AND DEPLOYING WEB APPLICATIONS FOR THE VISUAL STUDIO
DEVELOPMENT WEB SERVER ........................................................................................................... 32
Task 1 - Opening the Project Properties Publish Page and Creating a Package. .............................. 32
Task 2 - Preparing the Web Server for Deployment ....................................................................... 34
Task 3 - Deploying the Package ..................................................................................................... 37
Exercise 3: Verification
42
EXERCISE 4: PACKAGING AND DEPLOYING WEB APPLICATIONS FOR INTERNET INFORMATION
SERVER (IIS) ........................................................................................................................................ 43
Task 1 - Opening and the Project Properties Publish Page, Setting the Web Application to Use IIS
and Create a Package. .................................................................................................................... 44
Task 2 -Deploying the Package ...................................................................................................... 46
Exercise 4: Verification
51
SUMMARY ............................................................................................................................................ 52


Page 2

---

Overview
Microsoft Visual Studio 2010 offers many new features for development of ASP.NET web applications.
The goal of these new features is to aid developers in creating and deploying high quality and fully
featured web applications quickly and easily.
Visual Studio 2010 now supports HTML code snippets. Snippets are a great way to generate high-quality
code. There are many snippets that come with Visual Studio, and developers have the ability to create
their own.
Another new feature which Visual Studio 2010 provides is the ability to transform the web.config file for
deployment. Visual Studio 2010 supports a rich configuration transformation language that allows
developers to change elements in the web.config file including connection string, file path locations, and
service addresses.
Deployment of ASP.NET web applications is now easier due to new packaging and deployment features
in Visual Studio 2010. Now web applications can be easily published to a specific location on the build
machine (or even to a ZIP file) and easily deploy to either the Visual Studio Web Server or Windows
Internet Information Server (IIS).
Objectives
In this Hands-On Lab, you will learn how to:
Use HTML code snippets to aid in development of ASP.NET web application pages
Create and deploy your own custom HTML code snippets
Create and automatically transform the web.config as the web application is deployed across
environments.
Create a deployment package for your ASP.NET web application and deploy the application to
either the Visual Studio Development web server or Windows Internet Information Server (IIS).

Exercises
This Hands-On Lab is comprised by the following exercises:
Using HTML Code Snippets in Visual Studio 2010
Transforming a web.config file for deployment
Page 3

---

Packaging and deploying a web application to the Visual Studio Development Web Server
Packaging and deploying a web application to the Windows Internet Information Server (IIS)

Estimated time to complete this lab: 60 minutes.
System Requirements
You must have the following items to complete this lab:
Microsoft Visual Studio 2010
IIS 7.0


Setup
All the requisites for this lab are verified using the Configuration Wizard. To make sure that everything is
correctly configured, follow these steps.
Note: To perform the setup steps you need to run the scripts in a command window with
administrator privileges.

1. Run the Configuration Wizard for the Training Kit if you have not done it previously. To do this,
run the CheckDependencies.cmd script located under the
%TrainingKitInstallationFolder%\Labs\WebDevelopment\Setup folder. Install any pre-
requisites that are missing (rescanning if necessary) and complete the wizard.

Starting Materials
This Hands-On Lab includes the following starting materials.
Visual Studio solutions: The exercise provides a Visual Studio solution that you can use as
starting point for the lab exercise. You will find the starting point at:
%TrainingKitInstallFolder%\Labs\WebDevelopment\Source\Ex01-
HTMLCodeSnippets\begin\C#\HTMLLab
HTMLLab.sln: A solution containing a simple web application used as a starting point for
Exercise 1 and the subsequent exercises.
Page 4

---

Note: For each exercise, there is an End folder which contains the resulting solution
you should obtain after completing that exercise.
Note: User will perform appropriate name value replacement in all path references containing
<Username> tag.
Note: To verify that each step is correctly performed, it is recommended that you build the
solution at the end of each task.

Next Step
Exercise 1: Using HTML Code Snippets in Visual Studio 2010


Page 5

---

Exercise 1: Using HTML Code Snippets in
Visual Studio 2010
In this exercise, you will learn how to use HTML code snippets in Visual Studio 2010. You will also learn
how to create your own custom HTML snippets.
Task 1 - Adding a New ListView to an HTML Page Using an HTML Code Snippet
In this task, you will open an existing ASP.NET web application and use a snippet to add a ListView
control to an existing webpage.
1. Navigate to Start | All Programs | Microsoft Visual Studio 2010 | Microsoft Visual Studio 2010.
Select the File | Open | Project/Solution... menu command. In the Open Project dialog,
navigate to \Source\Ex01-HTMLCodeSnippets\begin\C#\HTMLLab and select HTMLLab.sln file.
2. Open the Default.aspx file by double-clicking on the file in the Solution Explorer. Examine the
code present on the page. Note that the page contains a GridView control with an ID of
Products.
Page 6

---

Figure 1
Existing Grid View control in Default.aspx

3. On the Default.aspx page, you will add a ListView control. Place the cursor after closing
GridView tag (</asp:GridView>) and press the ENTER key. Press the "<" key to invoke the
completion list.
Page 7

---

Figure 2
Completion List
Note: The small icons next to each completion indicate what type of completion it is:

Indicates that a completion entry is also a snippet keyword

Indicates a snippet keyword

Indicates a completion entry

4. Select ListView from the completion list and press the TAB key twice to insert the snippet.

Figure 3
The inserted snippet

5. To progress you will need to add the layout, to put in a temporary placeholder. Enter the
following code to define the LayoutTemplate:
XML
<LayoutTemplate>
<table id="itemPlaceholderContainer">
<tr runat="server" id="itemPlaceholder">
</tr>
</table>
</LayoutTemplate>
Page 8

---

Figure 4
The completed snippet

Note: In this task, you brought up the completion list by typing the "<" character. Another way
to show that list is to use the CTRL + J shortcut. Yet another option is to invoke the snippet
picker by using the CTRL + K, CTRL + X shortcut. This may be faster in some cases because you
can narrow the snippets by group as shown below:

Page 9

---

By selecting the ASP.NET folder and pressing the TAB key, you will see a list of the ASP.NET
specific snippets:

You can abort this action by pressing the ESC key. Do not add any more controls to this page at
this time.


Task 2 - Creating a Custom HTML Snippet
In this task, you will create a custom HTML snippet for use inside of the Visual Studio 2010 IDE. The new
code snippet will create a label control with the preset default values. Any custom Snippets
implemented are stored as XML files in a well-known directory.
1. In Visual Studio 2010 select File | New | File... from the menu to open the New File dialog. In
the New File dialog select General from Categories, XML File from Templates and click Add.
2. To create the structure of the snippet you will use an existing snippet. In the XML file editor,
press CTRL + K, CTRL + X to display the snippets list.
Page 10

---