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:hans.p.halvorsen@hit.noBlog:http://home.hit.no/~hansha/