Microsoft Virtual Labs

Building Web Applications with Visual Studio 2008

Building Web Applications with Visual Studio 2008

Table of Contents
Building Web Applications with Visual Studio 2008 ................................................................. 1
Exercise 1 Code Setup ...................................................................................................................................................2 Exercise 2 Creating the Image Layout ...........................................................................................................................4 Exercise 3 Creating an Image Summary Page ............................................................................................................. 13 Exercise 4 Create the Image Details Page ................................................................................................................... 26

Building Web Applications with Visual Studio 2008

Building Web Applications with Visual Studio 2008

Objectives
After completing this lab, you will learn how to: Manage CSS style sheets on web pages Bind data using the LINQ data source Use the DataPager control 60 Minutes

Estimated Time to Complete This Lab Computer used in this Lab

VS 2008 The password for the Administrator account on this computer is:Pass@word1.

Page 1 of 36

Building Web Applications with Visual Studio 2008

Exercise 1 Code Setup

Scenario
Perform these tasks to set up the code snippets for this lab. Tasks
1. Setting up the lab with

Detailed Steps
a. Run the command file SetupEx.cmd inside the

code snippets

C:\VS2008TrainingKit\Labs\BuildingWebApp\Setup folder, by double clicking on the SetupEx.cmd. This command file executes the snippet installer. Note: For convenience, much of the code is available as Visual Studio code snippets. The SetupEx.cmd file launches the Visual Studio installer file that installs the code snippets.
b. When prompted, choose all items in the installer, and then click Next.

c. You will be warned that the file is not signed; choose Yes to proceed anyway.

d. When prompted for the location of the snippets, highlight all snippets, check the check box next

to My Code Snippets, and click Next.

Page 2 of 36

Building Web Applications with Visual Studio 2008 Tasks Detailed Steps

e. Click Finish to continue. f.

The installation should proceed and install all snippets, click Close to close the wizard. In the command prompt, click Enter to exit out.

Page 3 of 36

Building Web Applications with Visual Studio 2008

Exercise 2 Creating the Image Layout

Scenario
In this exercise you will learn how to create CSS styles using Visual Studio 2008. To verify that each step is correctly performed, it is recommended to build the solution at the end of each task. Tasks
1. Create photo-list CSS

Detailed Steps
a. Open Microsoft Visual Studio 2008 from Start | All Programs | Microsoft Visual Studio 2008

style Note: In this task you will use the Manage Styles window.

| Microsoft Visual Studio 2008.

b. Open the solution file WebSite.sln located in the

C:\VS2008TrainingKit\Labs\BuildingWebApp\Ex01-CreatingImageLayout\begin\ folder.
c. Open the Styles.aspx page. To do so, in Solution Explorer, double-click Styles.aspx.

d.

Click the Split tab to show design and source views.

Page 4 of 36

Building Web Applications with Visual Studio 2008 Tasks Detailed Steps
e. Select View | CSS Properties, and pin the CSS Properties panel.

f.

In the source view, set the cursor on the li element.

g. Right click the Body in the Applied Rules in CSS Properties panel and in the context menu

select New Style.

h. In the New Style window, enter .photo-list li as the selector name. Select Box from the

Category list and set margin top to 10px. Click OK.

Page 5 of 36

Building Web Applications with Visual Studio 2008 Tasks Detailed Steps

i.

To add more styles you may use the new Manage Styles window. To do so, in Visual Studio, select View | Manage Styles.

j.

Modify the .photo-list li style from the Manage Styles window. To do so, right-click the .photo-list li selector and select Modify Style.

Note: If the Manage Styles window appears empty, close it, then re-open it by selecting Manage Styles on the View menu.

Page 6 of 36

Building Web Applications with Visual Studio 2008 Tasks Detailed Steps
k. Select Font from the Category list and then set font-family to Trebuchet MS and font-size to

12px.

l.

Select Layout from the Category list then set display to inline, and float to left. Press OK.

Page 7 of 36

Building Web Applications with Visual Studio 2008 Tasks Detailed Steps
m. The style in the styles.aspx page should look like the following:

Style
.pager { line-height: 0px; height: 30px; display: block; clear: both; }
n. Move the style from the page to the StyleSheet.css file using Manage Styles window. To do so,

drag the photo-style and drop it on the Stylesheet.css section.

2. Create More Styles

a. Using the Manage Styles panel, create a new style named .pager in StyleSheet.css. To do so,

Note: In this and the following tasks you create more styles to improve the display of the image list in Styles.aspx page.

right-click an empty area in the StyleSheet.css section and select New Style.

Page 8 of 36

Building Web Applications with Visual Studio 2008 Tasks Detailed Steps

b. Type in .pager as the selector name, then select Block from the Category list and set line-height

to 0px.

c. Select Position from the Category list and set height to 30px. d. Select Layout from the Category list, and then set display to block and clear to both. e. Press OK. The .pager style in Stylesheets.css must look like the following:

Style
.pager {

Page 9 of 36

Building Web Applications with Visual Studio 2008 Tasks Detailed Steps line-height: 0px; height: 30px; display: block; clear: both; }
3. Create styles for <a> and a. Using the Manage Styles panel, create a new style in Stylesheet.css. To do so, in the Manage

<span> elements

Styles panel, right-click an empty area in the StyleSheet.css section and select New Style.

b. In Selector, enter .pager a, .pager span as the selector name.

c. Select Font from the Category list and set color to black and text-decoration to none. d. Select Block from the Category list and set line-height to normal. e. Select Border from the Category list and set border-style to solid, border-width to 1px and

border-color to white.
f.

Select Box from the Category list and set top and right padding to 0.4em and margin-right to 0.4em. To do so, uncheck the Same for all box.

g. Select Layout from the Category list and set float to left.

Page 10 of 36

Building Web Applications with Visual Studio 2008 Tasks Detailed Steps
h. Press OK. The resulting style should look like the following:

Style
.pager a, .pager span { color: black; text-decoration: none; line-height: normal; border: 1px solid white; margin-right: 0.4em; padding-top: 0.4em; padding-right: 0.4em; float: left; }

4. Create a style for the

a. Using the Manage Styles panel, create a new style in Stylesheet.css. To do so, in the Manage

<span> element

Styles panel, right-click an empty area in the StyleSheet.css section and select New Style.

b. In the Selector field, enter .pager span as the selector name. c. Select Font from the Category list and set font-weight to bold and color to white. d. Select Background from the Category list and set background-color to black. e. Press OK. The new style should look like the following.

Style
.pager span { font-weight: bold; color: white; background-color: black; }
5. Verification a. In order to verify that you have correctly performed every step of the exercise, proceed as

Page 11 of 36

Building Web Applications with Visual Studio 2008 Tasks Detailed Steps follows. In this verification you check that the image list displays in tabular form.
b. Set the Styles.aspx page as the starting page. To do so, in Solution Explorer right-click

Styles.aspx and select the Set As Start Page option.

c. Press F5 to build and run the project, and open the start page in the browser. If prompted to

enable debug in web.config, Click OK.

d. The web page should display in the following manner in the browser window:

e. Display from styles.aspx page in the browser f.

Close the browser to stop debugging.

Page 12 of 36

Building Web Applications with Visual Studio 2008

Exercise 3 Creating an Image Summary Page

Scenario
In this exercise you will bind a grid using LINQ to create an image summary page. Tasks
1. Create a default page to

Detailed Steps

show the summary Note: In this task you will create a web page

a. Open Microsoft Visual Studio 2008 from Start | All Programs | Microsoft Visual Studio 2008 | Microsoft Visual Studio 2008. b. Open the solution file WebSite.sln located in the C:\VS2008TrainingKit\Labs\BuildingWebApp\Ex02CreatingImageSummaryPage\begin folder. c. In Solution Explorer, right click on the project and select Add New Item.

d. In the Add New Item dialog window, select a Web Form template, name it Default.aspx, and click the Add button.

Page 13 of 36

Building Web Applications with Visual Studio 2008 Tasks Detailed Steps

e. Click on the Split tab.

f. Open the Toolbox. To do so, press Ctrl + Alt + X.

Page 14 of 36

Building Web Applications with Visual Studio 2008 Tasks Detailed Steps

g. In the Toolbox, from the Data section, drag a GridView control into the div element.

h. From the SmartTag of the recently added grid, select Auto Format. To open the SmartTag window, click the > symbol next to the grid.

i. Select Professional scheme and click OK.

Page 15 of 36

Building Web Applications with Visual Studio 2008 Tasks Detailed Steps

j. From the Grid SmartTag, select Edit Columns. To open the SmartTag window, click the > symbol next to the grid.

k. Uncheck Auto-generate fields.

Page 16 of 36

Building Web Applications with Visual Studio 2008 Tasks Detailed Steps

l. Add a HyperLinkField column. To do so, select HyperLinkField from the Available fields list and click Add. m. Modify the following properties. Property Name HeaderText DataNavigateUrlFields DataNavigateUrlFormatString DataTextField Value Name AlbumID Images.aspx?AlbumID={0} Name

Page 17 of 36

Building Web Applications with Visual Studio 2008 Tasks Detailed Steps

n. Add a BoundField column. To do so, select BoundField from the Available fields list and click Add.

o. Modify the following properties:

Page 18 of 36

Building Web Applications with Visual Studio 2008 Tasks Detailed Steps Property Name HeaderText DataField Value Count Count

p. Expand the ItemStyle property and set HorizontalAlign to Right.

q. Press the OK button. r. In the Properties window, select GridView1 and change the ShowFooter property to True.

Page 19 of 36

Building Web Applications with Visual Studio 2008 Tasks Detailed Steps

2. Create LINQ classes to

a. In Solution Explorer, right click on the project and select Add New Item.

access the database Note: In this task you create a LINQ DataContext to access the database

b. Select LINQ to SQL Classes template, name it PhotoAlbum.dbml and click Add.

Page 20 of 36

Building Web Applications with Visual Studio 2008 Tasks Detailed Steps

c. If the following warning appears, click the Yes button.

d. In Solution Explorer double click on the App_Data\Photo.mdf file to display Server Explorer.

e. In Server Explorer, expand the Tables node and drag both tables onto the design surface.

Page 21 of 36

Building Web Applications with Visual Studio 2008 Tasks Detailed Steps

f. Save All. To do so, press Ctrl + Shift + S.

3. Bind the grid to a LINQ

a. In Solution Explorer, right-click Default.aspx and select View Markup.

query

b. Add the following code inside the <head> section to add a style for the grid footer. ASP.NET
<head runat="server"> <title>Untitled Page</title> <style type="text/css"> .FooterStyle { text-align: right; } .FooterStyle A {

Page 22 of 36

Building Web Applications with Visual Studio 2008 Tasks Detailed Steps color: White; } </style>

c. Add the following declaration after the @ Page directive. ASP.NET

<%@ Import Namespace="System.Linq" %>

d. After the <!DOCTYPE declaration, add the following code. (Code-Snippet: BuildingWebApp Lab GridView DataBind) ASP.NET
<script runat="server"> protected void form1_Load(object sender, EventArgs e) { using (var ctx = new PhotoAlbumDataContext()) { var q = (from a in ctx.Albums select new { AlbumID = a.AlbumID, Name = a.Name, Count = a.Photos.Count }).ToList(); GridView1.DataSource = q; GridView1.DataBind(); } } protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.Footer) { using (PhotoAlbumDataContext ctx = new PhotoAlbumDataContext()) { e.Row.Cells[0].Text = "<a href='Images.aspx?AlbumId=0'>All Photos</a>"; e.Row.Cells[1].Text = ctx.Albums.Sum(album => album.Photos.Count).ToString(); } } } </script>

e. Modify the <form declaration to define a form1_load event: ASP.NET

<form id="form1" runat="server" onload="form1_Load">

Page 23 of 36

Building Web Applications with Visual Studio 2008 Tasks Detailed Steps

f. Modify the GridView to handle the RowDataBound event. To do so, add the OnRowDataBound attribute to GridView1_RowDataBound inside the GridView1 element.

g. Modify the FootStyler use the FooterStyle css. You can do so by adding the code CssClass=FooterStyle at the end of the FooterStyle markup.

h. Save All. To do so, press Ctrl + Shift + S.

4. Verification

a. In order to verify that you have correctly performed every step of the exercise, proceed as follows. In this verification you check that the grid displays the data using a LINQ query. b. In Solution Explorer, right-click Default.aspx and select View in Browser.

Page 24 of 36

Building Web Applications with Visual Studio 2008 Tasks Detailed Steps

c. You should see the following in your browser.

Page 25 of 36

Building Web Applications with Visual Studio 2008

Exercise 4 Create the Image Details Page

Scenario
In this exercise you will create a page to view image details for the various categories in the summary information page created in the previous exercise.

Tasks
1. Adding a ListView

Detailed Steps

Control.

a. Open Microsoft Visual Studio 2008 from Start | All Programs | Microsoft Visual Studio 2008 | Microsoft Visual Studio 2008. b. Open the solution file WebSite.sln located in the C:\VS2008TrainingKit\Labs\BuildingWebApp\ Ex03CreatingImageDetailsPage\begin folder. c. In Solution Explorer, right click on the project and select Add New Item.

d. Select the Web Form template, name it Images.aspx and click the Add button.

Page 26 of 36

Building Web Applications with Visual Studio 2008 Tasks Detailed Steps

e. Click the Design tab to display the design view of Images.aspx.

f. Open the Toolbox and select the Data region. To do so, click Ctrl + Alt + X, pin the Toolbox and expand the contained Data region.

Page 27 of 36

Building Web Applications with Visual Studio 2008 Tasks Detailed Steps

g. Drag a ListView from the Toolbox into the div element inside the Images.aspx page.

h. Select New Data Source from the Choose Data Source option inside the Common ListView Tasks window.

i. From the Wizard, select the LINQ Data Source Type and press the OK button.

Page 28 of 36

Building Web Applications with Visual Studio 2008 Tasks Detailed Steps

j. Select PhotoAlbumDataContext and click Next.

k. From the Table dropdown list, select the Photos table and click the Where button.

Page 29 of 36

Building Web Applications with Visual Studio 2008 Tasks Detailed Steps

l. Set the following properties:

Field Column Operator Source QueryStringField Value AlbumID == QueryString AlbumID

m. Click Add and then OK.

n. Click the Finish button. If the Finish button is still hidden, uncheck * and recheck * o. Click the Source tab to switch to the source view of Images.aspx.

Page 30 of 36

Building Web Applications with Visual Studio 2008 Tasks Detailed Steps

p. Add the following code inside the asp:ListView element. ASP.NET

<asp:ListView ID="ListView1" runat="server" DataMember="DefaultView" DataSourceID="LinqDataSource1"> <LayoutTemplate> <ul class="photo-list"> <asp:PlaceHolder ID="itemPlaceholder" runat="server" /> </ul> </LayoutTemplate> <ItemTemplate> <li> <img src='<%#Eval("Path")%>' alt="" /><br /> <%#Eval("Name") %> </li> </ItemTemplate> </asp:ListView>

q. Add a style sheet reference on the page. To do so, drag the StyleSheet.css file from Solution Explorer inside the head element in Images.aspx.

Page 31 of 36

Building Web Applications with Visual Studio 2008 Tasks Detailed Steps

r. Click the Design tab to display the design view of Images.aspx. s. Drag a DataPager control above the ListView control.

t. Select the DataPager in the designer and in the Properties window set the PageSize to 5 and the PagedControlID to ListView1.

Page 32 of 36

Building Web Applications with Visual Studio 2008 Tasks Detailed Steps

u. Drag a DataPager control below the ListView control.

v. Select the DataPager in the designer and in the Properties window set the PageSize to 5 and the PagedControlID to ListView1.

w. Select DataPager1 in the designer. Click the arrow > to display the smart tag and select Edit Pager Fields.

Page 33 of 36

Building Web Applications with Visual Studio 2008 Tasks Detailed Steps

x. Select Numeric Pager Field in the Available fields list, click the Add button and then the OK button.

y. To configure the DataPager2 control, repeat the steps used to configure DataPager1. z. On both DataPager controls, add style. To do so, click the Source tab from Images.aspx, locate the DataPager controls, add a class attribute and set its value to "pager".

Page 34 of 36

Building Web Applications with Visual Studio 2008 Tasks Detailed Steps

aa. Press the Design tab and select the Data Source control. In the Properties window, select the Events view and double click the Selecting event.

bb. Add the following code to handle the Selecting event. C#

protected void LinqDataSource1_Selecting(object sender, LinqDataSourceSelectEventArgs e) { if (Request["AlbumID"] == null || Request["AlbumID"] == "0") LinqDataSource1.Where = null; }

cc. Press Ctrl + Shift + S to save all the files.

2. Verification

a. In order to verify that you have correctly performed every step of the exercise, proceed as follows. In this verification you check that you can navigate through the data grid and access the image details which are paged. b. In Solution Explorer, right-click Default.aspx and select View in Browser.

Page 35 of 36

Building Web Applications with Visual Studio 2008 Tasks Detailed Steps

c. You should see the following in your browser:

d. Click the link for the second row labeled MIX 07 Las Vegas. e. Click the page numbers above or below to navigate through the different images in that category.

Page 36 of 36