vs 2012 demo script--web general
TRANSCRIPT
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 1/97
Visual Studio 2012 – Web & Cloud Demos
ContentsPlease Read........................................................................................................................................................................................ 1
Web Demo 0 - Before Starting............................................................................................................................................................ 2
Web Demo 1 – New Proe!t "em#lates................................................................................................................................................$
Web Demo 2- %obile & Bundling...................................................................................................................................................... 20
Web Demo '- Visual Studio 2012 (eatures....................................................................................................................................... '$
Web Demo )- Web *P+ & ,"% $...................................................................................................................................................... 2
Web Demo $ – */ure Web Site De#loment.....................................................................................................................................
Please Read ou3ll 4nd sni##ets at Web and Cloud Development\Code Snippets. 5o# t6em to %USERPROFILE%\Documents\isual
Studio !"#!\Code Snippets\.
(or e7am#le8 if our login name is $ob and ou 6a9e Windows installed on our C dri9e and t6e !ode sni##ets are for Visual 5:8
ou3d !o# t6em to C\Uses\$ob\Documents\isual Studio !"#!\Code Snippets\isual C'\() Code Snippets on our
ma!6ine.
"6ese demos will s6ow some of t6e new features in *SP.N;" %V58 t6e Web*P+8 Visual Studio 20128 and Windows */ure. *+ee is
moe demo content t+an ,+at ,ill -t in a ." minute session8 so sele!t t6e demos ou wis6 to #erform for a gi9en session.Suggested demos for a 0 minute session are 18 28 )8 and $.
Be sure to run t6roug6 Web Demo 0 <Before Starting=. ou onl need to ta>e t6ese ste#s on!e #er ma!6ine.
/ote for Web Demo $ <*/ure De#loment=8 ou3ll need an a!ti9e a!!ount on 6tt#?@@windowsa/ure.!om
1
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 2/97
Web Demo " 0 $e1oe Statin2Demo S!reen Ste#s S!ri#t
1. A#en t6e
Fabi3amFibe4CallCente
4sln solution from t6e
44\Fabi3amFibe4CallCent
e folder.
2. +f ou re!ei9e a warning
<similar to t6e #i!ture to
t6e left= about t6e #roe!t
alread being !on4gured
for anot6er #ort8 !li!> 5esto !6ange t6e !on4gured
#ort.
'. +n t6e Solution ;7#lorer
window8 rig6t-!li!> in t6e
Fabi3amFibe4Web
po6ect and sele!t
Popeties.
2
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 3/97
). An t6e Web tab8 set t6e
Stat 7ction to Speci-c
Pa2e4 ea9e #age blan>
<t6is will ensure running
from Visual Studio will
alwas start t6e a##li!ation
from t6e root R=.
$. A#en t6e
Fabi3am4P+ones4Web4sl
n solution from t6e44\Fabi3am4P+ones4Web
folder.. +f ou re!ei9e a warning
<similar to t6e #i!ture to t6e
left= about t6e #roe!t
alread being !on4gured for
anot6er #ort8 !li!> 5es to
!6ange t6e !on4gured #ort.
'
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 4/97
. +n t6e Solution ;7#lorer
window8 rig6t-!li!> t6e
Fabi3am4P+ones4Web
#roe!t and sele!t
Popeties4
C. An t6e Web tab8 set t6e
Stat 7ction to Speci-c
Pa2e4 ea9e #age blan>
<t6is will ensure running
from Visual Studio will
alwas start t6e a##li!ation
from t6e root R=.
)
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 5/97
Web Demo # 8 /e, Po6ect *emplatesDemo S!reen Ste#s S!ri#t
1. Start isual Studio !"#!42. Sele!t File 09 /e, 09
Po6ect
'. nder "em#lates - Visual5: - Web8 sele!t *SP.N;"
%V5 ) #roe!t.). Ei9e t6e Proe!t t6e name
FabFibe4
et3s ta>e a loo> at t6e
new #roe!ts a9ailable
for *SP.N;" %V5 ).
$
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 6/97
$. +n t6e New Proe!t dialog8
sele!t Intenet
7pplication.
"6ere are a number of
#roe!t tem#lates out of
t6e bo7. "6e +ntranet
tem#late will set u# an
a##li!ation using
Windows
aut6enti!ation8 w6ile
t6e %obile tem#late is
an a## o#timi/ed for
#6ones and tablets.
We3ll start t6is
a##li!ation as an
+nternet a##li!ation8
w6i!6 uses forms-based
aut6enti!ation b
default. We3ll also beusing t6e Ra/or 9iew
engine8 w6i!6 was a
new 9iew engine
introdu!ed wit6 %V5 '.
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 7/97
. *s soon as t6e #roe!t is
read8 #ress Ctl:F; to run
t6e a##li!ation.
et3s see w6at t6e new
a##li!ation loo>s li>e
before we start ma>ing
!6anges.
+f ou39e been using
Visual Studio 2010 in
t6e #ast ou3ll reali/e
t6is is an u#dated loo>
for a new a##li!ation.
W6at is drasti!all
diFerent is w6at we3ll
see be6ind t6e s!enes.
. ea9e t6e browser o#en and
return to isual Studio.C. A#en t6e Solution ;7#lorer
window <Ctl:W< S=.G. A#en t6e =La)out4cs+tml
4le from t6e ie,>S+aed
folder.
et3s loo> at t6e
Haout 9iew t6at gi9es
t6e a##li!ation it3sstru!ture.
Rig6t awa we !an see
t6is Haout 9iew is
using ,"% $ – we !an
tell t6at be!ause of t6e
DA5"P;8 w6i!6 is
sim#li4ed for ,"% $ to
ust I6tmlJ.
"6e Haout 9iew also
in!ludes all t6e ,"% $
best #ra!ti!es. ou !an
see t6e lang attribute
set in t6e 6tml element8
w6i!6 tells sear!6
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 8/97
agents and s!reen
readers about t6e
language used in t6e
#age8 and ou !an also
see a meta !6arset
element telling t6e user
agent 6ow t6e
do!ument is en!oded.
"6is meta tag is
a!tuall an im#ortant
ste# in a9oiding !ertain
!ross-site s!ri#ting
atta!>s t6at ta>e
ad9antage of diFerent
!6ara!ter en!odings.
(inall8 t6ere is a meta9iew#ort tag to ma>e
t6e site more mobile
friendl. We3ll return to
t6at to#i! later.10.Close t6e =La)out4cs+tml
4le.
et3s see w6at it would
loo> li>e if + wanted to
!reate a small
a##li!ation to tra!>
(abri>am (iber ser9i!e
ti!>ets t6at (abri>am
uses to tra!> !ustomer
#roblems.
C
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 9/97
11.Rig6t-!li!> on t6e (odels
folder and sele!t 7dd -
/e, Item.12.Sear!6 for class in t6e
tem#late sear!6 bo71'.Sele!t t6e Class tem#late1).Ei9e t6e !lass t6e name of
Sevice*ic3et.1$.5li!> 7dd.
We >now w6at
information we want to
store for a ser9i!e
ti!>et8 so let3s go a6ead
and !reate a !lass in
t6e %odel folder to
re#resent a ser9i!e
ti!>et.
We won3t worr about
!ustomers and status
ust et – let3s ust see
6ow far we !an go wit6
a sim#le model
de4nition for a ser9i!e
ti!>et.
1.Delete all e?istin2 code in t6e new Ser9i!e"i!>et.!s
4le.1.Press Ctl:@< A to o#en t6e
sni##et menu.1C.Eo to () Code Snippets
and sele!t Sevice*ic3et
model.
+ 6a9e a sni##et t6at!ontains m
Ser9i!e"i!>et !lass
de4nition.
G
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 10/97
1G.,ig6lig6t t6e #ro#erties in
t6e new !lass.
W6at we 6a9e now is a
sim#le ser9i!e ti!>et to
store an +D8 title8 and
des!ri#tion.
"6e model is using
some data annotations
to #ut some !onstraints
on t6ese #ro#erties. (or
e7am#le8 we !an see
t6e title is a reKuired
4eld8 and is 6as a
ma7imum lengt6 of C0
!6ara!ters.
Ne7t8 we3ll need some
data a!!ess !ode tostore t6ese ti!>ets in a
database.20.Rig6t-!li!> on t6e (odels
folder and sele!t 7dd -
/e, Item.21.Sear!6 for class in t6e
tem#late sear!6 bo722.Sele!t t6e Class tem#late2'.Ei9e t6e !lass t6e name of
Fabi3amD$.2).5li!> 7dd.
(ortunatel8 *SP.N;"
%V5 ) s6i#s wit6 t6e
new I!ode-4rstJ
features of t6e entit
framewor> alread
referen!ed b t6e
#roe!t and a9ailable.
10
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 11/97
2$.Delete all e?istin2 code
in t6e new (abri>amDB.!s
4le.2.Press Ctl:@< A to o#en t6e
sni##et menu.2.Eo to () Code Snippets
and sele!t Fabi3amD$4
*ll + need is a !lass
deri9ed from t6e ;ntit
(ramewor>3s new
Db5onte7t !lass8 w6i!6
+ 6a9e a sni##et for.
!B4 ,ig6lig6t t6e new !ode ,ere is e9ert6ing weneed to !reate a SL
Ser9er database wit6 a
s!6ema to store ser9i!e
ti!>ets. Db5onte7t and
t6ese DbSet t#es are
all #art of t6e new
;ntit (ramewor>
9ersion we are using8
and t6e ;( will use t6e
#ro#ert names in t6is
!lass and our model
obe!t w6en !reating a
s!6ema.
Before we see t6e
database8 we3ll need to
6a9e t6e a##li!ation tr
to use t6e database8
and we3ll do t6at usingsome *SP.N;" %V5
s!aFolding.2G.$uild t6e #roe!t
<S6iftM5trlMB='0.A#en t6e Contolles
folder.
W6at + will do is 4rst
remo9e t6e e7isting
,ome5ontroller !lass
t6at is res#onsible for
11
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 12/97
'1.Delete t6e
,ome5ontroller.!s 4le.
t6e 6ome #age of t6e
a##li!ation.!4 A#en t6e ie,s folder.4 Delete t6e ome folder.
We3ll also remo9e t6e
e7isting 9iew for t6e
6ome #age.
').Rig6t-!li!> t6e Contolles
folder.'$.5li!> 7dd'.5li!> Contolle
*nd we will re#la!e all
t6ese 4les wit6 a new
!ontroller and a new set
of 9iews for editing and
!reating ser9i!e ti!>ets.
"6e s!aFolding t6at!omes wit6 *SP.N;"
%V5 ) !an build all of
t6is for me.
12
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 13/97
'.+n t6e *dd 5ontroller dialog?'C.56ange t6e !ontroller name
to omeContolle.'G.se t6e I(C Contolle
,it+ ead>,ite actions
and vie,< usin2 Entit)
Fame,o3 J tem#late.
)0.56oose Sevice*ic3et fort6e %odel !lass.
)1.56oose Fabi3amD$ for
t6e Data !onte7t !lass.)2.5li!> 7dd.
*ll + need to do is gi9e
Visual Studio some
information about t6e
!lasses + want to use.
+3ll tell it t6e !ontroller
name8 and sele!t a
tem#late t6at !an
generate all t6e !ode +
need to edit8 list8 and
!reate ser9i!e ti!>ets. +t
will use t6e ser9i!e
ti!>et !lass de4nition to
build t6e 9iews8 and t6e
data !onte7t !lass we
ust !reated to sa9e and
retrie9e data.
)'.Point out t6e newl !reated
4les
"6is %V5 s!aFolding
!reated a !ontroller and
an entire set of 9iews
for me.
1'
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 14/97
)).Press Ctl:F; to build and
run t6e a##li!ation.
*nd we !an alread run
t6e a##li!ation to see
t6e result.
;9ert6ing seems to be
wor>ing8 but we don3t
6a9e an ti!>ets in t6e
a##li!ation8 et.
)$.5li!> ICeate /e,J. et3s !reate a new
ti!>et.
1)
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 15/97
).5li!> t6e Ceate button "6is in#ut form was
generated using
information on m
model !lass <Data
Annotations= and t6e
s!aFolding + ran earlier
generated t6is +.
+ !an alwas !ustomi/e
it8 and it alread 6as
man of t6e features +
need – li>e !lient-side
and ser9er-side
9alidation based on t6e
data annotations on m
model.
,ere ou !an see it will
not let me !reate a
ti!>et wit6out a title or
des!ri#tion.).*dd a title)C.*dd a desciption)G.5li!> Ceate
et3s add a title and
des!ri#tion t6is time
before !li!>ing 5reate.
1$
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 16/97
$0.S6ow t6e ti!>et in t6e list *nd we !an see t6e
ti!>et a##ears in t6e
6ome #age8 w6i!6
s6ows a list of all
ti!>ets.
But ou >now8
somet6ing else t6at
mig6t be useful to 6a9e
wit6 a ser9i!e ti!>et is a
date for w6en t6e ti!>et
o#ened.
"6is is eas enoug6 to
add to our 5: !lass8 but
it is usuall a #ain to
ma>e t6e databases!6ema !6anges.
(ortunatel8 we are
using t6e ;ntit
(ramewor> 9ersion $8
w6i!6 !an ma>e
s!6ema !6anges based
on our !6anging model.
1
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 17/97
$1.+n t6e Solution ;7#lorer8
o#en Ser9i!e"i!>et.!s
from t6e %odels folder.
et3s go ba!> to t6e
Ser9i!e"i!>et !lass we
!reated earlier.
$2.*fter t6e Des!ri#tion
#ro#ert8 t#e IpopJ to
start t6e #ro#ert sni##et.$'."#e *ab< *ab to e7#and
t6e sni##et.
et3s add a #ro#ert to
6old t6e !reation date
of a ti!>et.
$).Ei9e t6e #ro#ert a t#e
of Date"ime$$.Ei9e t6e #ro#ert t6e
name 5reatedAn
We3ll ma>e t6is a
nullable Date"ime fornow8 and !all t6e
#ro#ert !reated on.
1
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 18/97
$.Eo to t6e Lui!> aun!6
bo7 of Visual Studio.$."#e I#a!>ageJ$C.5li!> t6e Pa!>age
%anager 5onsole
sele!tion.
Now we need to u#date
t6e database to 6old
t6is new #ro#ert
9alue. "o do t6is we
need to enable ;ntit
(ramewor> migrations
from t6e Pa!>age
%anager 5onsole
window. +3ll sear!6 for
t6e window in t6e Lui!>
aun!6 bo7 of Visual
Studio.
$G."#e Ienable-migrationsJ
in t6e Pa!>age %anager
5onsole.
;( migrations will loo>
inside m #roe!t and
4nd t6e !lasses + usedt6at are in9ol9ed wit6
t6e database. +t will
also loo> to see if t6ere
is an e7isting database
and !reate a !ode-
based migration for me
t6at !an re!reate t6e
database.
1C
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 19/97
0.+n t6e Solution ;7#lorer
window8 o#en
Con-2uation4cs from
t6e %igrations folder.
(irst let3s loo> at t6e
!on4guration ;( added
to t6e #roe!t.
1.Eo to line 12 and set
*utomati!%igrations O
true.
+3m going to enable
*utomati!%igrations.
"6is setting allows t6e
;ntit (ramewor> to
ma>e s!6ema !6anges
to m database wit6out
!reating e7#li!it
migration 4les.
et3s loo> and see w6at
a migration 4le loo>s
li>e.
1G
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 20/97
2.+n t6e Solution ;7#lorer
window8 o#en t6e 4le t6at
ends wit6
I+nitial5reate.!sJ from t6e
%igrations folder.
"6is initial !reation 4le
is t6e migration 4le t6e
;ntit (ramewor>
!reated b loo>ing at
t6e s!6ema t6at
!urrentl e7ists.
'.S6ow t6e !ode inside t6e# met6od of
+nitial5reate.
ou !an see t6ere is auent t#e of *P+ for
!reating tables8 adding
!olumns to tables8 and
!on4guring #ro#erties
on t6ose !olumns. "6is
!ode !reate t6e
Ser9i!e"i!>ets table
and adds t6e +D8 title8
and des!ri#tion!olumns.
ou !an !ustomi/e
t6ese migrations and
use t6e *P+ to add
additional tables8 !reate
20
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 21/97
inde7es8 or e9en
e7e!ute SL to #erform
data migrations.
W6at we don3t !urrentl
6a9e in t6e table is t6e
5reatedAn date. "o get
t6at !olumn in weeit6er need to !reate a
new migration using
t6e add migration
!ommand8 or let
automati! migrations
6andle t6ings wit6out
adding an e7#li!it
migration 4le. et3s use
t6e automati!migrations a##roa!6.
).Return to t6e Pa!>age
%anager 5onsole.$.;7e!ute t6e !ommand
Iu#date-database –
9erboseJ.Point to t6e results
We need to go ba!> to
t6e !onsole and
e7e!ute t6e u#date
database !ommand. +3m
going to add t6e
9erbose ag so we !an
see e7a!tl w6at
!ommands t6e ;ntit
(ramewor> will send tot6e database.
*s ou !an see8 ;(
dete!ted t6e new
#ro#ert on our model
!lass and de!ided to
21
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 22/97
issue an *";R "*B;
SL !ommand to
sn!6roni/e t6e s!6ema
wit6 w6at is in t6e
model !lass. Now we
!ould go ba!> and
!6ange our 9iews to
dis#la t6e new 9alue8and add some business
logi! to assign t6e new
9alue a##ro#riatel.
We !ould also add new
model !lasses8 and ;(
!an !reate new
migrations to !reate
tables for t6ose models..Summari/e So ou !an see 6ow
eas it is to get started
wit6 ,"%8 *SP.N;"
%V5 )8 and SL Ser9er1
using Visual Studio
2011. ater we3ll return
to a 9ersion of t6e
(abri>am (iber web site
wit6 more features in it
Q.
1 s
22
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 23/97
Web Demo !0 (obile & $undlin2Demo S!reen Ste#s S!ri#t
1. Start isual Studio
!"#!4
2. A#en t6eFabi3am4CallCente4sl
n solution4
et3s see w6at t6e new
mobile and bundling
features loo> li>e in an*SP.N;" %V5 ) #roe!t.
'. Press Ctl:F; to run t6e
a##li!ation.
"6is is t6e (abri>am
(iber web site. ou !an
see it wor>s well in a
des>to# browser.
"6e (abri>am su##ort
#ersonnel !an use t6e
site to tra!> alerts and
ser9i!e ti!>ets.
Af !ourse8 man of t6e
su##ort #ersonnel are
in t6e 4eld and using
#6ones and tablets to
!onne!t8 and t6e
des>to# 9iew isn3t
2'
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 24/97
o#timi/ed for t6ose
users in t6e 4eld.). ea9e +nternet ;7#lorer
running.$. A#en t6e Solution
E?ploe window.. Eo to t6e ie,s\S+aed
folder in t6e(abri>am(iber.Web
#roe!t... Point out 6ow
=La)out4cs+tml and
=La)out4(obile4cs+tml
bot6 e7ist 6ere.
Ane of t6e new features
in %V5 ) is a feature
t6at lets ou o9erride
t6e 9iew to render
based on t6e browser
ma>ing t6e reKuest.
"6is wor>s for !ontent
9iews8 laout 9iews8
and #artial 9iews8 too
<des!ribe t6e #ur#ose
of a aout 9iew if t6e
audien!e is new to
%V5=.
C. Open t6e
=La)out4(obile4cs+tml
9iew.
B default8 %V5 ) will
sele!t a .%obile 9iew if
t6e browser is a mobile
browser <+; mobile or
Safari mobile8 for
e7am#le=.
2)
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 25/97
G. Swit!6 ba!> to +; and
o#en t6e IE Develope
*ools <F#!=
+f we want to see w6at
t6is 9iew loo>s li>e
t6ere are a few
diFerent o#tions8 but
using +; de9elo#er tools
we !an ma>e t6e
des>to# 9ersion of +;
a##ear as if it is t6emobile 9ersion of +; and
6a9e %V5 ) ser9e t6e
mobile 9iew to our
des>to# browser.
10.Eo to *ools - C+an2euse a2ent stin2 -
IE 1o Windo,s P+one
.
+; de9elo#er tools willlet me !6ange t6e user
agent string it sends to
a web ser9er. +t !an
a##ear as (irefo78
Eoogle 56rome8 or + !an
e9en set u# a user
agent string to mat!6 +;
G for Windows P6one.
2$
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 26/97
11.Eo ba!> to t6e IE instan!e
running (abri>am (iber.12.Re1es+ t6e browser.1'.ResiGe t6e browser to
a##ro7imatel '007)00.
We !an now see w6at
t6e a##li!ation will loo>
li>e on a mobile
browser.
sing t6e mobile 9iew
we !an la out t6e
s!reen in a !om#leteldiFerent wa and bring
im#ortant t6ings
<das6board8 ti!>ets= to
t6e to# so t6e a## is
easier to na9igate on a
mobile de9i!e.
Note we didn3t 6a9e to
!6ange an !ontrollers8models8 or business
!ode. We sim#l added
9iews wit6 .mobile in
t6e name to o9erride
t6e a!tion3s sele!ted
9iew.
1).Point out t6e Ina9J menu
in t6e a##.
Af !ourse mobile de9i!e
are often !onstrained
on t6e amount of
s!reen real estate t6e
#ro9ide8 so it would be
ni!e if we >ee# ta>e t6e
na9igation lin>s and
!om#ress t6em into a
6ori/ontal widget.
2
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 27/97
1$.Return to t6e Solution
E?ploe window.1.Point out t6e 6Hue)
(obile s!ri#t in t6e
Scipts\(obile dire!tor.
(ortunatel8 we 6a9e
t6e Luer %obile
framewor> in our
s!ri#ts dire!tor.
Luer %obile !onsists
of a single .s 4le8 #lus
some images and astles6eet.
Luer %obile #ro9ides
widgets o#timi/ed for
t6e si/e and tou!6
intera!tion of a
smart#6one.1.Return to t6e
=La)out4(obile4cs+tml 4le.1C.o!ate t6e na9
element near t6e to# of
t6e 9iew.
Ane of t6e widgets
#ro9ided b Luer%obile is a Ina9barJ
widget t6at !olla#ses a
na9igational menu into
a 6ori/ontal stri# of
buttons.1G.*dd data0
oleJnavbaJ to t6e
na9 element20.Sa9e t6e .%obile 9iew.
%an of t6e Luer
%obile widgets are
#rogrammable t6roug6
data-role attributes.
Data Idas6J attributes
are #art of t6e ,"%$
s#e!i4!ations and gi9es
us an e7tensibilit 6oo>
into ,"% mar>u#.
Luer %obile loo>s for
!ertain data das6
2
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 28/97
attributes8 li>e data
das6 role8 and !reates
mobile friendl widgets
using t6e e7isting
mar>u#.21.Return to IE and e1es+. ou !an see t6e eFe!ts
of a na9bar. * ni!e
!om#a!t na9igationarea for our 6eader.
22.Return to Solution
E?ploe and s6ow t6e
!ontent dire!tor.2'.,ig6lig6t t6e 6Hue)
mobile css 4le in t6e
Content\mobile
dire!tor.
Do ou not li>e t6e
!olors Luer %obile
in!ludes a t6eme
framewor>
im#lemented in 5SS so
ou !an o9erride an of
t6e !olors or stling ou
see.
"6ere are also built-in!olor swat!6es ou !an
a##l to an element or
to a #age.
2).Return to
=La)out4(obile4cs+tml2$.Point out w6ere 6Hue)
(obile stle s6eet and
s!ri#t 4les are in!luded
ust to be !lear – t6e
mobile 9ersion of our
9iew in!ludes t6e
stles6eet and s!ri#t
4le for Luer mobile.
2C
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 29/97
wit6 lin> and s!ri#t tags.
"6ese aren3t in!luded
for a browser ust
be!ause t6e are in a
dire!tor wit6 ImobileJ
in t6e name – we
in!lude t6em using t6e
laout 9iew.
"6e stles6eet is
#ro9iding t6e basi!
laout and !olors for
elements li>e our
na9bar.2.Point out t6e data0
olepa2e and data0
ole+eade elements.
We !an also see
additional data-roles to
!reate a Luer %obile#age and 6eader.
"6e 6eader #i!>s u#
default !olors from t6e
Luer %obile !ss 4le
we ust saw.
We !an o9erride t6e
5SS wit6 our own stles
Q2.*dd data0t+emeJbJ to
t6e +eade.2C.Sa9e t6e .%obile 9iew.
Q or we !an #i!> from a
diFerent t6eme
#ro9ided b t6e Luer
%obile stle s6eet.
"6emes are also
sele!ted using data
das6 attributes.
2G
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 30/97
2G.Return to IE and re1es+4 Now ou !an see t6e
im#a!t of t6eme IBJ.
"6e ot6er default
t6emes are I*J8 J5J8
IDJ8 and I;J.
'0.A#en t6e IE develope
tools <F#!=.
Now t6at we39e seen
t6at Luer %obile
wor>s well wit6 t6e
9iew-swit!6ing featuresof *SP.N;" %V5 )8 and
we39e o#timi/ed t6e
laout of t6e
a##li!ation8 let3s also
ta>e a loo> at 6ow we
!an o#timi/e t6e #age
load time and deli9er
t6e s!ri#t and stle
s6eets in an eT!ientmanner.
'0
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 31/97
'1.Eo to t6e Cac+e menu8
sele!t 7l,a)s e1es+
1om Seve.
"o better measure t6e
load times and networ>
traT!8 +3m going to
!lear t6e browser !a!6e
and simulate a user
browsing to t6e site for
t6e 4rst time.
'2.Eo to t6e /et,o3 tab of
t6e de9elo#er tools.''.5li!> t6e IStat
Captuin2J button8 t6e
button !a#tion s6ould
!6ange to ISto#5a#tioningJ.
We are going to !a#ture
networ> traT! between
t6e browser and web
ser9er to see 6ow man
downloads are reKuired
to load t6e #age8 and
also t6e si/e of t6e
resour!es being
downloaded.
'1
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 32/97
').Return to IE and e1es+
t6e browser.'$.5a#tured information
s6ould a##ear in t6e
De9elo#er "ools'.,ig6lig6t t6e 4rst 5SS
download <and si/e= and
t6e 4rst two .s 4ledownloads <and t6e si/e=
5urrentl we are
ser9ing un-mini4ed
s!ri#ts and 5SS 4les.
"6e t6ree 4les reKuire
t6ree downloads and
total o9er U of a
megabte. "6is !ould
reKuire signi4!ant timefor a de9i!e on a mobile
networ>.
'.,it t6e Clea button int6e de9elo#er tools.
et3s !lear out t6eresults8 ma>e some
o#timi/ations8 and
measure t6e new
results.
'2
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 33/97
'C.Return to Visual Studio.'G.+n t6e Solution ;7#lorer
window8 o#en Bundles.!s
from t6e *##HStart
dire!tor.
W6en t6is a##li!ation
starts8 t6ere is !ode
inside t6e
*##li!ationHStart e9ent
to register s!ri#t and
stle bundles.
* bundle is a !olle!tionof one or more stle or
s!ri#t 4les.
We !all t6em bundles
be!ause Visual Studio
!an !on!atenate <or
bundle= multi#le 4les
into a single download8
and t6is !an de!reaset6e load time for a
#age.
)0.+nside of Bundles.!s8 #oint
out t6e RegisterBundles
met6od.
,ere ou !an see t6e
!ode to !reate two
diFerent t#es of
bundles.
"6e 4rst bundle is a
stle bundle for t6e
Luer %obile stle
s6eet. "6e 4rst
#arameter is t6e 9irtual
#at6 we !an use to
rea!6 t6is bundle8 so a
''
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 34/97
reKuest to t6at R will
gi9e us t6e stles6eet
!ontent.
Noti!e 6ow we use t6e
+n!lude met6od to
s#e!if 4les for t6e
bundle. ou !an gi9e+n!lude a s#e!i4! 4le
name8 or ou !an use
wild!ards8 too. Wit6
wild!ards we !an
u#date t6e stles6eet
from Kuer.mobile-1.1
to Kuer.mobile-1.2 or
some 6ig6er 9ersion
wit6out !6anging t6e5: !ode 6ere.
ou mig6t wonder w6
we !reate a bundle if
t6e bundle onl
in!ludes a single 4le
inside. "6at3s be!ause
in addition to bundling8
t6e runtime !an also
minif t6e !ontent8w6i!6 stri#s out
unne!essar !6ara!ters
to ma>e for t6e
smallest #ossible
download.
"6e se!ond bundle is a
s!ri#t bundle for two
')
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 35/97
4le – Luer and Luer
mobile.)1.Return to t6e
=La)out4(obile4cs+tml
9iew.)2.Eo to ine 11
,ere in t6e laout 9iew
we3ll render t6e
registered bundles
using t6e Stles and
S!ri#ts 6el#ers.
)'.Replace t6e stles6eetlin> wit6 a !all to
Stles.Render and #ass
I@5ontent@mobile@!ssJ as
a #arameter.
W6at +3ll do is re#la!et6e lin> to a s#e!i4! 4le
in t6e 5ontent@%obile
dire!tor wit6 t6e
9irtual #at6 registered
for t6e stle bundle.KK4 Replace t6e s!ri#t
tags wit6 a !all to
S!ri#ts.Render8 #assing
I@S!ri#ts@mobile@sJ as a
#arameter.K;4 Save t+e vie,
*nd +3ll re#la!e t6e two
s!ri#t referen!es wit6 a
single !all to
S!ri#ts.Render wit6 t6e
9irtual #at6 registered
for t6e s!ri#ts we need.K.4 Return to +nternet
;7#lorer and refres6 <F;=.K4 Rig6t-!li!> +nternet
;7#lorer and sele!t IView
Sour!eJKB4 Point out t6e s!ri#t
and stle tags.
et3s refres6 t6e 9iew of
our a##li!ation8 and
now loo> at t6e mar>u#
t6e browser re!ei9ed.
W6at ou3ll noti!e is
t6at t6e a##li!ation
rendered essentiallw6at we 6ad before –
indi9idual s!ri#t tags for
ea!6 s!ri#t 4le8 and a
lin> to t6e stle s6eet.
"6is is be!ause t6e
a##li!ation is running in
debug mode8 and in
'$
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 36/97
debug mode ou mig6t
want to debug some of
our s!ri#ts or stle
s6eets8 and debugging
is easier to do w6en t6e
4les are not !ombined
toget6er and mini4ed.
et3s see w6at 6a##ens
if we swit!6 to release
mode8 6owe9er.)G.Return to Visual Studio
and o#en t6e oot le9el
,eb4con-2 4le.
We !an !6ange modes
using a ag in
web.!on4g.
'
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 37/97
$0.Eo to line 1G.$1.56ange t6e debug setting
to IfalseJ.$2.Sa9e t6e web.!on4g 4le.
+ ust need to !6ange
debug to false in t6e
!om#ilation settings for
t6e a##li!ation.
;4 Retun to
Intenet E?ploe4;K4 Re1es+ IE and
return to t6e de9elo#er
tools networ> !a#ture.
Now w6at we see is
t6at t6e 9iew rendered
t6e 9irtual #at6s to t6e
bundled and mini4ed
4les. We 6a9e one
fewer 4le to download
be!ause bot6 s!ri#t4les !ame down in one
reKuest8 but more
im#ortantl we39e !ut
t6e number of btes b
more t6an U - it3s now
ust o9er 200B.
*lso noti!e t6e long
Kuer string 9alue – t6is
9alue will !6ange if anof t6e 4les in t6e
bundle !6ange and is
an eFe!ti9e wa to
a9oid !a!6e #roblems
and ma>e sure t6e
browser fet!6es t6e
latest !ontent.
'
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 38/97
"6ese bundling and
mini4!ation features
wor> wit6 our !ustom
s!ri#ts and 5SS as well
as framewor> s!ri#ts
and 5SS li>e Luer. We
!ould !ontinue adding
s!ri#t 4les to t6ebundle to #ut t6e
Luer 9alidation
s!ri#ts into t6e same
download.
'C
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 39/97
Web Demo 0 isual Studio !"#! FeatuesDemo S!reen Ste#s S!ri#t
1. Before starting into t6is
demo8 !lose an instan!es
of +; t6at ou mig6t 6a9erunning wit6 t6e +; %obile
user agent string.2. A#en t6e
Fabi3am4CallCente4sl
n solution in Visual Studio
20128 if ou don3t alread
6a9e it o#en.
et3s see t6e new
features in Visual Studio
2012.
'G
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 40/97
'. Open =La)out4cs+tml
from t6e ie,s>S+aed
folder.
(irst8 let3s o#en u# t6e
Haout 9iew for t6is
a##li!ation w6i!6
!ontrols t6e basi!
laout and stru!ture for
all t6e 9iews in t6e
a##li!ation.
). Point out t6e ,"%$
do!t#e.
Noti!e we are using an
,"% $ do!t#e in our
mar>u#. "6is allows us
to use all t6e new
,"%$ features and
elements8 li>e na98
6eader8 and footer.
)0
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 41/97
$. Point out t6e *a2et
Sc+ema 1o alidation
in t6e Visual Studio
toolbar.
Visual Studio 2012 is
aware of t6e do!t#e
we are using and 6as
set t6e 9alidation le9el
a##ro#riatel.
. ,ig6lig6t and delete t6e
do!t#e.
et3s see w6at 6a##ens
if + remo9e t6is do!t#e
Q
. "#e +tmlKs M *7$ Q and re#la!e it wit6
one of t6e ,"% )
do!t#es. +3ll do t6is
using a !ode sni##et –
6tml)s8 and 6itting t6e
tab >e.
C. i2+li2+t t6e !6ange in
t6e *a2et Sc+ema
alidation
Noti!e 6ow Visual
Studio immediatel
swit!6es to I9alidating
,"% ) stri!tJ.
)1
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 42/97
G. S!roll down to t6e
+eade element of
t6e 9iew and 6ig6lig6t t6e
!urrent validation
eos.
Noti!e 6ow t6e new
,"% $ elements are
no longer 9alid in t6e
mar>u# we 6a9e.
10."#e Ctl: t+ee times
to undo t6e do!t#e
swit!6
et3s go ba!> to ,"% $
sin!e t6at is w6at we
reall are using.
)2
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 43/97
11.S!roll down to t6e
content se!tion in t6e
Haout 9iew.
ou !an see we are
using man of t6e new
,"% $ elements and
t6e !ode sni##et + used
earlier – it is one of
man ,"% !ode
sni##ets in Visual
Studio.
"6ere are new sni##ets
in Visual Studio 2012
for man of t6e
features we use in
toda3s a##li!ations.
12."#e video : *7$ to
e7#and t6e 9ideo !ode
sni##et.
(or e7am#le8 + !an
easil !reate an ,"% $
9ideo element wit6 t6e
9ideo sni##et.
1'.Point to t6e generated
!ode.
"6e 9ideo sni##et gi9es
me t6e rig6t mar>u# to
!reate a 9ideo element
wit6 !ontrols for t6e
user to #la and #ause
t6e 9ideo.
+t also gi9es me t6e
mar>u# + need to
su##ort t6e t6ree
#o#ular formats for
)'
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 44/97
,"% $ 9ideo8 so it3s
6el#ing me ma>e sure +
!an rea!6 as man
users as #ossible.1)."#e 5"RMX two times to
remo9e t6e 9ideo element
!om#letel.
et3s remo9e t6e 9ideo
and ta>e a loo> at some
ot6er sni##ets.
1$.Wit6 t6e cuso
#ositioned inside t6e
content se!tion8 6it
C*RL:@< A to o#en t6e
sni##et list.
We3ll o#en u# t6e full
list of sni##ets b
6itting 5"RM t6en Y.
))
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 45/97
1.;7#and t6e *(L node
and 6ig6lig6t t6e number
of sni##ets inside.1.S!roll down t6e SVE
sni##ets.
We3ll go to ,"% and
6ere ou !an see t6ere
are sni##ets for
e9ert6ing from audio
to SVE.
1C.Sele!t sv2cicle to
e7#and t6e sni##et
;9en t6oug6 SVE 6as
been around for a
w6ile8 Visual Studio now
in!ludes some SVEsni##ets be!ause SVE
is one of t6ose
te!6nologies seeing
more use in toda3s
a##li!ations.1G.Press C*RL:F; to run
t6e a##li!ation wit6out
t6e debugger.
et3s see w6at t6is
loo>s li>e in t6e
browser.
)$
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 46/97
20.Point to t6e red !ir!le. Now we 6a9e a red
!ir!le !reated wit6 SVE.
We !ould write s!ri#t
against t6e element8
and animate it8 or stle
it. ou !an !reate
!6arts8 intera!ti9e
ma#s8 and all sorts offan! gra#6i!al features
using SVE.
21.Scoll do,n to w6ere t6e
te7t IDe, RobbinsJa##ears.
* red !ir!le ma not be
w6at we need in t6isa##li!ation rig6t now8
but now t6at we are
loo>ing at t6is #age8 +
see t6e name IDrew
RobbinsJ a##ears e9en
t6oug6 we 6a9en3t
logged into t6e site as
et.
"6is seems li>e a bugZ
+ wonder w6ere t6e
!ode is t6at !ontrols
t6is out#ut Q
)
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 47/97
22.5lose t6e browser2'.Return to Visua Studio.2).Remo9e all t6e SVE
mar>u#
Before we start loo>ing8
let3s get rid of t6e red
!ir!le.
2$.A#en t6e $o,se
c+oose dro# down to
s6ow t6e #resen!e of
Page +ns#e!tor.
*nd now let3s use a
new feature in Visual
Studio 2012 to 4nd t6e
sour!e of t6e bug.
W6en + dro# down t6e
Browser 56ooser in t6e
standard toolbar +3ll see
a list of t6e browsers +
6a9e installed8 t6is will
let me Kui!>l run t6ea##li!ation in +;8
56rome8 (irefo78 or
w6ate9er browsers +
6a9e installed.
+ also !an o#en t6e
a##li!ation in t6e #age
ins#e!tor.
)
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 48/97
!.4 Clic3 Pa2e
Inspecto!4 S+o, t6e
a##li!ation running in
Visual Studio
"6e Page +ns#e!tor is
li>e t6e +; De9 "ools.
"6e a##li!ation is li9e
and running from t6e
web ser9er 6ere in
Visual Studio.
!B4 +n t6e *(L tab of
t6e ins#e!tor8 s!roll down
and !li!> t6e +eadeelement.
!4 Note 6ow t6e
6eader element a##ears
sele!ted in t6e running
a##li!ation.
i>e t6e de9 tools8 + !an
!li!> on some ,"% and
see w6ere it isa##earing in t6e
browser.
)C
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 49/97
'0.+n t6e browser window8
s!roll down to w6ere t6e
IDrew RobbinsJ te7t
a##ears.
*nd li>e t6e de9 tools8 +
!an also !li!> I+ns#e!tJ
and t6en !li!> an area
in t6e browser to 6a9e
it s6ow me t6e ,"%
mar>u# t6at
!orres#onds to w6at +3m
seeing on t6e s!reen.
'1.5li!> Inspect8 t6en !li!>
IDrew RobbinsJ.
So + !an see t6at t6is
te7t a##ears inside an
628 but +3m not t6e
de9elo#er w6o wor>ed
on t6is a##li!ation and +
don3t >now w6ere it is
rendered. + !ould tr to
do a sear!6 in t6e 4les8
but +3m not sure if t6e
name is dnami!all
generated or 6ard
!oded or 6ow to loo>.(ortunatel8 t6ere is
somet6ing better.
)G
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 50/97
;;4 Clic3 on t6e Files
tab
W6ere t6e Page
+ns#e!tor reall s6ines
is 6ow it integrates into
our #roe!t. +f + !li!>
on t6e (iles tab8 + see a
list of t6e ser9er-side
4les t6at were used to
generate t6is #age. "6e HPro4le.!s6tml
loo>s li>e a good
!andidate for w6ere +
want to !6ange !ode
$0
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 51/97
;.4 ;7#and t6e rig6t-
6and editor #ane in t6e
Page +ns#e!tor.
But t6e Page +ns#e!tor
ta>es it e9en furt6er. +f
ou loo> at t6e rig6t-
6and #ane – ou !an
see t6at t6e
HPro4le.!s6tml 4le 6as
alread been o#ened
and t6e #art of t6e*SP.N;" %V5 9iew t6at
generated t6is ,"% is
6ig6lig6tedZ
$.Delete t6e te7t IDrew
RobbinsJ from inside of
t6e +! tag inside of t6e
=Po-le4cs+tml 4le.
+f + start to !6ange t6e
!ode b deleting t6e
6ard!oded name – t6e
#age ins#e!tor #i!>s u#on t6at automati!all.
$1
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 52/97
$C."#e
IMUse4Identit)4/ameJ
between t6e 62 tags
So w6at + want 6ere is
to #rint out t6e
aut6enti!ated user3s
name8 w6i!6 + !an do
b !alling
ser.+dentit.Name
$G."#e Mi1 at t6e to# of t6e#age and t#e
NUse4Identit)4Is7ut+en
ticated0.Put a !url bra!e at t6e
end of t6e #age
*nd w6at + reall wantis t6is w6ole #ro4le
se!tion to onl a##ear
w6en a user is logged
on8 so +3m going to
surround t6e e7isting
4le wit6 an if statement
t6at will do ust t6at.
1.Refres6 t6e Page
+ns#e!tor 9iew
*nd after + sa9e and
refres6 t6e #age
ins#e!tor it
immediatel #i!>s u#
on t6e !6ange and
s6ows t6e !6anges.
$2
"6 f 6 6 4l
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 53/97
"6e fa!t t6at t6e #ro4le
se!tion is now 6idden
<be!ause +3m not logged
in !urrentl= reinfor!es
t6e fa!t t6at t6e #age
ins#e!tor is indeed li9e
2.S!roll down in t6e #age
ins#e!tor until ou !ansee t6e login area.
'.5li!> on t6e Use name
,"% – t6is will !ause t6e
!orre!t ser name and
Password to be entered
into t6e form).Clic3 Lo2 On to log into
t6e site
*nd to furt6er bring
6ome t6at #oint8 +3mgoing to go a6ead and
log into t6e site8 and
w6en + doQ
$'
$ S ll d i t6 "6 6 d
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 54/97
$.S!roll down in t6e #age so
ou are s6owing t6e
name under t6e Pro4le
se!tion
"6e #age !6anges and
ou !an see t6at t6e
#ro4le name isn3t 6ard-
!oded anmore.
$)
Cli 3 t6 li > it6 t6 N l t 6
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 55/97
.Clic3 t6e lin> wit6 t6e
Re1 of 7"#K#"
Now let me s6ow ou
6ow t6is fun!tionalit
!an be used for 5SS as
well as ,"%@*SP.N;"
$$
. S!roll down in t6e W6at + want a !6ange
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 56/97
.4 S!roll down in t6e
details #age until t6e ma#
is s6owing on t6e #age
W6at + want a !6ange
on t6is #age to ma>e
t6e ma# dnami!all
load dire!tions from
Bing ma#s based on t6e
te!63s !urrent lo!ation
to t6e !lient.
$
C Clic3 on t6e ima2e in t6e + !an use t6e Page
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 57/97
C.Clic3 on t6e ima2e in t6e
Pa2e Inspecto to bring
t6e editor into t6e
Details4cs+tml #age.
+ !an use t6e Page
+ns#e!tor to bring me to
t6e !ode t6at s6ows t6e
image
.4 Scoll down t6e
Details4cs+tml #age in
t6e editor until ou get to
t6e s!ri#t se!tion. Put
our !ursor on line C <on
t6e last line of t6e
s6ow%a# fun!tion=.
W6at +3m going to do is
use t6e R+ t6at 6as
been !reated to s6ow
t6e ma# to set t6e sr!
element on t6e image
$
" *)pe I9ar img O [ So +3m going to use
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 58/97
"4 *)pe 9ar img O [
<I onto t6at line
So + m going to use
Luer in t6is fun!tion
to get t6e image + want
to !6ange.
Noti!e t6e ri!6
+ntelliSense for Luer –
w6i!6 is su##orted
t6roug6out VisualStudio 20128 e9en if
ou 6a9en3t e7#li!itl
added Luer
referen!es into e9er
#age.
#4 (inis6 t6e line of
!ode b t#ing I'mapQ
and 6itting ente.
+3m going to use t6e
element3s id attribute
as m sele!tor to get
t6e Luer obe!t.
2.*fter t6e line of !ode
sele!ting t6e ma#8 #ress
5trlM M Y to bring u# t6e
sni##et menu.'.Eo to I% 5ode
Sni##etsJ.
).Sele!t I%a# +mage 5SS%ani#ulationJ
Before t6e ma# is
loading we want to use
a s#e!i4! stle named
IimgoadingJ. "6en
we3ll set t6e url of t6e
image8 and we3ll atta!6an e9ent 6andler for
t6e IreadJ e9ent of
t6e ma# image. W6en
t6e image is read we
!an !6ange t6e !lass of
t6e image to a diFerent
stle t6at will #resent
$C
t6e ma#
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 59/97
t6e ma#.$."6e !om#leted !ode
s6ould loo> li>e t6e !ode
on t6e rig6t in t6e image.
.5li!> t6e Debu2 menuand sele!t Stat ,it+out
Debu22in2
Now t6at +39e got m!ode added +3m going
to go a6ead and start
wit6out debugging to
get t6e real lo!ation
ser9i!es in +nternet
;7#lorer wor>ing.
$G
An!e t6e #age a##ears in +3m going to log in as
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 60/97
.An!e t6e #age a##ears in
t6e browser – !li!> on t6e
Use name te7t element
in t6e #age to 4ll out t6e
ser name and #assword
4elds.C.S!roll down and !li!> Lo2
In.
+ m going to log in as
(abri>am (iber3s en
San!6e/ again.
0
4 An!e t6e #age +3m going to t6en !li!>
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 61/97
4 An!e t6e #age
loads8 !li!> on t6e Re1
wit6 t6e number of
7"#K#";.
+ m going to t6en !li!>
into one of t6e detail
re!ords.
C0.Clic3 7llo, once in t6e
small #o#u# t6at a##ears
at t6e bottom of t6e #age.
An!e +3m in t6e detail
#age +; #o#s u# a small
dialog t6at as>s me if +
want t6is site to be able
to 4nd m lo!ation
be!ause t6e a9aS!ri#t
in t6is #age is using t6e
,"%$ Eeo-lo!ation
fun!tionalit8 so +3ll !li!>
I*llow on!eJ.
1
B#4 S!roll down in t6e Now + !an see t6e ma#
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 62/97
B#4 S!roll down in t6e
#age to see t6e ma#.
Now + !an see t6e ma#
a##ear – but it a##ears
in a wa t6at3s >ind of
arring – +3d li>e it to
transition in more
smoot6l.
2
B!4 Swit!6 ba!> to So +3m going to use t6e
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 63/97
B!4 Swit!6 ba!> to
Visual Studio 2012
<7L*:*7$.B4 +n t6e Solution
E?ploe window8 sear!6
for cssBK4 Clic3 on t6e
minimal=eset=!"#"4cs
s 4le in t6e css folder in
t6e 5ontent folder of
t6e .Web #roe!t.
So + m going to use t6e
Solution ;7#lorer to 4nd
a 5SS 4le + want to
modif and add t6ese
two new !lasses inside.
'
C$."#e in a new !lass (irst +3ll #ut in t6e
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 64/97
#
sele!tor in t6e !ss 4le <it
doesn3t matter w6ere= for
imgoading.C.Set t6e o#a!it #ro#ert
9alue to .2.
#
imgoading sele!tor
and set its o#a!it
#ro#ert to .2.
)
C."#e in a new sele!tor "6en +3ll add t6e
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 65/97
#
for .imgDoneoading.CC.+nside of t6e sele!tor t#e
tansCG.Pi!> tansition from t6e
list and 6it tab twi!e.
sele!tor for t6e
imgDoneoading
#ro#ert and t6en use
one of t6e new !ss'
sni##ets to #ut in a
transition #ro#ert.
Noti!e t6at it #uts int6e 9endor s#e!i4!
e7tensions for transition
<sin!e not all t6e
browsers su##ort t6e
5SS' 9ersion et=.
G0."#e o#a!it <tab= 2s <tab=
ease-in-out <;S5=.G1.Sa9e t6e 4le <C*RL:S.
"6is is a reall great
feature t6at 6el#s me
to a9oid 6a9ing to
ret#e t6e same 9alue
o9er and o9er.
$
G2.*"M"*B ba!> to +nternet +f + go ba!> to t6e #age
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 66/97
;7#lorer and 6it refres6 to
s6ow t6e transition
6a##ening.
g # g
and refres6 – + !an see
t6e image transition
into 9iew more
smoot6l.
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 67/97
Web Demo K0 Web 7PI & *(L ;Demo S!reen Ste#s S!ri#t
1. A#en t6e
Fabi3am4P+ones4Web4
sln solution in Visual
Studio 2012.
Now we3ll loo> at an
a##li!ation built wit6
,"% $8 *SP.N;" %V5
and t6e Web*P+. "6is
a##li!ation is a
storefront for selling
Windows P6ones and
uses t6e Web*P+ from
Luer to ma>e
asn!6ronous u#dates
to a #age.
2. %a>e sure t6e Browser
56ooser is set to +nternet
;7#lorer.
'. Press Ctl:F; to run t6e et3s laun!6 t6e
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 68/97
a##li!ation wit6out
debugging.
a##li!ation and ta>e a
loo>.
). Clic3 on t6e and
smbols to rotate images
in t6e #6one galler.
An t6e o#ening #age of
t6e a##li!ation we 6a9e
a !arousel of #6one
images.
+ !an !li!> 6ere on t6e
#age to !!le t6roug6 a
number of #6one
images.
C
;4 Clic3 on t6e i# image to + !an also i# around a
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 69/97
!6ange between #6one
#i!tures and #6one
s#e!i4!ations.
#i!ture to see t6e a
detailed des!ri#tion of
ea!6 #6one in t6e
galler.
"6e i# eFe!t is
a!6ie9ed using a 5SS 'transformation8 we !an
ta>e a #ee> at t6e
!ode.
.4 Retun to isual Studio4 Open
2eneal=st)les4css from
t6e 5ontent dire!tor.
"6e stle for t6e i#
eFe!t is in a 5SS 4le
6ere in t6e 5ontent
dire!tor
G
B4 o to t6e 41ace stle on ou !an see 6ere in t6e
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 70/97
line 11' fa!e stle t6at we are
de4ning a transition
using t6e diFerent
9endor #re47es.
"6e transition is saing
to animate all #ro#ert!6anges for a duration
of U se!ond. Now8
w6en a #ro#ert 9alue
!6anges8 li>e if we were
to set t6e widt6 of t6e
element using
a9aS!ri#t8 t6e !6ange
doesn3t 6a##en
immediatel but t6e
browser will ma>e t6e!6ange o9er time using
linear inter#olation.4 Scoll down to t6e .bac3
stle on line 1'0.
*nd 6ere we !an see a
ba!> stle8 t6is stle is
a##lied b a9aS!ri#t
w6en + !li!> on i!on to
i# an image8 ou !an
see t6e stle a##lies a
transform around t6e a7is of 1C0 degrees.
5ombining t6is
transform wit6 t6e
transition stle we ust
loo>ed at will #rodu!e
t6e i##ing eFe!t.
0
#"4 Return to +; and We also 6a9e some
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 71/97
t6e P6one a##li!ation.##4 Clic3 on t6e
videos o#tion.#!4 S6ow t6e running
9ideo.
9ideo in t6e a##li!ation
using an ,"% $ 9ideo
element. "6at means
be6ind t6e s!enes t6ere
are t6ree diFerent
9ideo formats a9ailable8
%P)8 Web%8 and Agg8and t6is allows t6e site
to wor> on 9arious
browsers on diFerent
#latforms.
1'.5li!> on t6e bu) o#tion. We also 6a9e a #la!e to
bu #6ones8 and also
!om#are #6ones.
1
1).5li!> on I$u) it no,J
li >
+ !an !li!> on t6e bu
b d 6
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 72/97
lin>s.1$.S6ow t6e u#dated
s6o##ing !art.
buttons8 and t6e
a##li!ation will
immediatel u#date m
s6o##ing !art.
W6at3s 6a##ening on
t6is #age is t6at w6en +!li!> on t6e bu button8
t6ere is some a9aS!ri#t
!ode t6at will !all ba!>
to t6e ser9er to let t6e
a##li!ation >now +3m
adding anot6er #6one
to t6e s6o##ing !art8
and t6e ser9er
res#onds wit6 t6e
!urrent !ontents of t6es6o##ing !art8 w6i!6
t6e a##li!ation uses to
u#date t6e s!reen. "6is
is all done using Luer8
some !lient-side
tem#lates8 and a new
feature for *SP.N;" –
t6e Web*P+.
2
1.,ig6lig6t t6e #6one dro#
t t
"o understand t6e
W b*P+ l t l > t
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 73/97
targets.1.Drag a #6one into one of
t6e dro# targets.
Web*P+8 let us loo> at
im#lementing a feature
t6at is not !om#lete.
"6ere is an area on t6e
#age w6ere a !ustomer
!an drag two #6ones to!om#are t6eir
s#e!i4!ations.
5urrentl + !an drag a
#6one into t6is area8
but not6ing 6a##ens
w6en + dro# t6e #6one8
be!ause t6e ser9er-side
logi! isn3t im#lemented
et.1C.Return to Visual Studio1G.A#en t6e
CatContolle.!s 4le
from t6e 5ontrollers
folder.
Now8 t6e s6o##ing !art
we saw wor>ing
!orre!tl is
im#lemented in t6e
5art5ontroller 4le. + ust
want to #oint out a few
features 6ere.
'
20.Point out t6e !ontroller
b l
(irst8 noti!e t6e !art
t ll d i f
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 74/97
base !lass.21.Point out t6e !ontroller
a!tions.
!ontroller deri9es from
*#i5ontroller – t6is is
t6e base !ontroller for
t6e Web*#i.
Noti!e also t6e a!tions
mat!6 t6e same namesas ,""P met6ods –
E;"8 PAS"8 and
D;;";. "6e Web*#i
routing rules are a little
diFerent from regular
*SP.N;" %V5 !ontroller
routing rules8 be!ause
t6e Web*#i uses t6e
,""P met6od in an
in!oming reKuest w6ensele!ting t6e !ontroller
a!tion to in9o>e. *n
,""P E;" reKuest will
end u# in a Eet a!tion8
w6ile a D;;"; reKuest
ma#s to t6e Delete
a!tion.
)
22.A#en t6e
P6one5ontroller !s 4le
"o !om#lete t6e drag
and dro# fun!tionalit
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 75/97
P6one5ontroller.!s 4le
from t6e 5ontrollers
folder.
and dro# fun!tionalit8
we 6a9e to loo> at t6e
P6one !ontroller.
2'.Eo to line 1 and
6ig6lig6t t6e
Eet*llP6ones a!tion.
We alread 6a9e an
a!tion t6at will res#ond
to an ,""P E;" reKuest
– t6is one will return all
t6e #6ones in t6e
database8 but none of
t6e #6one details. Note
t6e routing onl loo>s
at t6e start of t6e
met6od name – t6e
met6od starts wit6 t6e
word Eet8 t6erefore aE;" reKuest will arri9e
6ere.
W6en a user dro#s a
#6one in t6e !om#are
area8 t6e s!ri#t 6andler
will send an ,""P E;"
$
reKuest along wit6 t6e
+D of t6e #6one it needs
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 76/97
+D of t6e #6one it needs
details for. "6is is t6e
message we need to
6andle.2).nderneat6 Eet*llP6ones
a!tion8 #ress
5trlMY85trlM to insert a
!ode sni##et.2$.Sele!t t6e IEet P6one
(eaturesJ !ode sni##et.
+ 6a9e a !ode sni##et
wit6 t6e !ode we need.
2.,ig6lig6t t6e new !ode.2.$uild t6e solution <Build
- Build Solution=.
"6is a!tion also starts
wit6 t6e word Eet8 but
t6e Web*#i routing will
be able to tell t6ediFeren!e between an
,""P E;" reKuest for
all #6ones8 and an ,""P
E;" reKuest wit6 an +D
9alue in t6e reKuest. +t
will send t6e reKuest
wit6 an +D 9alue to t6is
met6od.
Noti!e also t6e returnt#es of t6ese met6ods.
"6ese are not
*!tionResult obe!ts li>e
t6e are in regular
*SP.N;" %V5
!ontrollers8 but sim#le
5: t#es. W6at will t6is
loo> li>e on t6e !lient
Well fortunatel t6is is
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 77/97
Well8 fortunatel t6is is
eas to test wit6 a web
browser8 so let3s ta>e a
loo>.2C.Press Ctl:F; to run t6e
a##li!ation.2G.An!e t6e a##li!ation
starts8 add >api>p+one to
t6e end of t6e R.'0.W6en +; #rom#ts ou to
o#en a 4le8 !li!> Open.
et3s run t6e
a##li!ation wit6 our
!6anges a##lied.
+3m going to ma>e an
,""P E;" reKuest wit6
m browser t6at s6ould
arri9e at t6e #6one
!ontroller.
+t loo>s li>e we 6a9e a
res#onse in SAN
format – a9aS!ri#tAbe!t Notation – a
seriali/ation format t6at
is #erfe!t for a9aS!ri#t.
et3s tr to o#en it.
'1.+f Windows dis#las t6e
sele!tion #rom#t s6own
We3ll o#en t6is SAN
res#onse in Note#ad
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 78/97
sele!tion #rom#t s6own
6ere8 sele!t I*) an app
on t+is PCJ.'2.Sele!t IUse t+is app 1o
all 46son -lesJ.''.Sele!t /otepad
res#onse in Note#ad.
').Scoll t6roug6 t6e
res#onse to s6ow t6ediFerent #6one models
inside.'$.Point out t6e 4rst #6one
6as an Id value o1 #.
*ll of t6e #6ones t6e
store >nows about are6ere in SAN format
wit6 some 6ig6-le9el
details8 li>e t6e #ri!e.
"6e 4rst umina 6ere
6as an +D of 18 let3s see
if we !an get more
details about t6is #6one
wit6 t6e Web*P+ !ode
we ust wrote.
C
.4 Return to +nternet
;7#lorer
*ll we need to do is
#la!e t6e +D 9alue in
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 79/97
;7#lorer4 *##end
>api>p+one># to t6e
6ome R.B4 W6en #rom#ted to
o#en t6e SAN 4le8 !li!>
Open.
#la!e t6e +D 9alue in
t6e reKuest8 an +D 9alue
of 18 and if ou are
familiar wit6 *SP.N;"
%V5 t6en ou3ll >now it
is eas to setu# t6e
routing rules to treat
t6is 9alue 1 as an +D
#arameter.
W6en we send t6e
reKuest8 we get anot6er
SAN res#onse. + also
want to #oint out t6at
t6e Web*P+ !ould also
send Y% if we
reKuested Y% wit6 an*!!e#t 6eader. ou !an
also #lug in our own
formatters to return t6e
data in an format ou
li>e.'G.S6ow t6e SAN result in
Note#ad
Now we !an see all of
t6e #6one details in t6is
res#onse.
et3s see it at wor> in
t6e a##li!ation now.
G
)0.Return to +nternet
;7#lorer
We3ll go to t6e s6o##ing
area
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 80/97
;7#lorer)1.5li!> t6e bu) i!on.
area.
)2.5li!> and drag an #6one
into one of t6e dro#
targets.
We3ll dro# a #6one into
t6e !om#arison area.
C0
)'.,ig6lig6t t6e details t6at
a##ear.
*nd now we !an see
#6one details a##ear in
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 81/97
a##ear.)).Pull a 2nd #6one into t6e
!om#are area.
#6one details a##ear in
t6e area underneat6
t6e #6one.
"6is s!enario is a
#erfe!t 4t for t6e
Web*P+ – we need a
Kui!> and lig6tweig6t
res#onse to some user
intera!tion wit6 t6e
#age. So we 6a9e
a9aS!ri#t !all t6e
Web*P+8 and build some
+ dnami!all using
t6e SAN res#onse.
et3s loo> at t6e s!ri#tto !all t6e Web*P+.
)$.Return to Visual Studio).A#en P+oneStoe46s
from t6e S!ri#ts dire!tor.
"6e s!ri#t 6andling t6is
be6a9ior is in t6e
P6oneStore.s 4le.
C1
).Eo to t6e dro#P6one
fun!tion on line )'.
"6e >e 6ere is t6e
Luer get met6od. *ll
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 82/97
fun!tion on line )'.)C.,ig6lig6t t6e [.get !all
inside.
Luer get met6od. *ll
we need to do is build
t6e !orre!t R to t6e
Web*P+8 wit6 t6e #6one
+D in!luded8 and t6e get
met6od will issue t6e
E;" reKuest we need to
retrie9e t6e #6one
details.
W6en t6e !all is
su!!essful8 ou !an
gi9e t6e get met6od a
!allba!> to #ro!ess t6e
res#onse. "6e data
#arameter will !ontain
a a9aS!ri#t obe!t t6at Luer builds b de-
seriali/ing t6e SAN. *t
t6is #oint ou !an build
,"% dnami!all using
!lient-side tem#lates8 or
using !ustom !ode.)G.Summari/e Web*P+ is going to be a
great 4t for single #age
a##li!ations and
a##li!ations t6at use a
lot of s!ri#t to #ro!ess
user reKuests. Web*P+
gi9es ou a lig6tweig6t
web ser9i!e ou !an
!all from a9aS!ri#t
!ode8 from mobile
de9i!es8 and e9en from
C2
des>to# a##li!ations or
ot6er ser9i!es. "6e
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 83/97
Web*P+8 li>e *SP.N;"8 is
6ig6l !on4gurable and
e7tensible.
C'
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 84/97
Web Demo ; 8 7Gue Web Site Deplo)mentDemo S!reen Ste#s S!ri#t
1. +f not alread o#ened8
o#en t6e
(abri>am.P6ones.Web
solution in Visual Studio.
Now our #6one store is
read to de#lo to t6e
!loud.
2. A#en +nternet ;7#lorer
and go to6tt#?@@www.windowsa/ure.!o
m
"6e 4rst t6ing +3ll do is
go to t6e Windows
*/ure web site.
'. 5li!> on t6e Portal lin> in
t6e u##er rig6t.
Windows */ure
in!ludes a #ortal
w6ere + !an manage
all of m web sites8
databases8 and ot6er
ser9i!es.
+f ou don3t 6a9e a
Windows */ure
a!!ount8 noti!e t6ere
C)
is a free trial ou !an
use to e7#lore t6e
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 85/97
#
features.). ogin to t6e #ortal using
our Windows i9e +D
+3ll need to login to t6e
#ortal using m
Windows i9e +D
$. Point out some of t6e
6ig6-le9el features of t6e
#ortal.
(rom t6e #ortal 6ome
s!reen 6ere + !an see
all of t6e */ure
features +3m using. +
!ould drill into anone
of t6ese to see a
das6board wit6
o#erational statisti!s8
or do some
!on4guration.
,owe9er8 w6at we
need toda is to !reate
a new web site and
new SL database for
our #6one store.
C$
. 5li!> on t6e N;W i!on in
t6e bottom left of t6e
et3s go to t6e new
lin> and !li!>.
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 86/97
s!reen.
. nder N;W8 !li!> on t6e
W;B S+"; lin>.
We want to !reate a
new web site in t6e
!loud.
C
C. +n t6e se!tion t6at o#ens8
!li!> 5R;*"; W+",
W6en + !reate a new
web site + !an
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 87/97
D*"*B*S; automati!all !reate
and asso!iate a SL
Ser9er database
instan!e for m web
site to use.
G. +n t6e dialog t6at a##ears8
enter a uniKue name for
our site in t6e R
te7tbo7 <for t6e remainderof t6is demo8 we3ll be
using fabri>am#6ones8
but ou3ll need our own8
uniKue name=.10.nder D*"*B*S;8 ensure
I5reate a new SL
databaseJ is sele!ted.11.nder R;E+AN8 ou !an
sele!t t6e region !losest
to our #6si!al lo!ation.
W6en we !reate a new
website we need to
gi9e */ure a R to
use8 b default t6isR we be at
a/urewebsites.net8 but
ou !an also register
our own domain
name to #oint to our
site.
We also want to !reate
wit6 a new SL
database8 and we !an
run all of t6is in our
lo!al data !enter.
C
12.+n ste# 28 re9iew t6e
database settings <ou
During setu# we also
6a9e t6e o#tion of
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 88/97
!an use t6e default
settings=. +f ou alread
6a9e an */ure SL Ser9er
setu#8 ou !an !6ose
Ise ;7isting Ser9erJ in
t6e S;RV;R sele!tion bo7.
"6e ne7t se!tion assumes
ou need to sele!t a new
SL Database ser9er.
!ustomi/ing our
database settings8
in!luding t6e !ollation
of t6e database8 t6e
ma7imum si/e8 and
basi!all we !an sele!t
t6e features we need
based on our business
needs and #ri!e.
1'.+f !reating a new ser9er8
enter a AE+N N*%; <we3ll
use fabri>amdbuser=.1).;nter a AE+N P*SSWARD
<we3ll use (abri>am\Z=
and !on4rm t6e
#assword.1$.;nsure I*llow Windows
*/ure ser9i!es to a!!ess
t6e ser9erJ is !6e!>ed.Note? if ou are using an
e7isting database ser9er8
t6is is t6e s!reen w6ere
ou enter our e7isting
login and #assword.
We3ll need to !reate
some !redentials for
our database8
in!luding a login name
and #assword.
*/ure will enfor!e
some #assword
!om#le7it 9alidations8
so we3ll need a
#assword wit6 letters8numbers8 and s#e!ial
!6ara!ters.
CC
1.Wait for */ure to #ro9ision
t6e ser9i!es
Now we39e gi9en
*/ure e9ert6ing it
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 89/97
needs to #ro9ision our
ser9i!es. "6e good
news is we !an alwas
!ome ba!> later and
!6ange an of t6ese
settings. +f we need
more memor or
storage !a#a!it8 t6e
#ortal ma>es t6ese
eas to add.1.*fter t6e web site starts
running8 !li!> on t6e web
site to go into t6e
das6board.
Aur web site is read8
let3s !li!> on t6e site to
manage t6e site.
CG
1C.,ig6lig6t t6e das6board
features.
Now we are on t6e
das6board for our web
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 90/97
site8 it is t6e
das6board t6at will
gi9e us an o9er9iew of
6ow mu!6 !#u time
our site is using8 and
6ow man reKuests
6a9e been #ro!essed
b t6e site.
Af !ourse8 we 6a9e not
#ro!essed an
reKuests et8 be!ause
we do not 6a9e t6e
site de#loed8 but t6at
will be eas.
1G.nder Kui!> glan!e8 !li!>Download #ublis6 #ro4le.
Windows */ure willautomati!all !reate a
#ublis6 #ro4le for me
t6at + !an download
and use from Visual
Studio. "6e #ublis6
#ro4le will gi9e me
e9ert6ing + need to
#us6 m site to t6e
!loud.
20.+f #rom#ted in +nternet
;7#lorer8 !li!> ISa9eJ
w6en #rom#ted to
download t6e #ublis6
We3ll sa9e t6e #ublis6
#ro4le as a 4le to dis>.
G0
#ro4le.21.Return to Visual Studio22 Rig6t !li!> on t6e
+nside of Visual Studio
i 6t li >
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 91/97
22.Rig6t-!li!> on t6e
(abri>am.P6ones.Web
#roe!t.2'.Sele!t Publis6Q from t6e
!onte7t menu.
we !an rig6t-!li!> on
our web site and tell
Visual Studio we want
to #ublis6 t6e web
site.
2).+n t6e Publis6 Web dialog8
!li!> t6e +m#ort button.2$.Browse to t6e #ublis6
#ro4le ou downloadedfrom t6e */ure #ortal.
2.5li!> Ne7t.
We !an im#ort t6e
#ublis6 #ro4le we
downloaded from
*/ure into t6e #ublis6
settings maintained b
Visual Studio. "6e
#ro4le will gi9e Visual
Studio t6e Rs and
#assword it needs to
get e9ert6ing
wor>ing.
G1
2.An t6e 5onne!tion tab8
re9iew t6e !onne!tion
tti 6
,ere are t6e
!onne!tion #arameters
Vi l St di i > d
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 92/97
settings – no !6anges are
reKuired.
Visual Studio #i!>ed u#
from t6e #ublis6ing
#ro4le.
G2
2C.An t6e Settings tab8
sele!t t6e dro#down
d P6 Db d l t
(or settings8 we will
allow t6e #ublis6
ti t dd t6
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 93/97
under P6oneDb and sele!t
t6e !onne!tion string t6at
a##ears.2G.Sele!t t6e *##l 5ode
(irst migrations <runs on
a##li!ation start=
!6e!>bo7.'0.5li!> Ne7t
o#eration to add t6e
rig6t database
!onne!tion string to
our web.!on4g 4le for
us. "6is !onne!tion
string was in t6e
#ublis6 #ro4le and it is
t6e !onne!tion string
for our database in t6e
!loud.
Sin!e we are using
;ntit (ramewor> $.0
in t6is #roe!t we !an
ta>e ad9antage of
;ntit (ramewor>migrations. "6ese
migrations will ta>e
!are of initiali/ing t6e
database s!6ema and
#o#ulating our
database wit6 t6e data
it reKuires.
G'
'1.5li!> Publis6 Now we are read to
#ublis6.
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 94/97
"6e #ublis6ing
o#eration !an ta>e a
little bit of time8 as it
will !o# all of m
4les8 assets8 in!luding
t6e s!ri#t 4les we
wor>ed on8 but also
t6e images and 9ideos8
#lus all of t6e
assemblies needed for
m site to fun!tion. We
!an wat!6 t6e
#rogress in Visual
Studio as t6e 4les are
#us6ed to t6e ser9er.
An!e t6is is !om#lete8
we3ll all be able to
laun!6 a browser and
go to t6e R we
!reated to wat!6 t6e
web site run.
W6ile t6is is running8
+3ll let ou >now t6at
Visual Studio will sa9e
t6e im#orted
#ublis6ing #ro4le and
t6e !6anges we made
so t6at w6en + ma>e
!6anges to t6e web
site to add new
G)
features or 47 a bug8 +
!an !li!> Publis6 again
and easil #us6 out a
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 95/97
and easil #us6 out a
new 9ersion of t6e site
to t6e !loud. *nd w6ile
t6e site is in t6e !loud
+ !an be sure all t6e
data is ba!>ed u# and
se!ure. + !an monitor
t6e store using t6e
Windows */ure #ortal
das6board8 and + !an
alwas add more
!a#a!it w6en t6e
store starts to be!ome
more #o#ular.'2.Wait for t6e #ublis6ing to
!om#lete.
Now our #ublis6
o#eration is !om#lete.
G$
''.Return to t6e */ure
#ortal.
et3s go ba!> to t6e
#ortal.
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 96/97
').S!roll down to t6e S+";
R lin> on t6e rig6t-6and
side.'$.5li!> on t6e lin> to t6e
site.
et3s go to t6e site.
G
'.S6ow t6e site running in
*/ure
*nd 6ere is our web
site in t6e !loudZ
7/21/2019 Vs 2012 Demo Script--Web General
http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 97/97
et3s see if we !an use
t6e Web*P+ w6ile
running on */ure.
'.*##end @a#i@#6one to t6e
6ome #age R.'C.W6en t6e browser
#rom#ts ou to o#en t6e
res#onse8 !li!> A#en.
We3ll issue a E;"
reKuest to see all t6e
#6ones.
'G.S6ow t6e SAN res#onse
in Note#ad.
*nd now we >now t6e
Web*P+ wor>s well
wit6 Windows */ure8
too.