creating web app
TRANSCRIPT
CreateaWebApp
Hans-PetterHalvorsen,M.Sc.
StepbystepExercises
ASP.NETWebforms
WebAppExercise• VisualStudio• C#• ASP.NETWebForms• ASP:ActiveServerPages
LotsofresourcesforWebDevelopment:http://www.w3schools.comRecommended!!!
WebServer
ASP.NETC#/VB.NET
.NETFramework
WebBrowser
HTML JavaScriptServer-side
Client
ASP.NET
CSS
Theserver-sideASP.NETpagesareconvertedontheservertoHTMLpagesbeforeitissenttotheclient
ASP.NETisusedtocreatedynamicwebpages
WebSites
ASP.NETC#/VB.NET
.NETFramework
ASP.NETWebPages
ASP.NETWebForms
ASP.NETMVC
ASP.NET– DifferentwaysofcreatingWebSiteswithASP.NET
http://www.asp.net
Youcanuse(atleast)3differentapproacheswhencreatingWebSiteswithASP.NET
5
ASP.NETWebPages
ASP.NETWebForms
ASP.NETMVC
• SimiliartothedesktopdevelopmentmodelusedinWPF• GUI(*.aspxfiles)andCode(*.aspx.cs)isseparated
• MVC– Model- View– Controller• Anewdevelopmentmodelwhereyousplityourdevelopment
into3parts/components:ModelsforData,ViewsforDisplayandControllersforInput
• SingePageModel(Theserver-sidecodeismixedinbetweentheHTML)
• UsestheRazorsyntax(.cshtmlfiles)• SimiliarasClassicASPandPHP• AtoolcalledMicrosoftWebMatrixisoptimizedforthis
developmentmodel,butyoucanalsouseVisualStudioifyouwantto.
ASP.NETASP.NETsupportsthreedifferentdevelopmentmodels:
VerysimilartoPHPGUIandCodemixedtogetherIfyouarefamiliarwithPHPthisisagoodstartingpoint.
TheWebversionofclassicWinFormsGUIandCodeisseparated.IfyouarefamiliarwithWinFormsorWPF,thisisagoodchoice
FormoreexperiencedWebDevelopers
ASP.NET
http://www.asp.net/get-started/websites
Exercise:WebForm
Hans-PetterHalvorsen,M.Sc.
ASP.NETWebFormExample
9
Whenyouarefinished, yourWebAppshould looksomething likethis:
WhenyouenteryourNameintheTextBoxandclicktheOKButton,theprogramshould respondwithagreetings.
ASP.NETWebFormExample
10http://www.asp.net Remembertoselect“AddtoSourceControl”
CreateNewSolution
11
Youhavelotsofchoiceshere– butwejustwanttocreateaverysimpleWebFormApp
CreateNewWebForm
12
WinForm1.aspxPage
“HTML”CodeEditor
WYSIWYGHTMLDesigner
YoucaneitherwritetextintheCodeEditororintheDesignerwindow
UsedtocreatetheGUI/HMI
HelloWorldExample- GUI
14
HelloWorldExample– TheCode
15
WebForm1.aspx.cs
RunningtheApplication
16
EnteryourNameandclickOKbutton
Note!RemembertoCheck-inyour filesintoTFS
Exercise:WebFormwithDatabaseCommunication
Hans-PetterHalvorsen,M.Sc.
DatabaseExerciseqCreateaDatabasecalledLIBRARYandaBOOKtableinSQLServer
qEntersomeTestdataintotheBOOKtable
18
DatabaseExerciseqFilla“GridView”withdatafromtheDatabaseTable(BOOK),asshownbelow
20
Usethe“Wizard”inordertocreateallthe“magic”youneedinyourapplication
21
Whenfinishingthe“Wizard”,your.aspxpageshouldlooksomethinglikethis
22
Asyousee- NoCodeneededtobewritteninthisexampleJ
ThisisOKforquickdemos– butforprofessionalapplications,youneedtousesomehardcoreADO.NETorsimiliarframeworks.
Exercise:WebFormwithDatabaseCommunication
fromScratchHans-PetterHalvorsen,M.Sc.
DatabaseExercise2qThistime:CreateeverythingfromscratchusingC#codeandADO.NET.
qFilla“DropDownList”withBookNamesfromtheDatabase
qPrinttheAuthorNamebasedontheselectedBookNameonthescreen
Beginning ASP.NET4.5inC#,Apress,2012,MatthewMacDonald(SafariBooksOnline)
Your.aspxpageshouldlooksomethinglikethis:
ThecodecouldbeimprovedbycreatingaseparateClasswhereyoucreatethisMethod
EventHandler
ThecodecouldbeimprovedbycreatingaseparateClasswhereyouputthiscodeintoaMethod
ThiscodeisexecutedwhentheWebPageisloaded
Web.config
AllkindogconfigurationshouldbestoredintheWeb.configfile,includingDatabaseConnectionStrings,etc.
Hans-PetterHalvorsen,M.Sc.
UniversityCollegeofSoutheastNorwaywww.usn.no
E-mail:[email protected]:http://home.hit.no/~hansha/