building web applications with visual studio 2008

8/3/2019 Building Web Applications With Visual Studio 2008

1/38

Building Web Applications withVisual Studio 2008

Microsoft Virtual Labs


2/38


3/38

Building Web Applications with Visual Studio 2008

Page 1 of 36

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

Estimated Time toComplete This Lab 60 MinutesComputer used in this Lab

VS 2008

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


4/38


Page 2 of 36

Exercise 1Code Setup

Scenario

Perform these tasks to set up the code snippets for this lab.

Tasks Detailed Steps

1. Setting up the lab withcode snippets

a. Run the command file SetupEx.cmd inside theC:\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 clickNext.

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 nextto My Code Snippets, and clickNext.


5/38


Page 3 of 36


e. ClickFinish to continue.f. The installation should proceed and install all snippets, clickClose to close the wizard. In the

command prompt, clickEnter to exit out.


6/38


Page 4 of 36

Exercise 2Creating 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 isrecommended to build the solution at the end of each task.


1. Create photo-list CSSstyle

Note: In this task you will use

the Manage Styles window.

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 theC:\VS2008TrainingKit\Labs\BuildingWebApp\Ex01-CreatingImageLayout\begin\folder.

c. Open the Styles.aspx page. To do so, in Solution Explorer, double-clickStyles.aspx.

d. Click the Split tab to show design and source views.


7/38


Page 5 of 36


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 menuselect New Style.

h. In the New Style window, enter .photo-list li as the selector name. Select Box from theCategory list and set margin top to 10px. ClickOK.


8/38


Page 6 of 36


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.


9/38


Page 7 of 36


k. Select Font from the Category list and then set font-family to Trebuchet MS and font-size to12px.

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


10/38


Page 8 of 36


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 StylesNote: In this and the following

tasks you create more styles to

improve the display of theimage list in Styles.aspx page.

a. Using the Manage Styles panel, create a new style named .pager in StyleSheet.css. To do so,right-click an empty area in the StyleSheet.css section and select New Style.


11/38


Page 9 of 36


b. Type in .pager as the selector name, then select Block from the Category list and set line-heightto 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

{


12/38


Page 10 of 36


line-height: 0px;

height: 30px;

display: block;

clear: both;

}

3. Create styles for and elements

a. Using the Manage Styles panel, create a new style in Stylesheet.css. To do so, in the ManageStyles 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 to0.4em. To do so, uncheck the Same for all box.

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


13/38


14/38


Page 12 of 36


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-clickStyles.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 toenable debug in web.config, ClickOK.

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

e. Display from styles.aspx page in the browserf. Close the browser to stop debugging.


15/38


Page 13 of 36

Exercise 3Creating an Image Summary Page

Scenario

In this exercise you will bind a grid using LINQ to create an image summary page.


1. Create a default page toshow the summary

Note: In this task you will

create a web page

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

b. Open the solution file WebSite.sln located in theC:\VS2008TrainingKit\Labs\BuildingWebApp\Ex02-

CreatingImageSummaryPage\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 itDefault.aspx, and click the Add button.


16/38


Page 14 of 36


e. Click on the Split tab.

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


17/38


Page 15 of 36


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 theSmartTag window, click the > symbol next to the grid.

i. Select Professional scheme and clickOK.


18/38


Page 16 of 36


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

k. UncheckAuto-generate fields.


19/38


20/38


Page 18 of 36


n. Add a BoundField column. To do so, select BoundField from the Available fields listand clickAdd.

o. Modify the following properties:


21/38


Page 19 of 36


Property Name Value

HeaderText Count

DataField 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.


22/38


Page 20 of 36


2. Create LINQ classes toaccess the database

Note: In this task you create a

LINQ DataContext to access

the database

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

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


23/38


Page 21 of 36


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

d. In Solution Explorer double click on the App_Data\Photo.mdffile to display ServerExplorer.

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


24/38


25/38


Page 23 of 36


color: White;

}

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

d. After the

album.Photos.Count).ToString();

}

}

}

e. Modify the


26/38


Page 24 of 36


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

element.

g. Modify the FootStyler use the FooterStyle css. You can do so by adding the codeCssClass=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-clickDefault.aspx and select View in Browser.


27/38


Page 25 of 36


c. You should see the following in your browser.


28/38


Page 26 of 36

Exercise 4Create 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 pagecreated in the previous exercise.


1. Adding a ListViewControl.

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

b. Open the solution file WebSite.sln located in theC:\VS2008TrainingKit\Labs\BuildingWebApp\ Ex03-

CreatingImageDetailsPage\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.


29/38


Page 27 of 36


e. Click the Design tab to display the design view ofImages.aspx.

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


30/38


Page 28 of 36


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 CommonListView Tasks window.

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


31/38


Page 29 of 36


j. Select PhotoAlbumDataContext and clickNext.

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


32/38


Page 30 of 36


l. Set the following properties:Field Value

Column AlbumID

Operator ==

Source QueryString

QueryStringField AlbumID

m.ClickAdd 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 ofImages.aspx.


33/38


Page 31 of 36


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

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


34/38


Page 32 of 36


r. Click the Design tab to display the design view ofImages.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 to5 and the PagedControlID to ListView1.


35/38


Page 33 of 36


u. Drag a DataPager control below the ListView control.

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

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


36/38


Page 34 of 36


x. Select Numeric Pager Field in the Available fields list, click the Add button and thenthe 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".


37/38


Page 35 of 36


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-clickDefault.aspx and select View in Browser.


38/38



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.

building web applications with visual studio 2008

Documents