ASP.NET Basics 1
ASP.NET Web forms 2
Geschiedenis ASP = Active Server Pages Draait enkel op Internet Information Services (IIS) Standaard ingebakken in een Windows-besturingssysteem Code-beside-model C# of VB.NET jaren 90 2001 NU (MVC) 3
ASP.NET sterktes Server beheert en compileert code Thin-client, thick-server model Minimaal netwerk verkeer Server doet al het werk Server heeft alle benodigde libraries (vertrouwen) Bescherming van de intellectuele eigendom (compilatie methode) Nadeel: veel werk voor de server, maar: caching! 4
ASP.NET page life cycle www.mijndotnetapplicatie.net 1. Browser stuurt HTTP-request 2. Server ontwaakt en analyseert request van de browser (type, cookies, ) 3. Server laadt applicatie en zoekt de gevraagde pagina 4. Server compileert code (alleen eerste keer) en voert uit 5. HTML-document klaar (.NET runtime) 6. HTTP-response met pagina naar de browser 7. Browser parst HTML (en JavaScript) + geeft weer 5
ASP.NET page life cycle http://planetofcoders.com 6
ASP.NET page life cycle Wat gebeurt er op niveau van code (page call): 1. Alle controls uit aspx pagina aanmaken 2. Page_Init uitvoeren 3. Waarden uit viewstate instellen 4. Page_Load uitvoeren 5. Server events als clicks e.d. uitvoeren 6. Page_Prerender uitvoeren 7. Content naar de browser sturen 8. Page_Unload uitvoeren 7
// all controls are loaded // this is the place to initialize them for the first time use void Page_Init(Object sender, EventArgs e) {... } // viewstate and postback data were processed, overwriting // initial values; you can make changes to values here void Page_Load(Object sender, EventArgs e) {... } // server events were processed, overwriting loaded values // you can make final changes to values here void Page_PreRender(Object sender, EventArgs e) { lblmessage.text += "<br />name is " + TextBox1.Text; }... Page life cycle voorbeeld 8
... // content is already sent to the browser with new viewstate // any extra changes to controls are lost void Page_Unload(Object sender, EventArgs e) { } protected void Button2_Click(object sender, EventArgs e) { TextBox1.Text = "Bob"; } Page life cycle voorbeeld 9
Option1: New website 10
Option 2: New project 11
ASP.NET bestanden.aspx.cs web.config Configuratiebestand voor de applicatie.css Global.asax Application_Start Session_Start App_data App_code Site.Master 12
ASP.NET pagina opbouw Directive page omschrijft hoe de pagina dient uitgevoerd te worden CodeBehind: naam v.h. bestand waar de code staat die bij deze pagina hoort. Inherits: naam van de namespace en de class in het codebestand AutoEventWireup: true? De events worden automatisch gevonden mits standaard namen bv. btn_click; false? Dan kan je zelf namen bedenken voor de page en control events. 13
ASP.NET pagina opbouw Source view Design view Split view Alles wat een actie vereist altijd tussen een <form > tag! 14
Compilatie ASP.NET gebruikt gecompileerde code 1. C# code op de server. 2. Bij de eerste aanroep -> vertaald naar (IL) Intermediate Language -> opgeslagen als een reeks DLL s. 3. De CLR (Common Language Runtime) vertaalt de IL tot machinecode. Dit alles gebeurt JIT. 15
Postback = terugsturen van de browser naar de server protected void Page_Load(object sender, EventArgs e) { if(page.ispostback) { Response.Write("herhaal de aanvraag"); } else { Response.Write("eerste aanvraag"); } } Postback 16
ASP.NET Controls 17
Zuivere HTML pagina <!DOCTYPE html> <html> <body> <form action="#" method="post"> <p> <label for="username">username:</label><br /> <input name="username" id="username" size="30" type="text" /> </p> <p> <label for="comments">comments:</label><br /> <textarea cols="60" name="comments" id="comments" rows="10"> </textarea> </p> <p> <input type="submit" value="add Comment" /> </p> </form> </body> </html> 18
<%@ Page Language="C#" %> <!DOCTYPE html> <html> <body> <form runat="server"> <p> <label for="username">username:</label><br /> <input id="username" type="text" size="30" runat="server" /> </p> <p> <label for="comments">comments:</label><br /> <textarea cols="60 id="comments" rows="10" runat="server"> </textarea> </p> <p> <input type="submit" value="add Comment" runat="server" /> </p> </form> </body> </html> ASP.NET HTML controls 19
<%@ Page Language="C#" %> <!DOCTYPE html> <html> <body> <form runat="server"> <p> <asp:label ID="lblUsername" runat="server" >Username:</asp:Label> <asp:textbox ID="username" Columns="30" runat="server"> </asp:textbox> </p> <p> <asp:label ID="lblComments" runat="server">comments:</asp:label> <asp:textbox ID="comments" TextMode="MultiLine" Columns="60 Rows="10" runat="server"></asp:textbox> </p> <p> <asp:button ID="btnSubmit" runat="server" Text="Button /> </p> </form> </body> </html> ASP.NET Web controls 20
21
Basis servercontrols Label Textbox Button Checkbox en CheckBoxList RadioButton en RadioButtonList Hyperlink Linkbutton Image Literal Listbox DropDownList ImageButton Panel BulletedList 22
Basis servercontrols - ASPX 23
Basis servercontrols - Browser 24
Basis servercontrols Inspect element 25
Basis servercontrols - Events 26
Basic servercontrols - Code behind 27
Basic servercontrols - Events 28
Geavanceerde servercontrols Calendar ImageMap FileUpload AdRotator XML PlaceHolder Multiview Wizard 29
ASP.NET Validatie 30
Validatie Waarom ook alweer? Om het ontbreken van verplichte data tegen te gaan. Vergissingen van gebruikers tegengaan (bv. geboortedatum in de toekomst) Gebruik van ongeldige tekens vermijden (bv. Email) Te lange of te korte invoer controleren (bv. Telefoonnummer) Kwaadaardige code injecties tegengaan (SQL, JavaScript) 31
Validatie ASP.NET maakt validatie eenvoudig door: validationcontrols. Zowel client-side als server-side validatie. Klik op submit maakt de controls automatisch actief. 32
Validatie - controls CompareValidator CustomValidator RangeValidator RegularExpressionValidator RequiredFieldValidator ValidationSummary 33
Validatie controls - properties EnableClientScript: zorgt voor validatie zowel op client als op server. ControlToValidate: De naam (ID) van de control die u wilt valideren. ErrorMessage: foutmelding die zal weergegeven worden. Text: de tekst die on load zal weergegeven worden. Display: static of dynamic. Kies Dynamic (Lay-out gewijs) 34
Validatie: examples <asp:textbox ID="txtName" runat="server" CssClass="txtbox"></asp:TextBox> <asp:requiredfieldvalidator ID="rfvName" ControlToValidate="txtName" runat="server" ErrorMessage="Gelieve een naam in te vullen Display="Dynamic"> </asp:requiredfieldvalidator> <asp:textbox ID="txtEmail" runat="server"></asp:textbox> <asp:regularexpressionvalidator ID="rfvEmail" runat="server" ControlToValidate="txtEmail" ErrorMessage="Gelieve een correct mailadres in te vullen" Display="Dynamic ValidationExpression="^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA- Z]{2,9})$"</asp:RegularExpressionValidator> <asp:textbox ID="txtAge" runat="server"></asp:textbox> <asp:rangevalidator ID="rvAge" runat="server" ControlToValidate="txtAge" ErrorMessage="Vul een correcte leeftijd in" Display="Dynamic" Type="Integer" MinimumValue="1" MaximumValue="99"> </asp:rangevalidator> 35
Validatie: examples <asp:dropdownlist ID="ddlColor" runat="server"> <asp:listitem Text="Kies een kleur" Value="" /> <asp:listitem Text="Rood" Value="Red" /> <asp:listitem Text="Groen" Value="Green" /> <asp:listitem Text="Blauw" Value="Blue" /> </asp:dropdownlist> <asp:requiredfieldvalidator ID="rfvColor" ControlToValidate="ddlColor" runat="server" ErrorMessage="Gelieve een kleur te selecteren" Display="Dynamic"> </asp:requiredfieldvalidator> 36
Validator code behind In sommige gevallen is het handig validators te voorzien van bepaalde eigenschappen tijdens runtime. //Validators tijdens runtime aanspreken foreach(basevalidator bv in Page.Validators) { bv.enableclientscript = false; } 37
Validatie Good to know Deze manier van valideren is in.net frameworks > 4.5 bijgewerkt. Om Validation Controls toch te gebruiken (client en server side) plak je onderstaande configuratie in je web.config. <appsettings> <add key="validationsettings:unobtrusivevalidationmode" value="none" /> </appsettings> 38
ASP.NET Layout 39
Lay-out - Masterpage Consistente lay-out voor de hele website. Elementen die op elke pagina dezelfde opmaak hebben. Eens gedefinieerd makkelijk toepasbaar op elke pagina. Nooit op te vragen in de browser (samengevoegd on runtime). 40
Lay-out - Masterpage Masterpage heeft extentie.master en bevat standaard 2 ContentPlaceHolders. Via de toolbox kan je er makkelijk meerdere toevoegen. 41
Lay-out - Masterpage <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <asp:contentplaceholder ID="head" runat="server"> </asp:contentplaceholder> </head> <body> <form id="form1" runat="server"> <div> <asp:contentplaceholder ID="MainContent" runat="server"> </asp:contentplaceholder> </div> </form> </body> </html> 42
Lay-out - Masterpage Hoe wijzig ik een element op mijn masterpage vanuit mijn codebehind van een aspx pagina? // element op mijn masterpage wijzigen Label lbl = Master.FindControl("lblFooter") as Label; lbl.text = "Aangepaste footer tekst"; 43
ASP.NET Foutpagina s 44
Foutpagina s - IIS Serverniveau: deze instellingen gelden voor alle sites. Siteniveau: geldig voor alle applicaties binnen de site. Applicatie niveau: alleen geldig voor de huidige applicatie. Bv. web.config aanpassen naar alternative fout pagina s: <system.web> <customerrors mode="on" defaultredirect="customerror.aspx"> <error statuscode="404" redirect="pagenotfound.aspx"/> </customerrors> <compilation debug="true" targetframework="4.6"/> <httpruntime targetframework="4.6"/> </system.web> 45
Foutpagina s - applicatie Fouten op verschillende niveau s afvangen: Codeniveau: try-catch statement gebruiken Paginaniveau: Fouten die optreden binnen een try-blok gebruik van Page_Error protected void Page_Error(object sender, System.EventArgs e) { Exception ex = Server.GetLastError(); // doe iets met de foutmelding die in ex zit Server.ClearError(); } 46
Foutpagina s - applicatie Fouten op verschillende niveau s afvangen: Applicatieniveau: elke pagina dient niet afzonderlijk geregeld te worden Global.asax via de Application_Error methode 47
ASP.NET Datalaag 48
3-tier-model Presentatielaag: de pagina s (ASPX) en code die daar direct achter zit. Deze code bepaalt de gebruikersinterface en zorgt voor de validatie van gebruikersinvoer Businesslaag: bestaat uit een reeks classes die bepaalde handelingen uitvoeren met ingevoerde data alvorens weg te schrijven naar de DB. Datalaag: bevat code die gegevens uit de database ophaalt en bewerkingen op diezelfde database uitvoert. 49
3-tier-model Presentatielaag Businesslaag Datalaag 50
Database Microsoft SQL server Express (gratis versie) Developer (MSDNAA) Beheer SQL server management studio Visual studio (beperkt) 51
Connectie en datatypes <add name="id146074_faklconnectionstring" connectionstring="data Source=mssql005.hosting.combell.com; Initial Catalog=XXXX_fakl;Persist Security Info=True;User ID=XXXX_fakl;Password=XXXXXX" providername="system.data.sqlclient" />.NET bool string byte short int long decimal float datetime SQL server bit char, nchar, varchar of nvarchar tinyint smallint int bigint smallmoney, money, decimal float datetime, date, time 52
Database benaderen ADO.NET Typed Datasets Datasource-controls LINQ Entity Framework (ORM) Dynamic Data 53
Linq-to-sql De kracht van LINQ: De laag met classes wordt automatisch gemaakt. Er zijn geen SQL-statements meer nodig; die genereert LINQ on runtime, on the fly. Een nieuwe querytaal staat ter beschikking om data uit een objectenhiërarchie op te halen. (non-sql-related) 54
LINQ var query = from c in custs from o in orders where o.customer == c.name select new{ c.name, o.orderid, o.amount, c.age }; 55
<asp:gridview runat="server" ID="addressGrid" AutoGenerateColumns="false"> <Columns> <asp:boundfield DataField="name" HeaderText="Naam" /> Data- Gridview - ASPX <asp:templatefield HeaderText="Email"> <ItemTemplate> <asp:label ID="email" runat="server" Text='<%# Eval("email") %>'></asp:label> </ItemTemplate> </asp:templatefield> <asp:templatefield HeaderText="Selecteer"> <ItemTemplate> <asp:checkbox ID="chkRow" runat="server" /> </ItemTemplate> </asp:templatefield> <asp:buttonfield ButtonType="Button" ControlStyle-CssClass="btn btn-info" CommandName="btnDelete" Text="verwijder" /> </Columns> </asp:gridview> 56
Data- Gridview Code behind protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { using (AddressbookDataContext db = new AddressbookDataContext()) { addressgrid.datasource = db.users.tolist(); addressgrid.databind(); } } } 57
IIS 58
IIS Internet Information Services (IIS) is te installeren via Windowsonderdelen in- of uitschakelen. De IIS versie is afhankelijk van de geïnstalleerde Windows Versie. Windows 10 = IIS versie 10.0 59
IIS application pool Application pool is een soort ruimte die IIS creëert rond een webapplicatie of een aantal webapplicaties. Een pool draait onder een bepaalde Windows-account. Zorgt voor fault insulation. 60
IIS - deployment Geplaatst in de wwwroot Geconverteerd naar een application Pass-through authentication onder een Windows-account ingesteld. 61
Website panel http://webpanel.ikdoeict.be Gratis.NET webspace voor de studenten 3ICT. FTP upload MSSQL DB s + meerdere gebruikers 62