Developing Web Applications with Microsoft Visual Studio 2010 Examen: Microsoft Cursus: M10264

Developing Web Applications with Microsoft Visual Studio 2010 Examen: 70-515 Microsoft Cursus: M10264 MVC.net is een door Microsoft geimplementeerde Design Pattern van Model View Controller. View is de User Interface Tier Een View is een visualisatie van het business object, gemaakt om een Action zoals: Index, Edit, Create, Delete, Detail, enz. te tonen. Uitgegenereerd in pure HTML, want de designer en niet de programmeur moet met CSS Cascading Style Sheet de Look en Feel aanpassen. Data naar de View kan meegegeven worden door de Controller aan de View MVC specifiek, met: - View(Business Object) - ViewData["message"] = "" voor extra informatie naast het Business Object - TempData["message"] = "" voor Postback informatie, zoals "Goed verwerkt" of Validatie fouten. De URL om de View te benaderen is standaard achter de Web Site Naam: - Controller Naam is Directory naam - Action Naam van de Controller is de View.aspx - Optioneel: de ID. (die bijvoorbeeld gedelete moet worden) In de global.asax valt de URL opbouw te wijzigen voor de gehele Web Site. De correlatie tussen de View en de Controller is puur op Naam. View Inhertis kan strong typed zijn voor een Entity Framework business object en moet met een IEnumerable<> uitgevoerd zijn voor een List. Een Partial View is een UserControl.ascx. In je view kun je de usercontrol opnemen met <%: Html.RenderPartial(""); %> <% is voor C# code <%: is voor tekst de : vervangt dan de ; op het einde <%= doet een bold tekst, en doet een HTML response.write <%# betekent binding 2 kanten op naar de control en weer terug naar de datasource de Shared directory in de Views directory is voor de Error.aspx en de Masterpage Site.Master. De shared directory heeft geen controller en wordt automatisch door de MVC doorzocht. Controller is de Business Logica Tier in de Controller staan de Actions: Index, Edit, Create, Delete, Detail, enz. [HTTPGet] is Default en is om informatie in de View te schrijven, [HTTPPost] moet boven de Action als er een wijziging uit de View verwerkt moet worden. Model is de representatie van de Data Tier Het Entity Framework is ORM Object Relational Mapping, een gegenereerde Object representatie van het Database datamodel LINQ is een SELECT op het Entity Framework - Insert is AddObject: het nieuw toevoegen aan een model - Update is ApplyCurrentValues: eerst het origineel ophalen in het model, daarna updaten - Delete is DeleteObject: eerst het origineel ophalen in het model,dan delete. Let op foreign key afhankelijkheden.

1 http://www.erwinvanbeveren.nl/

En daarna om te Committen SaveChanges(). Dit is alleen Committen vanuit geheugen. Dus voor alle duidelijkheid: voor de Commit moet je eerst weer een Select in het geheugen doen, dan pas een AddObject, ApplyCurrentValues of DeleteObject, en dan pas SaveChanges(); Omdat je elke keer weer een Select moet schrijven, maak je een Repository Class aan, een Helper, waarin je dit eenmalig maakt en continue aanroept. Je kunt een aparte Partial MetaData class maken om metadata toe te voegen aan de gegenereerde Objecten. Wel in dezelfde Namespace en partial met dezelfde Classname als de Business Object Class. Waarom een aparte partial class en geen aanpassing in het entity model? Als het entity model opnieuw gegenereerd wordt, vanuit het Entity Framework, bijvoorbeeld na database wijzigingen, dan is de metadata niet verloren, omdat in aparte Partial Class staat. Metadata kan zijn om: - extra calculated fields toe te voegen - een object representatie te coderen van 3e partij WCF services - extra metadata aan gegenereerde Object representatie van het Database datamodel toe te voegen. zoals: Display naam en properties, Required, Readonly en andere Business Logica van het Object. Discoverability Voor zoekmachines moet je makkelijk te indexeren URL's implementeren. De URL opbouw voor MVC kun je definieren in de Global.asax met routes.MapPageRoute(). - de volgorde van de Control\Action - of meegegeven ID's optioneel zijn - Custom argumenten, zoals: year/month/day - default waarden bij argumenten De volgorde van de gedefinieerde routes is belangrijk, want de laatste route moet alles accepteren, anders komt er een foutmelding. Als er te veel Controllers met bijbehorende Views komen, dan kun je Area's aanmaken. een Area is een extra groep directory boven de Controllers, Views en Shared directories. Die Area heeft dan ook een MapPageRoute() in de global.asax en wordt met AreaRegistration.RegisterAllAreas() ook geregistreerd als route. De routedefinities van de Area zelf staan in de arearegistration.cs. Eventueel te gebruiken url data komt binnen via Page.RouteData.Values[] De directory structuur van de Area’s is als volgt: Areas \ Controllers Models Views arearegistration.cs Het doel van Discoverability is om bovenaan te komen bij Search Engines. IIS 7.0 Extensions heeft de SEO Toolkit 1.0 (Search Engine Optimization) - daarmee kun je een website van buitenaf analyseren met Site Analisys Report - hoe vaak de website van opbouw verandert en met welke prioriteit van 0 tm 1 kun je wijzigen met Sitemaps and Sitemap Indexes. Dit wordt opgeslagen in de Sitemap.XML in de root van de web site. - je kunt web pagina's markeren als niet relevant en niet laten indexeren, met Robots Exclusion. Dit wordt opgeslagen in de Robot.txt in de root van de web site. Om het Menu te splitsen naar 1 aparte XML file en er Authorization Roles op te definieren maak je een Web.SiteMap met de menu definitie erin: <sitemap> met daarbinnen meerdere <sitemapnode> Je kunt hiernaar verwijzen vanuit bijvoorbeeld de masterpage: de Site.Master file. Je kunt namelijk meerdere masterpages hebben, die ook nog een hierarchie hebben. Bijvoorbeeld: Wereld, Europa, Nederland. Dit met de syntax: de sitemapdatasource vindt dan zelf op naam de Web.SiteMap.

2 http://www.erwinvanbeveren.nl/

Writing Server Side Code Voor productie web sites: New Project > ASP.net Web Application. dit ondersteund MVC.net en subdirectory namen in de web site worden automatisch verwerkt in de namespace namen van de classes. Voor voorbeelden te maken: New Website > ASP.net Website. Globalization en Localization. Globalization is het geschikt maken van de web site voor multi-languility. Localization is het ondersteunen van een specifieke taal. In de Design Time Editor kun je onder Tools > Generate Local Resource kiezen. Dan komt er een .aspx.resx XML file bij voor de .aspx file waarvoor je de Local Resource hebt gegenereerd, waarin de tekst staat. Je kunt meerdere .aspx.resx files maken voor verschillende talen: .aspx.nl-nl.resx en .aspx.en-us.resx. De Taalinstelling van de gebruiker komt mee met de browser in Culture en UICulture via de servervariabelen en currentthread en is vervolgens te beïnvloeden. De .resx files staan: - in de App_LocalResources per Page. - in de App_GlobalResources per WebSite. Beide werken vanuit de .aspx file met een ResourceKey. Alleen Controls krijgen een ResourceKey, niet de hardcoded teksten. Hardcoded teksten moet je vervangen door Localize en Literal Controls. Viewstate gaat naar de Client en wordt verpakt in een hidden input variabele om de data context te bewaren bij een RoundTrip. EnableViewState true/false zet de Viewstate aan en uit. Standaard is aan. EnableViewState kan op Controls en op de Page directive. Als EnableViewState op de page uitstaat, dan overschrijft dat alle ChildControls ook op uit. Bij EnableViewState=false is er ook geen data meer beschikbaar bij een RoundTrip. ViewstateMode enabled/disabled is er ook, maar dan overschrijft de Page directive de Child Controls niet, maar definieert de Default. met Session staat de data in memory op de Server en gaat niet mee naar de Client, en is per gebruiker Sessie. Beinvloeden van de Sessie kan met SessionStart en SessionEnd in de Global.asax. Hierin levert de Application aanpassen een concurrency probleem op. Doe dan eerst Application.Lock(), en aan het einde een Application.Unlock(). SessionState mode=SQLServer zet de Session data niet in het geheugen van de web server, maar in een SQL server. de database aanmaken kan via de command line tool met aspnet_regsql. SessionState mode=StateServer zet de Session data niet in het geheugen van de web server, maar in het geheugen van een andere dedicated memory web server. Bij enableSessionState=false kun je de Sessie naar de Client niet gebruiken: er volgt dan een foutmelding. Application slaat de data op in web server memory en gaat ook niet naar de Client. en de context is niet per client, maar per application. Cache werkt net als Application, maar wordt geschoont en eventueel opnieuw gevuld, dit kan met: - dependencies, trigger als er iets verandert, bijvoorbeeld in een database tabel - absolute expiration, een einddatumtijd - sliding expiration, als een bepaalde tijd niet meer gebruikt is Application en Cache kun je beinvloeden met ApplicationStart en ApplicationEnd. ApplicationOnError is de laatste mogelijkheid tot error afhandeling van alle unhandled exceptions. Validation Controls zijn server side controls die javascript genereren op de Client. en Client side al de User Input Validatie doen. Vul de ControlToValidate property van de validationcontrol met de te controleren inputcontrol.

3 http://www.erwinvanbeveren.nl/

Data Management New Project > ADO.net Entity Data Model is ORM Object Relational Mapping op tables, views en stored procedures. Er komt een .edmx file bij waar het Entity Framework in staat. Pluralize en Singularize betekent Meervoud en Enkelvoud, oftewel de naamgeving van je business objecten neerzetten als: Persons en Person objecten. Linq: werkt op willekeurige collections, van het Entity Framework tot en met string[] arrays. Linq is querien op verzamelingen. Een voorbeeld is: var query = from C in contex.Customers select new {c.CustomerID, c.Firstname, c.Lastname} waarbij: - var is geen variant, maar een type, hier mag later geen ander type in - new {} is een anonymous class van het 'a type. hoeft geen class file te hebben. - context is het Entity Framework Linq biedt ook functies, zoals: First(), Take(), Skip(), TakeWhile(), enz. Met een GridView toon je een lijst, eventueel met Paging en Sorting. DataSource = data en Databind() vullen de lijst. Je kunt LinqDataSource (Linq queries op tabellen en enitities) en EntityDatasource (op entities) gebruiken om te querien bovenop het Entity Framework om data te ontsluiten. Beide Datasources kun je binden aan de Gridview / Detailsview / Chart controls, enz. met object.Dispose() verwijder je een object uit het geheugen met GC.Collect(); roep je de Garbage Collector aan om een rondje door alle objecten te maken. met een using blok dispose je het using object automatisch Lambda expressies (str => str.Length == 8) zijn korte functies. de => pijl is karakteristiek. Asp.net dynamic data entities web application project type genereert een gehele website met alle controls, datasources op basis van het entity framework. Wat je zelf nog moet doen is: 1. een Entity Framework database als basis selecteren en een Entity model maken 2. de RegisterContext uncommenten in de global.asax 3. in de global.asax met ScaffordAllTables=true bijvoorbeeld alle tabellen selecteren Debugging, Testing en Refactoring debuggen kan met breakpoints, breakpoints kunnen allerlei configuraties hebben, zoals Conditions. breakpoints werken ook in javascript. debuggen kun je aan en uit zetten in de web.config met
4 http://www.erwinvanbeveren.nl/

Test driven development betekent eerst de tests maken, dan pas de code. Unittesten is het testen van een class met een test unit class [testclass]. De namespace is Microsoft.VisualStudio.TestTools.UnitTesting. in VS2010 kan dit met Create Unittest. Deze functie maakt een testproject aan met een classtest behorende bij een class. met testmethoden met het [testmethod()] attribuut roep je dan de te testen class aan. hierbij definieer je de verwachte waarde en de te gebruiken te berekenen waarden. en die vergelijk je met de uitkomst met bijvoorbeeld Assert.IsEqual. Of dit klopt bepaald de test uitslag van deze testmethod. Loggen kan naar de Eventlog. Kijk eerst of de Eventlog.SourceExists voordat je een Eventlog.WriteEntry(“”) doet. Bestaat de eventlog source nog niet maak hem dan aan met: Eventlog.CreateEventSource(); Hier moeten wel afdoende rechten voor zijn voor het account waaronder de Web Application draait, en genoeg machtigingen in de registry voor het wegschrijven. Security Authenticatie = membership provider Authorisatie = role provider De onderliggende database van deze 2 providers kun je genereren vanuit visual studio. Je kunt bijvoorbeeld met de login controls die standaard meegegenereerd worden in een MVC project via de account controller een gebruiker registreren. Deze maakt dan standaard een aspnetDB.mdf en .ldf aan in de App_Data directory inclusief de gebruiker die je zojuist geregistreerd hebt. In Sql server kan ook. Genereer dan het datamodel met aspnet_regsql.exe in je sql server database en verwijs hiernaar vanuit je web.config van je web applicatie. Alle asp.net Login controls werken dan op die database voor de membership provider. dit is enkel authenticatie. Forms authentication met deze controls is altijd met cookies en de events van die controls doen niet altijd wat je verwacht. Schrijf anders je eigen controls op de 2 providers hun programmeer model. Onder Project > asp.net configuration krijg je web admin schermen voor de security van je web site. Deze schrijft dan de instellingen weg naar de web.config en de membership en role provider database. Hier kun je onder de security tab rollen aanmaken + reeds geregistreerde gebruikers aan die rollen hangen. Deze rollen afdwingen in C# code kan: - Declarative boven bijvoorbeeld een functiemember: [authorize(roles=””)] - Imperative in bijvoorbeeld een functiemember: this.user.IsInRole(“”); Ondersteund een web site meerdere bedrijven, dan moet het gehele eigen datamodel bedrijfsafhankelijk zijn. Daarnaast wil je deze koppelen met foreign keys met de membership en role provider database. Net zoals geslaagde betalingen en einddatum van abonnementen.

5 http://www.erwinvanbeveren.nl/

Master Pages Een master page deelt als je paginas in. een masterpage is niet apart te benaderen, alleen via een content.aspx pagina die naar hem verwijst. De masterpage site.master heeft een <%@ master directive, geen page. De masterpage heeft dan een html, head en body element, de content pages niet meer, deze worden bij runnen gemerged. Ook heeft de masterpage contentplaceholders, waarin later de content.aspx paginas komen. Alle geregistreerde css en javascript files in de masterpage zijn ook beschikbaar in alle onderliggende contentpages. Master pages kunnen genest zijn, er is dan ook een visual studio masterpage template en een nested masterpage template. Nested master pages worden gegenereerd met implementatie content blokken. Wil je dat de nested master page zelf ook het gedrag van een master page aanneemt, zet dan binnen de content blokken weer contentplaceholders. Je hebt in visual studio een webform.aspx template, deze genereert een .aspx pagina met alle html, head en body elementen. Ook heb je een webform usingmaster page .aspx template, deze genereert een .aspx pagina met contentplaceholders van je opgegeven masterpage. In een content.aspx pagina definieer je de masterpage in de page directive met masterpage="" In de content.aspx pagina bepaal je in welke contentplaceholder je content komt via een verwijzing met het contentplaceholderID. De mastertype directive, onder de page directive van de content.aspx pagina definieert een cast van de page.master property naar een specifieke masterpage. Je kunt ook zelf casten naar je specifieke masterpage. Met beide varianten zorg je ervoor dat de Page.Master wordt uitgerust met alle properties en methods die je zelf op de masterpage gemaakt hebt. In code wisselen van masterpage kan met page.masterpagefile = "volledig path + filename als string", maar kan niet in de page_load event, maar in de page_preinit event. load en init zijn te laat, dan is de content pagina al gemerged met de masterpage. Een style sheet beïnvloed centraal het gedrag van de style properties van meerdere pagina’s. Een .CSS file definieert de look & feel van HTML tags (h1, h2), CSS format dan al deze elementen. Maar kan ook CSS classes aanmaken met bijvoorbeeld .OKButton Per control kun je dan de property CSSClass zetten op .OKButton Een . is per class definitie, CSS format dan alle elementen met deze class definitie. #txtResult voorzien van look en feel is per control, CSS format dan alleen deze control. De prioriteit van # per control gaat voor een . per classname en weer voor een html tag definitie. CSS files worden gecached in de browser, dus doe CTRL F5 om te refreshen, om wijzigingen te zien. Met rechtermuis Build Style... binnen de CSS file krijg je een handig Modify Style Window. Skin files zijn voor server side controls en kunnen meer gedrag beïnvloeden dan alleen style properties in tegenstelling tot style sheets. Een skinfile.skin komt in een eigen skinnaam directory in een specifieke Theme directory in de App_Themes directory van de website. In de skin file kun je de complete definitie van een OK en Cancel Button plaatsen. In de content.aspx paginas zet je in de page directive de Theme="specifieke theme directory" en er is maar 1 theme per page mogelijk. Er zijn 2 typen skin’s: - named control skin: met de skinid voor 1 control. De skinid vervangt de id. - default skin per controltype: zonder id, zonder skinid, van toepassing op alle controls van dat Controltype

6 http://www.erwinvanbeveren.nl/

AJAX AJAX = Asynchrone Javascript And Xml ajax is niet de gehele pagina opnieuw opbouwen met html met server request response, maar alleen de data onderdelen updaten met XML of JSON De .Net server side control implementatie: - scriptmanager control definieren in de contentpagina.aspx om de .net javascript library te gebruiken - eronder een updatepanel met contenttemplate erin definieren. deze controls genereren client side javascript. - html refreshen is dan alleen binnen de updatepanel en niet de gehele pagina. dit kan met een submit click maar ook met een timer die polled. - er is geen WCF service nodig of .asmx web service - custom javascript meegeven kan ook binnen <script> tags. de javascript moet binnen de header staan. met een client side html input button onclick kun je dan deze custom javascript af laten gaan De javascript JSON implementatie: JSON betekent JavaScript Object Notation. Een JSON object is een efficientere XML data object format alle begin en close van html zijn bijvoorbeeld vervangen door :{} - De .asmx web service implementatie: * web service met [webmethod] * een webservice kan objecten teruggeven in JSON als er bovenop de class [scriptservice] gedefinieerd is EN de webservice door javascript wordt aangeroepen. - De WCF service implementatie: de ajax enabled WCF service met [servicecontract] en [operation contract] * voor een WCF service hoef je alleen data terug te geven met de JavascriptSerializer en de request en response format type op JSON te zetten. XML response wordt ook niet geaccepteerd door de aanroepende javascript. Aanroepen van een .asmx web service of WCF service kan door in de scriptmanager control een service reference aan te maken. en de service method aan te roepen in javascript. Let op javascript is asynchroon, dus definieer tevens een callback function (response) die de callback afvangt. daar kun je over de response waarden beschikken. De jQuery library 1.4 komt in visual studio automatisch mee met het project type Web Application. deze library wordt gebruikt ter ondersteuning van client side javascripting Met JQuery kun je ook services aanroepen: met $.ajax({type: "POSt", url: "", data: request, succes: function(result)}); $ betekent jquery JQuery implementeert ook events, bijvoorbeeld: ajaxStart, ajaxCompleted en ajaxError. De MVC implementatie: met jquery een Load aanroepen op een server side controller action aanroepen (zonder services en zonder asp.net controls). De server side method levert een MVC view op wat html is. De eigen implementatie: Met JQuery een Load aanroepen op een server side C# method aanroepen (zonder services en zonder asp.net controls). De server side method levert html op

7 http://www.erwinvanbeveren.nl/

Deployment Web site - copy web site tool: als ftp tool bestanden kopieren - Web setup project: MSI maken op basis van de web project output, alleen content - Publish Web in visual studio: builden en kopieren - Build Deployment Package: maakt een gecompileerde website in een .zip file in de obj directory Web application - Web setup project: MSI maken op basis van de web project output - Publish Web in visual studio: builden en kopieren hier kun je profielen en de web.debug.config en de web.release.config voor gebruiken - Build Deployment Package: maakt een gecompileerde website in een .zip file in de obj directory Silverlight Silverlight is de web implementatie van WPF Windows Presentation Foundation en werkt niet met de default.aspx, maar met de MainPage.XAML. Het pakket Expression Studio, met de Blend applicatie. Die saven op een geavanceerde manier XAML. XAML is de vervanging van HTML en is veel rijker aan desing mogelijkheden. Designers werken met Expression Blend, developers werken met Visual Studio 2010, beide werken samen met XAML. Silverlight is een plugin installatie in je browser op C# te kunnen programmeren client side. Als concurrent van Flash en Javascript. Database data ophalen moet met een Silverlight WCF service, omdat er ook geen roundtrips zijn. Silverlight heeft eigen project types. Een WPF browser application compiled in een .Xbap file en een .Exe. dit zijn losse files die meteen openen in je browser, zonder IIS.

8 http://www.erwinvanbeveren.nl/