asp.net and web programming - home.usn.no · 5 introduction tutorial: asp.net and web programming...

UniversityCollegeofSoutheastNorway

http://home.hit.no/~hansha

ASP.NETWebProgramming

Hans-PetterHalvorsen,2016.11.01

2

TableofContents1 Introduction........................................................................................................................4

1.1 VisualStudio.................................................................................................................4

1.2 C#.................................................................................................................................5

1.3 .NETFramework...........................................................................................................5

1.4 Object-OrientedProgramming(OOP)..........................................................................5

2 VisualStudio........................................................................................................................7

2.1 Introduction.................................................................................................................7

2.2 GettingStarted.............................................................................................................7

2.2.1 IntegratedDevelopmentEnvironment(IDE)........................................................7

2.2.2 NewProject...........................................................................................................8

2.2.3 SolutionExplorer...................................................................................................9

2.2.4 Toolbox..................................................................................................................9

2.2.5 EditorsandDesigners..........................................................................................10

2.2.6 Propertieswindow..............................................................................................11

2.2.7 BuildandDebugTools.........................................................................................12

3 IntroductiontoWebProgramming...................................................................................13

3.1 Introduction...............................................................................................................13

3.2 WebBrowser..............................................................................................................14

3.3 HTML..........................................................................................................................14

3.4 CSS..............................................................................................................................15

3.5 JavaScript...................................................................................................................15

3 TableofContents

Tutorial:ASP.NETandWebProgramming

3.6 ASP.NET......................................................................................................................16

3.7 AJAX/ASP.NETAJAX...................................................................................................16

3.8 Silverlight....................................................................................................................16

4 IntroductiontoASP.NET...................................................................................................18

4.1 Introduction...............................................................................................................18

4.2 ASP.NETWebPages...................................................................................................20

4.3 ASP.NETSPA...............................................................................................................20

4.4 ASP.NETMVC.............................................................................................................20

4.5 ASP.NETWebForms..................................................................................................21

5 ASP.NETWebForms.........................................................................................................22

5.1 HelloWorldExample..................................................................................................22

6 InternetInformationServices(IIS)....................................................................................26

6.1 WebServer.................................................................................................................26

7 WorkingwithDatabasesinASP.NET.................................................................................27

7.1 DatabaseSystems......................................................................................................27

7.1.1 MirosoftSQLServer............................................................................................27

7.2 SQL.............................................................................................................................27

7.3 SQLServer+ASP.NET.................................................................................................29

7.3.1 SimpleDatabaseExamplee.................................................................................29

7.4 ADO.NET.....................................................................................................................31

7.4.1 Example...............................................................................................................31

8 WebServices.....................................................................................................................35

9 Example:WeatherSystem................................................................................................36

4

1 IntroductionASP.NETisaframeworkforcreatingwebsites,appsandserviceswithHTML,CSSandJavaScript.

1.1 VisualStudioMicrosoftVisualStudioisanintegrateddevelopmentenvironment(IDE)fromMicrosoft.ItcanbeusedtodevelopconsoleandgraphicaluserinterfaceapplicationsalongwithWindowsFormsapplications,websites,webapplications,andwebservicesinbothnativecodetogetherwithmanagedcodeforallplatformssupportedbyMicrosoftWindows,WindowsPhone,WindowsCE,.NETFramework,.NETCompactFrameworkandMicrosoftSilverlight.

Belowweseetheintegrateddevelopmentenvironment(IDE)inVisualStudio:

Newprojectsarecreatedfromthe“NewProject”window:

5 Introduction


1.2 C#C#ispronounced“seesharp”.C#isanobject-orientedprogramminglanguageandpartofthe.NETfamilyfromMicrosoft.C#isverysimilartoC++andJava.C#isdevelopedbyMicrosoftandworksonlyontheWindowsplatform.

1.3 .NETFrameworkThe.NETFramework(pronounced“dotnet”)isasoftwareframeworkthatrunsprimarilyonMicrosoftWindows.Itincludesalargelibraryandsupportsseveralprogramminglanguageswhichallowlanguageinteroperability(eachlanguagecanusecodewritteninotherlanguages).The.NETlibraryisavailabletoalltheprogramminglanguagesthat.NETsupports.Programswrittenforthe.NETFrameworkexecuteinasoftwareenvironment,knownastheCommonLanguageRuntime(CLR),anapplicationvirtualmachinethatprovidesimportantservicessuchassecurity,memorymanagement,andexceptionhandling.TheclasslibraryandtheCLRtogetherconstitutethe.NETFramework.

1.4 Object-OrientedProgramming(OOP)

6 Introduction


Object-orientedprogramming(OOP)isaprogramminglanguagemodelorganizedaround"objects"ratherthan"actions"anddataratherthanlogic.Historically,aprogramhasbeenviewedasalogicalprocedurethattakesinputdata,processesit,andproducesoutputdata.

ThefirststepinOOPistoidentifyalltheobjectsyouwanttomanipulateandhowtheyrelatetoeachother,anexerciseoftenknownasdatamodeling.Onceyou'veidentifiedanobject,yougeneralizeitasaclassofobjectsanddefinethekindofdataitcontainsandanylogicsequencesthatcanmanipulateit.Eachdistinctlogicsequenceisknownasamethod.Arealinstanceofaclassiscalledan“object”oran“instanceofaclass”.Theobjectorclassinstanceiswhatyouruninthecomputer.Itsmethodsprovidecomputerinstructionsandtheclassobjectcharacteristicsproviderelevantdata.Youcommunicatewithobjects-andtheycommunicatewitheachother.

ImportantfeatureswithOOPare:

• ClassesandObjects• Inheritance• Polymorphism• Encapsulation

Simulawasthefirstobject-orientedprogramminglanguage.Simulawasdevelopedinthe1960sbyKristenNygaardfromNorway.

Java,Python,C++,VisualBasic.NETandC#arepopularOOPlanguagestoday.

SinceSimula-typeobjectsarereimplementedinC++,JavaandC#theinfluenceofSimulaisoftenunderstated.ThecreatorofC++(1979),BjarneStroustrup(fromDenmark),hasacknowledgedthatSimulawasthegreatestinfluenceonhimtodevelopC++.

7

2 VisualStudio2.1 IntroductionHomepageofVisualStudio:http://www.microsoft.com/visualstudio

ThereexistdifferentversionsofVisualStudio,suchasVisualStudioExpress(free),VisualStudioProfessional,VisualStudioPremiumandVisualStudioUltimate.

2.2 GettingStarted

2.2.1 IntegratedDevelopmentEnvironment(IDE)

TheVisualStudioproductfamilysharesasingleintegrateddevelopmentenvironment(IDE)thatiscomposedofseveralelements:theMenubar,Standardtoolbar,varioustoolwindowsdockedorauto-hiddenontheleft,bottom,andrightsides,aswellastheeditorspace.Thetoolwindows,menus,andtoolbarsavailabledependonthetypeofprojectorfileyouareworkingin.

BelowweseetheVisualStudioIDE(IntegratedDevelopmentEnvironment):

8 VisualStudio


2.2.2 NewProject

Thefirstthingyoudowhenyouwanttocreateanewapplicationistocreateanewproject.

ThiscanbedonefromtheStartPage:

OrfromtheFilemenu:

Thenthe“NewProject”windowappears:

9 VisualStudio


Inthiswindowyouwillselectanappropriatetemplatebasedonwhatkindofapplicationyouwanttocreate,andanameandlocationforyourprojectandsolution.

Themostcommonapplicationsare:

• WindowsFormApplication• ConsoleApplication• WPFApplication• ASP.NETWebApplication• SilverlightApplication

2.2.3 SolutionExplorer

Solutionsandprojectscontainitemsthatrepresentthereferences,dataconnections,folders,andfilesthatyouneedtocreateyourapplication.Asolutioncontainercancontainmultipleprojectsandaprojectcontainertypicallycontainsmultipleitems.

2.2.4 Toolbox

TheToolboxcontainsallthenecessarycontrols,etc.youneedtocreateyouruserinterface.SeeFigurebelow.

10 VisualStudio


TheToolboxcontainsallthecontrols,etc.wecanuseinouruserinterface.

Inordertousetheminouruserinterface,wejustdraganddropthemtothe“Form”,asshownbelow:

2.2.5 EditorsandDesigners

VisualStudiohasdifferenteditorsanddesigntools.

GraphicalUserInterfaceDesigner:

11 VisualStudio


CodeEditor:

2.2.6 Propertieswindow

EachcontrolwehaveonouruserinterfacehaslotsofPropertieswecanset.

ThisisdoneinthePropertieswindow:

12 VisualStudio


2.2.7 BuildandDebugTools

InVisualStudiowehavelotsofBuildandDebuggingTools.

Buildmenu:

BelowweseetheBuildmenu:

Themostusedtoolis“BuildSolution”(ShortcutKey:F6).

Debugmenu:

BelowweseetheDebugmenu:

Themostusedtoolis“StartDebugging”(ShortcutKey:F5).

13

3 IntroductiontoWebProgramming

3.1 IntroductionTodaymostoftheapplicationsfocusontheInternet,wheretheapplicationscanbeviewedinastandardWebBrowser.StaticWebpagesarebasedonHTMLandCSS.Inordertocreatemoreadvancedapplications,weneedmorepowerfultools.

Ausefulwebsiteforlearningmoreaboutwebdevelopment:http://www.w3schools.com

Importantframeworksandtoolsforcreatingdynamicwebpages:

• ASP.NET• AJAX/ASP.NETAJAX• JavaScript

14 IntroductiontoWeb


• Silverlight

Theseframeworksandtoolswillbeexplainedbelow.

3.2 WebBrowserThepurposeofawebbrowseristoreadHTMLdocumentsandcomposethemintovisualoraudiblewebpages.ThebrowserdoesnotdisplaytheHTMLtags,butusesthetagstointerpretthecontentofthepage.

TodaywehavethefollowingmajorWebBrowsers:

• InternetExplorer(byMicrosoft)• Firefox(byMozilla)• Chrome(byGoogle)• Safari(byApple)• Opera(byOperafromNorway)

3.3 HTMLHTML,whichstandsforHyperTextMarkupLanguage,isthepredominantmarkuplanguageforwebpages.HTMListhebasicbuilding-blocksofwebpages.



HTMLiswrittenintheformofHTMLelementsconsistingoftags,enclosedinanglebrackets(like<html>),withinthewebpagecontent.HTMLtagsnormallycomeinpairslike<h1>and</h1>.Thefirsttaginapairisthestarttag,thesecondtagistheendtag(theyarealsocalledopeningtagsandclosingtags).Inbetweenthesetagswebdesignerscanaddtext,tables,images,etc.

BelowweseeasimpleaHTMLwebpage:

<!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>

AusefulwebsiteforlearningmoreaboutHTML:http://www.w3schools.com/html

3.4 CSSWebbrowserscanalsorefertoCascadingStyleSheets(CSS)todefinetheappearanceandlayoutoftextandothermaterial.

TheW3C,maintainerofboththeHTMLandtheCSSstandards

AusefulwebsiteforlearningmoreaboutCSS:http://www.w3schools.com/css

3.5 JavaScriptJavaScriptisanobject-orientedscriptinglanguagebasicallyusedtocreatedynamicwebpages.JavaScriptisprimarilyusedintheformofclient-sideJavaScript,implementedaspartofawebbrowserinordertoprovideenhanceduserinterfacesanddynamicwebsites.

BelowweseeasimpleaHTMLwebpagewithJavaScript:

<!DOCTYPE html> <html> <body> <h1>My First JavaScript</h1> <p>Click the button to display the date.</p> <p id="demo"></p> <button type="button" onclick="myFunction()">Try it</button> <script> function myFunction() { document.getElementById("demo").innerHTML = Date(); }



</script> </body> </html>

AusefulwebsiteforlearningmoreaboutJavaScript:http://www.w3schools.com/js

3.6 ASP.NETASP.NETisawebapplicationframeworkdevelopedbyMicrosofttoallowprogrammerstobuilddynamicwebsites,webapplicationsandwebservices.

ASP.NETispartoftheVisualStudiopackage.

ItwasfirstreleasedinJanuary2002withversion1.0ofthe.NETFramework,andisthesuccessortoMicrosoft'sActiveServerPages(ASP)technology.ASP.NETisbuiltontheCommonLanguageRuntime(CLR),allowingprogrammerstowriteASP.NETcodeusinganysupported.NETlanguage,suchasC#andVB.NET.

ASP.NETwebpagesorwebpage,knownofficiallyasWebForms],arethemainbuildingblockforapplicationdevelopment.Webformsarecontainedinfileswithan“.aspx”extension.

3.7 AJAX/ASP.NETAJAXAJAXisanacronymforAsynchronousJavaScriptandXML.AJAXisagroupofinterrelatedwebdevelopmentmethodsusedontheclient-sidetocreateinteractivewebapplications.WithAjax,webapplicationscansenddatato,andretrievedatafrom,aserverasynchronously(inthebackground)withoutinterferingwiththedisplayandbehavioroftheexistingpage.

ASP.NETAJAXisasetofextensionstoASP.NETdevelopedbyMicrosoftforimplementingAJAXfunctionality.

3.8 SilverlightMicrosoftSilverlightisanapplicationframeworkforwritingandrunningbrowserplug-insorotherrichinternetapplications,withfeaturesandpurposessimilartothoseofAdobeFlash.Therun-timeenvironmentforSilverlightisavailableasaplug-informostwebbrowsers.SilverlightisalsooneofthetwoapplicationdevelopmentplatformsforWindowsPhone7/8.

ThelatestversionisSilverlight5.0.



SilverlightisbasedonWPF,soinSilverlightapplications,userinterfacesaredeclaredinExtensibleApplicationMarkupLanguage(XAML)andprogrammedusingasubsetofthe.NETFramework.

18

4 IntroductiontoASP.NET4.1 IntroductionASP.NETisawebapplicationframeworkdevelopedbyMicrosofttoallowprogrammerstobuilddynamicwebsites,webapplicationsandwebservices.

ASP.NETisaframeworkfrocreatingwebsites,appsandserviceswithHTML,CSSandJavaScript.

WebSite:http://www.asp.net

ASP.NETsupportsdifferentapproachesformakingwebsitesorwebpages.

• ASP.NETWebPagesusesasinglepagemodelthatmixescodeandHTMLmarkup.• ASP.NETSPA(SinglePageApplication)• ASP.NETWebFormsusescontrolsandanevent-modelforcomponent-based

development. • ASP.NETMVC(ModelViewController)valuesseparationofconcernsandenables

easiertest-drivendevelopment.

Youcanmixandmatchthesetechniqueswithinoneapplicationdependingonyourneeds.

19 IntroductiontoASP.NET


Video:http://www.asp.net/aspnet/overview/making-websites-with-aspnet/making-websites-with-aspnet

NewWebProjectDialog:

SelectProjectName,LoctionandSolutionName.

Next,seelctthetemplateyouwanttouse.



4.2 ASP.NETWebPagesInASP.NETWebPagesyouincludeservercodedirectlyintotheHTMLsyntax,similartoPHPandClassicASP.

ASP.NETWebPagesusesSingePageModel(Theserver-sidecodeismixedinbetweentheHTML).ItusesthetheRazorsyntax(.cshtmlfiles)

AtoolcalledMicrosoftWebMatrixisoptimizedforthisdevelopmentmodel,butyoucanalsouseVisualStudioifyouwantto.

http://www.w3schools.com/aspnet

4.3 ASP.NETSPASPA–SinglePageApplication

Formoreinformation:http://www.asp.net/single-page-application

4.4 ASP.NETMVCMVC–Model-View–Controller



Anewdevelopmentmodelwhereyousplityourdevelopmentinto3parts/components:ModelsforData,ViewsforDisplayandControllersforInput.

4.5 ASP.NETWebFormsASP.NETissimiliartothedesktopdevelopmentmodelusedinWPF. GUI(*.aspxfiles)andCode(*.aspx.cs)isseparated.

InthisdocumentwewillfocusonASP.NETWebForms.

22

5 ASP.NETWebFormsThemainfocusinthistutorialwillbeASP.NETWebForms.

5.1 HelloWorldExampleWhenyouarefinished,yourWebAppshouldlooksomethinglikethis:

WhenyouenteryourNameintheTextBoxandclicktheOKButton,theprogramshouldrespondwithagreetings.

SeelctCreateNewProject:

23 ASP.NETWebForms


Youhavelotsofchoiceshere–butwejustwanttocreateaverysimpleWebFormApp.

CreateNewWebForm:

WinForm1.aspxPage:UsedtocreatetheGUI/HMI

24 ASP.NETWebForms


HelloworldExample–GUI:

WebForm1.aspx.cs:

25 ASP.NETWebForms


RunningtheApplication(F5):

Congratulations,youhavecreatedyourfirstASP.NETWebFormsapplication.

26

6 InternetInformationServices(IIS)

6.1 WebServerThetermwebservercanrefertoeitherthehardware(thecomputer)orthesoftware(thecomputerapplication)thathelpstodeliverwebcontentthatcanbeaccessedthroughtheInternet.

Themostcommonuseofwebserversistohostwebsites,butthereareotherusessuchasgaming,datastorageorrunningenterpriseapplications.

• IIS-InternetInformationServices, MicrosoftWindows• ApacheWebServer, OpenSource, Cross-platform:UNIX,Linux,OSX,Windows,...• Nginx (pronounced"enginex") -Hasbecomeverypopularlatly• GWS(GoogleWebServer)• etc.

27

7 WorkingwithDatabasesinASP.NET

Today,mostofthewebsitesandwebpagesusesadatabasetostoredatathatisvisibleonthewebpage,e.g.Facebook,Instagram,Twitter,etc.

7.1 DatabaseSystemsTherearelotsofdifferentdatabasesystems,orDBMS–DatabaseManagementSystems,suchas:

• MicrosoftSQLServero Enterprise,Developerversions,etc.o Expressversionisfreeofcharge

• Oracle• MySQL(Oracle,previouslySunMicrosystems)-MySQLcanbeusedfreeofcharge

(opensourcelicense),WebsitesthatuseMySQL:YouTube,Wikipedia,Facebook• MariaDB(“TheNewMySQL”)• MicrosoftAccess• IBMDB2• Sybase• …lotsofothersystems

7.1.1 MirosoftSQLServer

MicrosoftisthevendorofSQLServer.WehavedifferenteditionsofSQLServer,whereSQLServerExpressisfreetodownloadanduse.WewillfocusonSQLServerinthistutorial.

7.2 SQLSQL(StructuredQueryLanguage)isadatabasecomputerlanguagedesignedformanagingdatainrelationaldatabasemanagementsystems(RDBMS).



SQL,isastandardizedcomputerlanguagethatwasoriginallydevelopedbyIBMforquerying,alteringanddefiningrelationaldatabases,usingdeclarativestatements.

SQLispronounced/ˌɛskjuːˈɛl/ (letterbyletter) or/ˈsiːkwəl/ (asaword).

WhatcanSQLdo?

• SQLcanexecutequeriesagainstadatabase• SQLcanretrievedatafromadatabase• SQLcaninsertrecordsinadatabase• SQLcanupdaterecordsinadatabase• SQLcandeleterecordsfromadatabase• SQLcancreatenewdatabases• SQLcancreatenewtablesinadatabase• SQLcancreatestoredproceduresinadatabase• SQLcancreateviewsinadatabase• SQLcansetpermissionsontables,procedures,andviews

EvenifSQLisastandard,manyofthedatabasesystemsthatexisttodayimplementtheirownversionoftheSQLlanguage.InthisdocumentwewillusetheMicrosoftSQLServerasanexample.

HerearesomeexamplesofSQLqueries:



InthisTutorialwewillfocusonMicrosoftSQLServer.SQLServerusesT-SQL(Transact-SQL).T-SQLisMicrosoft'sproprietaryextensiontoSQL.T-SQLisverysimilartostandardSQL,butinadditionitsupportssomeextrafunctionality,built-infunctions,etc.

InordertousedatabasesinourapplicationsweneedtoknowStructuredQuerylanguage(SQL).FormoreinformationaboutSQL,seethefollowingTutorial:StructuredQueryLanguage(SQL)

TheTutorialsareavailablefrom:http://home.hit.no/~hansha

7.3 SQLServer+ASP.NETSQLServer+ASP.NET=PowerfulWebApplications

7.3.1 SimpleDatabaseExamplee

CreateaDatabasecalledLIBRARYandaBOOKtableinSQLServer.EntersomeTestdataintotheBOOKtable.

Filla“GridView”withdatafromtheDatabaseTable(BOOK),asshownbelow



Usethe“Wizard”inordertocreateallthe“magic”youneedinyourapplication:

Whenfinishingthe“Wizard”,your.aspxpageshouldlooksomethinglikethis

Asyousee-NoCodeneededtobewritteninthisexampleJ



ThisisOKforquickdemos–butforprofessionalapplications,youneedtousesomehardcoreADO.NETorsimiliarframeworks.

7.4 ADO.NETADO.NET(ActiveXDataObjectfor.NET)isasetofcomputersoftwarecomponentsthatprogrammerscanusetoaccessdataanddataservices.ItisapartofthebaseclasslibrarythatisincludedwiththeMicrosoft.NETFramework.Itiscommonlyusedbyprogrammerstoaccessandmodifydatastoredinrelationaldatabasesystems,thoughitcanalsoaccessdatainnon-relationalsources.

7.4.1 Example

Thistime:CreateeverythingfromscratchusingC#codeandADO.NET. Filla“DropDownList”withBookNamesfromtheDatabase PrinttheAuthorNamebasedontheselectedBookNameonthescreen,seebelow.

Your.aspxpageshouldlooksomethinglikethis:



Your.aspx.cspageshouldlooksomethinglikethis:



ThePage_load()methodisexecutedwhentheWebPageisloaded.InthissimpleexampleweputallthecodeintotheEventHandlerfortheDropDownList.ThecodecouldbeimprovedbycreatingaseparateClasswhereyouputthiscodeintoaMethod.

TheFillBookListmethodisasfollows:

ThecodecouldbeimprovedbycreatingaseparateClasswhereyoucreatethisMethod.



AllkindogconfigurationshouldbestoredintheWeb.configfile,includingDatabaseConnectionStrings,etc.

35

8 WebServicesInordertosharedatabetweendevicesoverInternet,WebServicesisthesolution.

InASP.NETthereareseveralalternativesforcreatingsuchWebServices.

SeetheTutorial“WebServiceswithExamples”formoredetails.

VisualStudioandASP.NEThaspowerfulfeaturesforcreatingWebServices:

• ASMXWebService(TraditionalWebWerviceusingSOAP)• ASP.NETWebAPI(ThemodernWebServiceusingREST,Web2.0)

36

9 Example:WeatherSystemBelowweseeanexampleofaWebSitecreatedinASP.NET.TheWebSitepresentweatherdatafromtheWeatherstationlocatedatTelemarkUniversityCollege.

Formoreinformation,pleasevisit:

http://home.hit.no/~hansha/weather.htm

Hans-PetterHalvorsen,M.Sc.

E-mail:[email protected]

Blog:http://home.hit.no/~hansha/

UniversityCollegeofSoutheastNorway

www.usn.no

asp.net and web programming - home.usn.no · 5 introduction tutorial: asp.net and web programming...

Documents