Download Creating Web App

CreateaWebApp
ASP.NETWebforms
StepbystepExercises
Hans-PetterHalvorsen,M.Sc.
WebAppExercise
•
•
•
•
VisualStudio
C#
ASP.NET WebForms
ASP:ActiveServerPages
LotsofresourcesforWebDevelopment: http://www.w3schools.com
Recommended!!!
Client
ASP.NET
ASP.NETisusedtocreate
dynamicwebpages
WebBrowser
HTML
JavaScript
CSS
Server-side
Theserver-side ASP.NETpagesareconvertedonthe
servertoHTMLpagesbeforeitissenttotheclient
WebServer
ASP.NET
C#/VB.NET
.NETFramework
ASP.NET– Differentwaysofcreating
WebSiteswithASP.NET
WebSites
ASP.NET
WebPages
ASP.NET
WebForms
ASP.NET
C#/VB.NET
.NETFramework
http://www.asp.net
ASP.NET
MVC
Youcanuse(atleast)3different
approacheswhencreatingWeb
SiteswithASP.NET
ASP.NET
WebPages
• SingePageModel(Theserver-sidecodeismixedinbetweenthe
HTML)
• UsestheRazorsyntax(.cshtmlfiles)
• SimiliarasClassicASPandPHP
• AtoolcalledMicrosoftWebMatrixisoptimizedforthis
developmentmodel,butyoucanalsouseVisualStudioifyou
wantto.
ASP.NET
WebForms
• SimiliartothedesktopdevelopmentmodelusedinWPF
• GUI(*.aspxfiles)andCode(*.aspx.cs)isseparated
ASP.NET
MVC
• MVC– Model- View– Controller
• Anewdevelopmentmodelwhereyousplityourdevelopment
into3parts/components:ModelsforData,ViewsforDisplay
andControllersforInput
5
ASP.NET
ASP.NETsupportsthreedifferentdevelopmentmodels:
Formoreexperienced
VerysimilartoPHP
WebDevelopers
GUIandCodemixedtogether
IfyouarefamiliarwithPHPthis
isagood startingpoint.
TheWebversion of
classicWinForms
GUIandCodeisseparated.
IfyouarefamiliarwithWinForms
orWPF,thisisagood choice
ASP.NET
http://www.asp.net/get-started/websites
Exercise:WebForm
Hans-PetterHalvorsen,M.Sc.
ASP.NETWebFormExample
Whenyouarefinished, yourWebApp should looksomething likethis:
WhenyouenteryourNameintheTextBoxandclicktheOKButton,
theprogramshould respond withagreetings.
9
ASP.NETWebFormExample
http://www.asp.net
Remembertoselect“AddtoSourceControl”
10
CreateNewSolution
Youhavelotsofchoiceshere– butwejustwant
tocreateaverysimpleWebFormApp
11
CreateNewWebForm
12
WinForm1.aspxPage
UsedtocreatetheGUI/HMI
“HTML”CodeEditor
YoucaneitherwritetextintheCode
EditororintheDesigner window
WYSIWYGHTMLDesigner
HelloWorldExample- GUI
14
HelloWorldExample– TheCode
WebForm1.aspx.cs
15
RunningtheApplication
Enteryour NameandclickOKbutton
Note!Rememberto
Check-inyour filesinto
TFS
16
Exercise:WebFormwith
DatabaseCommunication
Hans-PetterHalvorsen,M.Sc.
DatabaseExercise
qCreateaDatabasecalledLIBRARYandaBOOK
tableinSQLServer
qEntersomeTestdataintotheBOOKtable
18
DatabaseExercise
qFilla“GridView”withdatafromtheDatabase
Table(BOOK),asshownbelow
Usethe“Wizard”inordertocreateallthe“magic”youneedinyourapplication
20
Whenfinishingthe“Wizard”,your
.aspxpageshouldlooksomethinglike
this
21
Asyousee- NoCodeneededtobewritteninthisexampleJ
ThisisOKforquickdemos– butforprofessionalapplications,you
needtousesomehardcoreADO.NETorsimiliarframeworks.
22
Exercise:WebFormwith
DatabaseCommunication
fromScratch
Hans-PetterHalvorsen,M.Sc.
DatabaseExercise2
q Thistime:CreateeverythingfromscratchusingC#
codeandADO.NET.
q Filla“DropDownList”withBookNamesfromthe
Database
q PrinttheAuthorNamebasedontheselected
BookNameonthescreen
Beginning ASP.NET4.5inC#,Apress,2012,MatthewMacDonald(SafariBooksOnline)
Your.aspxpageshouldlooksomethinglikethis:
Thecodecouldbeimprovedbycreatingaseparate
ClasswhereyoucreatethisMethod
ThiscodeisexecutedwhentheWeb
Pageisloaded
EventHandler
Thecodecouldbeimprovedby
creatingaseparateClasswhere
youputthiscodeintoaMethod
Web.config
Allkindogconfigurationshouldbestoredinthe
Web.configfile,includingDatabaseConnectionStrings,
etc.
Hans-PetterHalvorsen,M.Sc.
UniversityCollegeofSoutheastNorway
www.usn.no
E-mail:[email protected]
Blog:http://home.hit.no/~hansha/