Lab 2: Building a data-driven site in ASP.NET 2.0 (C#)

bubblemessengerΑσφάλεια

5 Νοε 2013 (πριν από 4 χρόνια και 1 μήνα)

84 εμφανίσεις

Lab
2
:
Building a data
-
driven site in
ASP.NET 2.0

(C#)

After completing this lab, you will be able to:



Create a database with SQL

2005 Express Editi
on



Use data binding with ASP.NET to display data on a Web page



Use ASP.NET data sources to update and insert data


Before working on this lab, you must have:



Basic understanding of HTML



Familiarity with Web interfaces



Completed Lab
1: ASP.NET 2.0 Fundamentals lab of this series



Objectives

Prerequisites

Estimated time to
complete this lab:
60

minutes

2

Lab 2: Building a data
-
driven site in ASP.NET 2.0 (C#)



Exercise 0

Lab Setup

The Lab Setup section l
ists the tasks that you must perform before you begin the lab.



Tasks

Detailed steps

1.

Installing the files and
setting up the directories
.

a.

This lab should already be set to go if you prepared for Lab 01.

b.

Note that the completed solution to this lab can

be found in the
MyWeatherSiteSolution2 directory (typically at
c:
\
labs
\
MyWeatherSiteSolution2 )

and can be used as a reference if
necessary.






Lab 2: Building a data
-
driven site in ASP.NET 2.0 (C#)

3



Exercise
1


Creating a
database


In this exe
rcise,
you will create a new
database with

SQL Server 2005
Express
.
This database will
store historical weather data, so you will create a table to keep tr
ack of weather details like
temperature,
rainfall
, and so on.

Later you will build an interface to add weather data for all clients,
so you will also store the location in this database.



T
asks

Detailed steps

1.

Open the weather site that
you began building in Lab 1
of this series.


a.

Launch Microsoft Visual Web Developer 2005 Express Edition.

b.

Select
File |
Open

Web Site...

.

c.

In the
Open

Web Site
, navigate to the site you built in lab 1 (it sho
uld
be located at
c:
\
labs
\
MyWeatherSite
)
.

2.

Create a new database called
WeatherHistory.


a.

To add a new database to your site, right
-
click on the
App_Data

directory
in your
Solution Explorer

window, and select
Add New Item…
. Choose
the
SQL Database Template
, and name the database file
WeatherHistory
.mdf
.

3.

Create a new database table
called History to store
weather history. This table
should have 8 columns:

ID

ReportDate

Location

HighTemp

LowTemp

Rainfall

Snowfall

Description

a.

In the
Database Explorer

window,
right click on the
Tables

node and
select
Add New Table
.

b.

Set the
Name

property of the new table to
History

in the properties
window.

c.

Add 8 columns to the table with the following names and types:

ID

(
int
)

ReportDate

(
datetime
)

Location

(
nchar(50)
)

HighTem
p

(
float
)

LowTemp

(
float
)

Rainfall

(
float
)

Snowfall

(
float
)

Description

(
nvarchar(MAX)
)

d.

Make the
ID

column an identity column by setting the
Is Identity

(under the
Identity Specification

section)
property to
true
.

e.

Once complete, your table design should
look like:


4

Lab 2: Building a data
-
driven site in ASP.NET 2.0 (C#)




4.

Populate your new table
with some artificial data for
testing purposes.

a.

Right
-
click on the
History

table in the
Database Explorer

and select
Show Table Data
.

b.

Add several rows worth of data (try to make the values somewhat
reasonable). The arti
ficial data entered in the solution database is
shown below as a sample.




Lab 2: Building a data
-
driven site in ASP.NET 2.0 (C#)

5



Exercise
2

Binding data


In this exercise, you will create a new page in your weather site to display historical weather data
called WeatherHistory.aspx
.

On this page, you will add a GridView control to display historical
weather data retrieved from your WeatherHistory

database created in exercise 1.



Tasks

Detailed steps

1.

Add a new page,
WeatherHistory.aspx, to
your site and link to it from
your other pages.

a.

In the
Solution Explorer

window, right
-
click
on the
Web site

and
select
Add New Item…

.

b.

Select
Web Form
, and name the file
Weather
History
.aspx
.

c.

Switch your new page into Design view, and type some text at the top
of the page to indicate that users will be able to look up weather
history:
Weather Hist
ory
.

b.

Select the text, and using the
Formatting

toolbar, select a
Block
Format

of
H1
,

as you did before.

c.

Open your
Default.aspx

page again, and
add the word
History

after
the
Weather
hyperlink (click after the word and start typing). T
urn the
word into a hy
perlink pointing to your new page.
Select the word
History
and select the
Convert to Hyperlink

button from the
Formatting

toolbar.

Use the
Browse

button in the
Hyperlink

dialog to choose your
Weather
History
.aspx

page.

d.

Copy the
History

hyperlink from your d
efault page to your
Weather.aspx

page as well. To do this, select the hyperlink with the mouse and hit
Ctrl
-
C

or
Edit | Copy
. Open the
Weather.aspx

page in
Design

mode, place the
mouse cursor after the
Weather

hyperlink and paste (
Ctrl
-
V

or
Edit |
Paste
).

e.

Finally, copy all three hyperlinks and the horizontal rule to your new page,
WeatherHistory.aspx

using the same technique.

2.

Add a GridView to your
WeatherHistory.aspx page
to display the contents of the
History table in your
WeatherHistory database.

a.

Open y
our
WeatherHistory.aspx

file and switch it to
Design

mode.

b.

Display the
Database Explorer

window, and drag the
History
table
from the window onto the design surface.

c.

When the
GridView Tasks

menu appears, check the
Enable Sorting

and
Enable Paging

checkbox
es
.

d.

F
rom the
GridView Tasks

menu, select the
Edit Columns

item to
hide the
ID

column.

Select the
ID

column in the
Selected

fields

listbox.

Set the
Visible

property for this field to
false
.

e.

Also from the
GridView Tasks

menu, select the
Edit Columns

item
again

to format the
ReportDate

column. Select the
ReportDate

column in the
Selected fields

listbox. Set the
DataFormatString

to
{0:d}

which is a short date format without time. Also set the
HtmlEncode

property for this field to
false

for the format string to
ap
ply properly.

f.

Finally, in the
GridView Tasks

menu, select the
Auto Format…

item,
and select the formatting of your choice.


6

Lab 2: Building a
data
-
driven site in ASP.NET 2.0 (C#)



3.

Run and test!

a.

Try running the page (
Debug | Start Without debugging

or
Ctrl
-
F5
)
and verify that you can now view the weather history

stored in your
database, complete with sorting!



Lab 2: Building a data
-
driven site in ASP.NET 2.0 (C#)

7



Exercise
3

Editing data


In this exerci
se, you will

modify the

GridView

from the previous
exercise
to support updating and
deleting. Next, you will
add

a DetailsView with a SqlDataSource populated with an
InsertCommand statement for inserting new
entries in your weather history table
.



Tasks

Detailed steps

1.

Add an UpdateQuery and a
DeleteQuery to the
SqlDataSource, then enable
updating and deleting in the
GridView on your
WeatherHistory page.


a.

Open your
WeatherHistory.aspx

page i
n Design mode.

b.

Select the
SqlDataSource

control on the page, and click on the ellipses
button in the
UpdateQuery

property



c.

When presented with the
Command and Parameter Editor

dialog,
type the following UPDATE statement in the
Update command

box:


UPDATE

History SET ReportDate = @ReportDate, Location =
@Location, HighTemp = @HighTemp, LowTemp = @LowTemp,
Rainfall = @Rainfall, Snowfall =

@Snowfall, Description
= @Description

WHERE ID=@ID


d.

Then press the
Refresh Parameters

button to generate the parameters
in the data source control.

e.

Repeat these steps for the
Delete Query

property with the following
query:


DELETE FROM History WHERE ID = @ID

f.

Repeat these steps one more time for the
Insert Query

property with
the following query (we will use this in the
Deta
ilsView

we add later):


INSERT INTO History (ReportDate, Location, HighTemp,
LowTemp, Rainfall, Snowfall, Description) VALUES
(@ReportDate, @Location, @HighTemp, @LowTemp,
@Rainfall, @Snowfall, @Description)


g.

Now, click on the
GridView

control and access t
he
GridView tasks

menu. You should be able to check the
Enable Editing
and
Enable
Deleting
checkboxes.

h.

Finally, in the properties window with the
GridView

selected, set the
DataKeyNames

property to
ID

(you can also select the column with
the ellipses butto
n).




2.

Run and test!

a.

Try running the page (
Debug | Start Without debugging

or
Ctrl
-
F5
)
and verify that you can now edit and delete rows in your Weather
8

Lab 2: Building a data
-
driven site in ASP.NET 2.0 (C#)



history table!

3.

Add a DetailsView control
to allow users to enter new
entries in the weather
history d
atabase.

a.

Open your
WeatherHistory.aspx

page in
Design

view.

b.

Click after the
SqlDataSource

and hit
Enter
, then type
Insert new
entry:

c.

Hit
Enter

again, and drag a
DetailsView

control from the
Data

tab in
the toolbox on the left underneath the text you just t
yped.

d.

When presented with the
DetailsView

tasks

menu, set the data source
to the same data source your
GridView

is using (
SqlDataSource1
)
using the drop
-
down selector.

e.

Also on the
DetailsView tasks

menu, check the
Enable Inserting

checkbox.

Feel free to us
e the
Auto Format…

option to change the
appearance of the
DetailsView

at this point as well.

f.

In the properties window for your new
DetailsView
, set the
Default
Mode

attribute to
Insert
.

We only want this control to be used for
inserting new history entries
, so it should always display in
Insert

mode.

g.

Finally, click the
Edit Fields…

command on the
DetailsView

tasks
menu, and select the
New, Insert, Cancel

field in the
Selected fields

list box.

h.

Set the
ShowCancelButton

attribute to
False

since our page doesn’
t
have the concept of cancelling an insertion


you either hit insert or
you don’t


i.

Your details view should look similar to the one shown on this page
(differing perhaps in style and color based on your formatting choice).

4.

Run and test!

a.

Try running the
page (
Debug | Start Without debugging

or
Ctrl
-
F5
)
and verify that you can insert new entries into your Weather history
table!