This is the fiist of a seiies of tutoiials that will teach you how to builu useful, ieal-

woilu websites with uynamic content in a fun anu easy way, using ASP.NET anu C#.
ASP.NET pages can uisplay BTNL, collect usei input, anu inteiact with uatabases.
Note that these tutoiials aie not meant to pioviue an in-uepth tiaining in ASP.NET
piogiamming. The goal is to walk you thiough the uevelopment steps of a simple
pioject, which you may latei follow in uesigning an inteiface to youi own final
uatabase pioject foi this class.
If you aie inteiesteu in fuithei stuuy of web uevelopment with ASP.NET, I
iecommenu the book by Scott Mitchell, SAMS Teach Yourself ASP.Net in 24
Hours, Pearson Education, 2010, ISBN 978-0-672-33305-7.
"#$% &' ()*#+,,-). #/$ "01#2+3$ 4)5-30)6$)#

Piioi to using ASP.NET, you will neeu to install the following softwaie:
SQL Seivei 2uu8 R2 foi the uatabase engine.
SQL Seivei Nanagement Stuuio Expiess foi the client (SSNS)
visual Web Bevelopei Expiess 2u1u foi the IBE
The .NET fiamewoik 4 enviionment

To install this softwaie, visit the following website:

http:www.miciosoft.comexpiessBownloaus

Click on Bownloau then scioll uown to 2u1u Expiess piouucts anu click on visual
Web Bevelopei 2u1u Expiess. Because visual Web Bevelopei is uesigneu foi
ueveloping ASP.NET websites, installing it automatically installs the .NET
Fiamewoik anu othei iequiieu ASP.NET tools. You can also optionally install SQL
Seivei 2uu8 (just checkmaik "Niciosoft SQL Seivei 2uu8 Expiess Seivice Pack 1"
when piompteu). If you foiget to checkmaik this option, you'll neeu to install
Niciosoft SQL Seivei 2uu8 Expiess sepaiately.

Alteinately, you may uownloau anu execute the Web Platfoim Installei 4.6, anu
checkmaik the 4 piouucts listeu above to be installeu.

78#03-+, 9&: ;$##-). "#+3#$< 2-#/ =">'?47
"#$% @' ;$##-). *#+3#$< 2-#/ A-*8+, B$C D$5$,0%$3






































Click Stait anu seaich
foi visual Web
Bevelopei, then stait
the piogiam.













































Click on New Web Site
1. Nake suie visual
C# is selecteu.
2. Select ASP.NET
Web Site
S. Specify the location of the
pioject unuei 0seisPublic anu
name the pioject. I nameu it
NusicShopWebsite.
Pay attention to the uiiectoiy wheie you stoie the pioject. The pioject shoulu be in
E:FG*$3*F>8C,-HF''' heie I have nameu the pioject foluei NusicShopWebsite. You
might want to name it WebsiteExample, oi any othei name you like.

visual web uevelopei cieates a skeleton aspx file nameu D$1+8,#'+*%I, which looks
like the one below. This file contains only static coue, but we will shoitly see that
we can !"# %&'()&*+ to this page to suppoit uynamic content.
























With Befault.aspx open anu youi pioject foluei in the Solution Exploiei highlighteu,
hit the gieen tiiangulai button at the top toolbai oi FS. You may get a winuow like
the one below. uo aheau anu click 0K.












1. Befault.aspx is
cieateu by uefault.
2. Bit the Run button.
Click 0K

The uefault system biowsei opens anu uisplays the application iunning.





















Nany web applications iequiie useis to cieate an account befoie they can use
ceitain featuies of the site. visual Web Bevelopei automatically incluues Login anu
Registei contiols. Tiy logging in oi cieate a new usei.



















Click Log In
The fiist time you iun the
application you neeu to
cieate an account (click
Registei).

The passwoiu fielu iequiies
minimum 6 chaiacteis.


















Close youi biowsei anu ietuin to visual Web Bevelopei. Foi the fiist usei
iegisteieu with the website, visual Web uevelopei automatically cieates a SQL
Seivei 2uu8 Expiess Euition uatabase nameu =">?47DJ in the =%%KD+#+ foluei
with pieuesigneu tables to suppoit usei accounts.

To veiify this, iight-click on the App_Bata foluei in the Solution Exploiei winuow
anu select L$13$*/ M0,<$3. Expanu App_Bata by clicking on the plus sign. You will
see the uatabase file ASPNETBB.NBF useu by youi website. By uefault it incluues
11 tables, pioviuing functionality that extenus beyonu simple usei accounts.
























Now that you aie a new usei of this application you aie ieauy to cieate the tables in
the uatabase. Save all changes anu make suie you close visual Web Bevelopei.
Close Web Bevelopei
Right-click on App-Bata,
then Refiesh Foluei. You
will see ASPNETBB.NBF
unuei App_Bata.

"#$% N' =<<-). 7+C,$* #0 O083 D+#+C+*$

Aftei closing the visual Web Bevelopei, open SQL Seivei Nanagement Stuuio.










































Click Stait anu seaich foi SQL
seivei, then stait the SQL
Nanagement Stuuio application.






















0nce you aie connecteu iight click on D+#+C+*$* anu click =##+H/.




















Aftei clicking =##+H/, you will be piesenteu with the following winuow:


The seivei name is in the foim
computeiname\SQLEXPRESS.
Select Winuows
Authentication
Right-click on
Batabases anu
click Attach


























Navigate to youi pioject foluei unuei C:\0seis\Public. anu select ASPNETBB.NBF.
(This file was cieateu when you auueu youiself as a new usei of the visual Web
Bevelopment Application).

















Click =<<













































Ny pioject foluei name is
P8*-H"/0%B$C*-#$.
Navigate into youi
=%%KD+#+ subfoluei anu
select =">?47DJ'PDM
Click QR when uone














































This is the uatabase you
have selecteu to attach
Click QR to complete the
attach opeiation.
You shoulu be able to see
a list of tables when you
expanu the 7+C,$* foluei

































Select M-,$ ! Q%$) ! M-,$
Nake suie you have
P8*-H"/0%"H/$6+'*S, in
youi pioject uiiectoiy. (If
not, uownloau it fiom the
class website.)
With the NusicShopSchema
selecteu, click Q%$).






















The SQL coue fiom NusicShopSchema.sql auus 6 tables to the uatabase: Song,
ShopCait, ShopCaitLine, 0iueiBeauei, 0iueiLine anu CieuitCaiu. It also auus some
sample uata to the Song table. Aftei the SQL coue gets executeu, you shoulu be able
to see the new tables in the 0bject Exploiei when you iefiesh.




















Nake suie you have
ASPNETBB.NBF selecteu
anu click on T4I$H8#$

These six tables have been cieateu
by the coue in NusicShopSchema.sql.
Right-click on 7+C,$* anu then
iefiesh to see the new tables.

Now that we have cieateu the tables we neeueu to woik with, the job of the SQL
seivei is uone. We neeu to uetach the uatabase, so that it can be useu by othei
applications (oui Web Bevelopment seivei in paiticulai).

























Right-click on 7+C,$*, then
select Tasks ! Betach
You will be piompteu with a winuow foi selecting the uatabase to uetach.
























Close SQL Seivei Nanagement Stuuio.




















Nake suie this is checkeu.
Click QR. Anothei winuow with the
message "0bject iefeience not set to
an instance of an object" might pop up
- if so, simply hit QR to close it.
1. Nake suie that the
uatabase ASPNETBB.NBF
is not listeu heie befoie
you close. This confiims
that the uatabase has
been uetacheu.
2. Close SQL Seivei
Nanagement Stuuio.
"#$% U' L$#3-$5-). D+#+ 1306 #/$ D+#+C+*$

Now that we have cieateu oui uatabase, oui next step is accessing uata fiom the
uatabase. Among many othei Web contiols, ASP.NET contains an SqlBataSouice
contiol uesigneu to ietiieve uata fiom a uatabase, anu a uiiuview contiol uesigneu
to uisplay the ietiieveu uata on a page.

0pen NS visual Web Bevelopei. Youi website may be listeu unuei Recent Piojects,
so you can click on it uiiectly. If not listeu, then select File ! 0pen anu navigate to
youi website in youi 0seisPublic foluei.




































Bouble-click to open
youi website.
The Souice view shows the asp coue
behinu the website uesign. Alteinate
views aie Besign only anu Split (both).





















If you uon't finu the Toolbox, go to view ! 0thei Winuows ! Toolbox, oi
Winuows! Reset Winuow Layout. Fiom the uiop-uown menu of the Toolbox,
uouble click SqlBataSouice (you'll finu it unuei the Bata section of the Toolbox).





















2. Place the cuisoi just befoie the last line
<asp:Content> in the coue, then click the
Toolbox on the left siue of youi winuow.
1. Click on "%,-# to see both the coue
anu the page uesign at the same time.
This is the view moue we will be using
the most.
Bouble-click on "S,D+#+"083H$.
0nce you have auueu the "S,D+#+"083H$ you shoulu be able to see the coue
geneiateu in the Souice view.






















To be able to ietiieve uata, the SqlBataSouice contiol neeus to know two bits of
infoimation: (1) Bow to connect to the uatabase, anu (2) What uata to ietiieve fiom
the uatabase. The contiol wizaiu will next piompt you to pioviue this infoimation.











This line has been auueu to youi souice coue.
In the Besign winuow click on the small
aiiow neai the SqlBataSouice, then
click on E0)1-.83$ D+#+ "083H$.
Select =%%,-H+#-0)"$35-H$* fiom
the uiop uown menu, then click
?$I#.














































1. Select "0). fiom
the uiop uown menu.
2. Nake suie * (which means
eveiything) is checkeu, then
click ?$I#.
1. You may test youi queiy. Nake suie that the
above table is uisplayeu upon clicking 7$*# V8$3W.
2. Click M-)-*/.
You shoulu be able to see the table ietiieveu anu the Select Statement fiom the
uatabase when you hit Test Queiy.

























"#$% X' D-*%,+W-). D+#+ 2-#/ ;3-<A-$2

Aftei the uata souice contiol has been auueu to the page anu configuieu, uisplaying
its uata thiough a uata Web contiol is a cinch: Simply uiag the uiiuview contiol
onto the ASP.NET page anu, fiom its smait tag, specify what uata souice contiol to
use. That's it! Take note of the name "S,D+#+"083H$& of youi uata souice contiol
(see the souice coue in Befault.aspx).

The uiiuview contiol will uisplay uata in a giiu, with one iow foi each iecoiu in the
uata souice contiol.

Position the cuisoi in the Souice view similai to the scieen shot below.

Coue coiiesponuing to youi SELECT













































1. In youi souice view,
position the cuisoi just
above <asp:Content>.
Coue will be inseiteu in
this position.
2. Click on 700,C0I
Bouble-click on ;3-<A-$2
unuei the D+#+ categoiy





















Next we neeu to associate a uata souice with the uiiuview. Click the aiiow at the
iight top coinei of the uiiu view contiol to get a uiiuview Tasks winuow anu select
"S,D+#+"083H$& fiom the uiop uown.






















These aie the changes to
youi website in souice
view (top) anu uesign view
(bottom). The table
contains uummy values at
the moment.
Click on the aiiow at the
iight top coinei of the
uiiuview contiol to get a
uiiuview Tasks winuow
anu select SqlBataSouice1



















0nce you have selecteu the Bata Souice, hit on Refiesh Schema to view the column
names of the Song table in giiu view.























Save the file anu you will be able to view the Columns fiom the uatabase. Now hit
the Run button, so that you can view the page in a biowsei.
1. Select
"S,D+#+"083H$& fiom
the uiop uown'
2. Click on
L$13$*/"H/$6+.
1. Save the file
2. Bit the Run button






















Nake suie you stop uebugging eveiy time aftei you iun the piogiam, because only
by uoing so you can make changes to youi piogiam.























You can now
view the actual
values fiom the
uatabase.
!"#$%&'()*(+, ./01&'()*(+,21 '34"501#+'6+'1 7358&+4+'"5+98:3;4#01<":#+1
/"5"=83'>+./01=?:/"5"=83'>+21@
!98:3;4#@
!"#$%A834)<(+:) /"5"<(+:)01=84B./1 C+")+'D+E501=84B./1 F+")G4:H01D'3+1
=8'5IE$'+##(8401=84B./1 J@
!"#$%A834)<(+:) /"5"<(+:)01D(5:+1 C+")+'D+E501D(5:+1 =8'5IE$'+##(8401D(5:+1 J@
!"#$%A834)<(+:) /"5"<(+:)017:K3;1 C+")+'D+E5017:K3;1 =8'5IE$'+##(84017:K3;1 J@
!"#$%A834)<(+:) /"5"<(+:)017'5(#51 C+")+'D+E5017'5(#51 =8'5IE$'+##(84017'5(#51J@
!"#$%A834)<(+:) /"5"<(+:)01&+4'+1 C+")+'D+E501&+4'+1 =8'5IE$'+##(8401&+4'+1 J@
!"#$%A834)<(+:) /"5"<(+:)01F+:+"#+/"5+1 C+")+'D+E501F+:+"#+/"5+1
=8'5IE$'+##(8401F+:+"#+/"5+1 J@
!"#$%A834)<(+:) /"5"<(+:)01L(#5M'(>+1 C+")+'D+E501L(#5M'(>+1
=8'5IE$'+##(8401L(#5M'(>+1 J@
!"#$%A834)<(+:) /"5"<(+:)019:($N";+1 C+")+'D+E5019:($N";+1
=8'5IE$'+##(84019:($N";+1 J@
!J98:3;4#@
!J"#$%&'()*(+,@

EQ?;L=7GY=7(Q?"T You now have an ASP.NET page that uisplays the contents of
the queiy executeu by SqlBataSouice1. Take a moment to ieview the piocess foi
uisplaying uata in an ASP.NET page:
1. The fiist step is to auu the uata souice contiol that ietiieves the appiopiiate
subset of uata.

2. Next you auu a uata Web contiol (in oui case uiiuview) anu, thiough its smait
tag, specify to use the uata souice auueu in Step 1.

Stuuy the ASP.NET coue in Befault.aspx. You'll finu it quite intuitive:

!"#$%=?:/"5"=83'>+ ./01=?:/"5"=83'>+21 '34"501#+'6+'1
9844+>5(84=5'(4B01!OP 9844+>5(84=5'(4B#%7$$:(>"5(84=+'6(>+# O@1
=+:+>598;;"4)01=ILI9D Q <FGR S=84BT1@
!J"#$%=?:/"5"=83'>+@

















Soon you might be able to type in the BTNL anu Web contiol syntax by hanu, iathei
than using the uiag-anu-uiop capabilities of Web Bevelopei.