Powerful ASP.NET 4.0 &

Internet Explorer 9

Benedetti Stefano

Contatti

Ing. Stefano Benedetti

http://www.be-st.ithttp://blog.be-st.itinfo@be-st.it

http://dotdotnet.org/

Lo User Group dell'Emilia-Romagnainteramente dedicato alle tecnologie Microsoft .NET

ASP.Net 4

• What’s new?– Niente (?)

• Powerful ASP.Net– Performance– Productivity– SEO– Cura per la “Lazy Dev Syndrome”

Session roadmap

• Core services• AJAX• Web forms• Visual Studio 2010 Web Development

Improvements• Web Application Deployment• Internet Explorer 9

Core services– Web.config File Refactoring – Extensible Output Caching – Auto-Start Web Applications – Permanently Redirecting a Page – Shrinking Session State – Expanding the Range of Allowable URLs – Extensible Request Validation – Object Caching and Object Caching Extensibility – Extensible HTML, URL, and HTTP Header Encoding – Performance Monitoring for Individual Applications in

a Single Worker Process – Multi-Targeting

Web.config File Refactoring

 <?xml version="1.0"?> <configuration>

<system.web> <compilation targetFramework="4.0" /> </system.web>

</configuration>

Auto-Start Web Applications 

• Impostare l’application pool da caricare nel file applicationHost.config(C:\Windows\System32\inetsrv\config\)

<applicationpools> <add name="MyApplicationPool"

startMode="AlwaysRunning" /> </applicationpools>

Auto-Start Web Applications 

• Alternativa:IIS Application Warm-Up Module for IIS 7.5 (beta)

Permanently Redirecting a Page

3.5• Response.Redirect

("/newpath/content.aspx)

4.0• RedirectPermanent

("/newpath/content.aspx");

HTTP 302 Found (temporary redirect)

HTTP 301Found Moved Permanently

Shrinking Session State 

• Session e Web farm: 2 opzioni di storage– Session-state server– SQL Server

• In entrambi i casi la sessione viene serializzata

• Le sessioni occupano spazio. Quindi?• Non utilizzare le sessioni nelle applicazioni

web!!– Il Web è stateless

• Se proprio dovete…

Shrinking Session State 

• Nuovo attributo: compressionEnabled• <sessionState mode="SqlServer"

sqlConnectionString="data source=dbserver;Initial Catalog=aspnetstate" allowCustomSqlDatabase="true" compressionEnabled="true" />

• Completamente trasparente• Utilizza

System.IO.Compression.GZipStream 

Session roadmap

• Core services• AJAX• Web forms• Visual Studio 2010 Web Development

Improvements• Web Application Deployment

AJAX

• jQuery out of the box• Content Delivery Network Support• ScriptManager Explicit Scripts

jQuery out of the box

• I template per le web forms e per MVC comprendono già la libreria open-source jQuery

• Script folder– jQuery-1.4.1.js (165kb)– jQuery-1.4.1.min.js (71kb)– jQuery-1.4.1-vsdoc.js

• Usare la versione js in ambiente di dev• Usare min.js in produzione!!!

AJAX :: CDN Support

• Performance• Il contenuto delle CDN è in cache in

varie parti del mondo• L’utilizzo degli scripts sulla CDN

consente ai browser di riutilizzare i JavaScript anche su diversi web sites

• Risparmio di banda sui nostri server!!! Paga MS

• Supporta SSL

AJAX :: CDN Support

• Librerie incluse:• jQuery• jQuery Validation• Ajax Control Toolkit• ASP.NET Ajax• ASP.NET MVC JavaScript Files 

AJAX :: ScriptManager

• Lo ScriptManager supporta la CDN semplicemente impostando la proprietà EnableCdn

• <asp:ScriptManager ID="sm1" EnableCdn="true" runat="server" />

• Tutti i JS del framework ASP.NET (compresi validation e UpdatePanel)

• Performance!!

ScriptManager Explicit Scripts

• Ieri veniva caricata tutta la libreria• Oggi: AjaxFrameworkMode property

– Enabled: tutta la library (legacy behavior)

– Disabled: Ajax disabilitato/nessuno script

– Explict: selezione esplicita delle librerie core

• NB: compilation debug=“true” carica le library di debug!!!

Session roadmap

• Core services• AJAX• Web forms• Visual Studio 2010 Web Development

Improvements• Web Application Deployment

Web Forms• Setting Meta Tags with the Page.MetaKeywords and Page.MetaDescription

Properties • Enabling View State for Individual Controls • Changes to Browser Capabilities • Routing in ASP.NET 4 • Setting Client IDs • Persisting Row Selection in Data Controls • ASP.NET Chart Control • Filtering Data with the QueryExtender Control • Html Encoded Code Expressions • Project Template Changes • CSS Improvements • Hiding div Elements Around Hidden Fields • Rendering an Outer Table for Templated Controls • ListView Control Enhancements • CheckBoxList and RadioButtonList Control Enhancements • Menu Control Improvements • Wizard and CreateUserWizard

Nuove Meta Tags properties

• Nuove property nella classe Page– Page.MetaKeywords– Page.MetaDescription

• Operano sui tag:– <meta name="keywords"

content="These, are, my, keywords" />– <meta name="description"

content="This is the description of my page" />

Nuove Meta Tags property• Funzionano come Page.Title

– Non esistono i meta tag nella sezione head => Add– Esistono già i meta tag nella sezione head =>

Get/Set

• Impostabili in maniera dichiarativa nella direttiva Page (override degli eventuali tag meta)<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Keywords="These, are, my, keywords" Description="This is a description" %>

ViewState 3.5• Il viewstate a default è abilitato per tutta la

pagina• Aumenta le dimensioni della pagina e i

tempi di caricamento• E’ possibile disabilitarlo per l’intera pagina

(ma così ogni controllo non ha il viewstate)• Oppure abilitarlo ma è necessario

disabilitare ogni singolo controllo

Soluzione: tutti lasciano il ViewState abilitato

ViewState 4.0• Nuova property ViewStateMode nei WebControls• Enumerato: Enabled, Disabled, e Inherit• Si può settare in maniera dichiarativa nella

direttiva @Page (anche Page è un WebControl)• Valido solo se EnableViewState=true, altrimenti

viene ignorato• Tip: settare ViewStateMode = Disabled nella

master page e abilitarlo solo per i controlli che ne hanno bisogno (o per i ContentPlaceHolder che lo utilizzano)

• Ancora più drastico: disabilitarlo da web.config

Routing

• Fondamentale nel SEO, in MVC e REST• http://website/products.aspx?

categoryid=12• http://website/products/software• Presente da ASP.NET 3.5 SP1• Built-in nella versione 4.0

Routing: nuove feature

• PageRouteHandler• HttpRequest.RequestContext e

Page.RouteData• Nuovi expression builder

– RouteUrl– RouteValue– RouteParameter

Accesso ai parametri da codice

• HttpRequest.RequestContext e Page.RouteData(Page.RouteData è un wrapper di HttpRequest.RequestContext.RouteData)

• Demo: Search

Accesso ai parametri da markup

• RouteUrl expression<asp:HyperLink ID="HyperLink1“

NavigateUrl="<%$RouteUrl:SearchTerm=scott%>“>Search for Scott

</asp:HyperLink>• Genera il markup:

http://<website>/search/scott• Demo: RouteUrl

Accesso ai parametri da markup

• Per leggere i parametri si usa la property RouteValue

• <asp:Label ID="Label1" runat="server" Text="<%$RouteValue:SearchTerm%>" />

• Demo: Search

RouteData come parametri• I Route Data possono essere utilizzati come

markup direttamente nei controlli DataSource• <asp:sqldatasource id="SqlDataSource1"

selectcommand="SELECT CompanyName,ShipperID FROM Shippers where CompanyName=@companyname“>

<selectparameters><asp:routeparameter

name="companyname" RouteKey="searchterm" />

</selectparameters></asp:sqldatasource>

ClientID 3.5• L’attributo id di ogni WebControl è generato a

runtime• Ne viene garantita l’univocità ma non è

predittivo• Fondamentale per l’accesso client ai controlli• WebControl

– Id= [NamingContainer_]id

• Controlli “repeater”– Id =

<prefix>_NamingContainer_id_<SequentialNumber>

• Accesso tramite la property ClientID

ClientID 4.0

• ClientIDMode– AutoID– Static– Predictable– Inherit

• Page level (default AutoID)• Control level (default Inherit)• Quindi a default tutti i controlli hanno

il comportamento legacy

ClientIDMode AutoID• Comportamento legacy• WebControl

– Id= [NamingContainer_]id

• Controlli “repeater”– Id =

<prefix>_NamingContainer_id_<SequentialNumber>

ClientIDMode Static

• Il ClientID è lo stesso dell’ID lato server

• Non viene concatenato nessun parent naming container

• Utile per i Web user control che possono essere posizionati in diverse pagine e differenti controlli quindi l’AutoID è completamente non predicibile

ClientIDMode Predictable

• L’uso principale è nei controlli “repeater”• Concatena l’ID con il naming container

ma senza “ctlxxx”• Si combina con la property

ClientIDRowSuffix– Si imposta col nome di un data field– Tipicamente la chiave primaria– Il valore viene usato come suffisso– Il repeater non la utilizza ma imposta il

RowIndex come suffix

DataBound controls• Gridview (1 o più campi concatenati)

ClientIDRowSuffix = "ProductName, ProductId“id = rootPanel_GridView1_ProductNameLabel_W7_1

• ListView (1 solo campo concatenato)ClientIDRowSuffix = "ProductId“id = rootPanel_GridView1_ProductNameLabel_1

• Repeater (non applicabile, appende il RowIndex): Repeater1_ProductNameLabel_0

• FormView e DetailsView non sono multiriga

ClientID: univocità!

• NB: è compito dello sviluppatore garantire che l’id generato sia univoco

• Senza univocità molto probabilmente ci saranno problemi con tutte le funzionalità che la richiedono come ad esempio la funzione client document.getElementById

Persisting row selection

3.5

• nei controlli databound la selezione viene fatta in base al numero di riga e salvata attraverso le pagine

• Ad esempio selezionando la riga 2 nella prima pagina e cambiando pagina viene sempre selezionata la riga 2

4.0

• nuova property EnablePersistedSelection

• La riga viene selezionata in base alla Data Key

• Obbligatoria la property DataKeyNames

Chart Control

• 35 tipi di grafici• Grafici 3D• Più di 50 formule finanziarie e

statistiche• Data binding• Supporto per formati quali data, ora e

currency• Interattività, gestione eventi e

supporto Ajax

Chart Control• Introdotti come add-on per il

framework 3.5 sp1• Integrati nel framework 4.0• Esempi:

– Samples Environment for Microsoft Chart Controls(http://go.microsoft.com/fwlink/?LinkId=128300)

Html Encoded Code Expressions

3.5

• <%= expression %>• Se non si fa esplicitamente

l’encoding si rischiano gli attacchi XSS:

• <%= HttpUtility.HtmlEncode(expression) %>

4.0

• Nuova sintassi<%: expression %>

CSS e rendering improvements

• Nuovo motore di rendering dei Web Control• Obiettivo: standard HTML• Controllato da

controlRenderingCompatibilityVersion<system.web><pages

controlRenderingCompatibilityVersion="3.5|4.0"/>

</system.web> • Default 4.0 nel machine.config per i

progetti su framework 4.0

controlRenderingCompatibilityVersion

• 3.5: comportamento legacy, 100% backward compatible e utilizza xhtmlConformance– CSS Friendly Adapters

http://www.asp.net/cssadapters/

• 4.0– xhtmlConformance=Strict a default (XHTML 1.0 strict)– Disable sui controlli non input non genera stili invalidi– Stili per i div attorno agli elementi hidden– Menù renderizzati tramite ul/li– I validation control non generano inline styles– Image e Table non generano più l’attributo border=0

Disable sui controlli non input

• <asp:Label id="Label" runat="server" Text="Test" Enabled="false">

• 3.5<span id="Label1" disabled="disabled">Test</span>

• 4.0<span id="Span1" class="aspnetdisabled">Test</span>

Elementi hidden e div

• 3.5– Gli elementi hidden (ad es. ViewState)

contenuti in un DIV (standard XHTML)– Problemi se i CSS utilizzano i DIV

• 4.0– Aggiunge una class CSS

<div class="aspNetHidden">...</div>

Controlli template e tabelle

• 3.5: Viene generata una tabella esterna– FormView– Login– PasswordRecovery– ChangePassword– Wizard– CreateUserWizard

Controlli template e tabelle

• 4.0: Nuova property RenderOuterTable – Non viene più generata la tabella esterna (table,

tr e td tag rimossi)

Menù

• 3.5 gestito tramite una serie di tabelle• 4.0 renderizzato tramite ul/li• Demo: Menu40

Image e Validator

• 3.5– il controllo Image genera un inline style con

border “0”– Anche i controlli validator generano degli

inline styles

• 4.0 rimossi gli inline styles• Demo: Others

CheckList e RadioButtonList

• 3.5– RepeatLayout: Flow (span) e Table (table)

• 4.0– Nuove opzioni:

• OrdererdList => li• UnorderedList => ul

• Demo: Others

Visual Studio 2010 Web Development Improvements

• Migliorata la compatibilità dei CSS con gli standard 2.1

• HTML e JavaScript Snippets• JavaScript IntelliSense Enhancements

HTML e JavaScript Snippets

• Auto-complete dei tag nell’editor HTML

• Snippet per JavaScript• Snippet per i controlli ASP.NET• Gli snippet forniscono gli attributi

obbligatori (ID, DataSourceID, ControlToValidate, Text…)

• Download di nuovi snippets• Creazione di nuovi snippets

JavaScript IntelliSense• Riconosce oggetti generati dinamicamente

(ad esempio registerNamespace)• Miglioramenti alla performance nell’analisi

di grosse librerie• Maggiore compatibilità con third-party

libraries• I commenti al codice sono dinamicamente

aggiunti all’IntelliSense

Web Application Deployment with Visual Studio 2010

• Web Packaging• Web.config Transformation• Database Deployment• One-Click Publish per le Web Applications

Web config transformation

• Web.config trasformabile tramite XML Document Transform

• Versioni diverse per dev, production• Production = compilation

debug=false!!

Internet Explorer 9

• HTML 5 (draft!)• Performance• CSS3 (draft!)• Supporto SVG• Pinned sites

HTML 5

• DRAFT!• Canvas• Nuovi tag

– Audio– Video– Semantic tags

• Client side storage• Scalable Vector Graphics

HTML 5 intellisense• https://blogs.msdn.com/b/pietrobr/archive/2010/06/11/visual-studio-2010-e-

html-5-intellisense.aspx

Canvas

• Area per disegnare “al volo”• L’output generato è una bitmap• Non è modificabile ma deve essere

ridisegnato completamente• I comandi grafici sono inviati

direttamente alla GPU

Canvas

<canvas id="myCanvas" width="200" height="200"> Your browser doesn’t support Canvas, sorry.</canvas>

<script type="text/javascript"> var example = document.getElementById("myCanvas"); var context = example.getContext("2d"); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50); </script>

<video>

• È un tag html– Formato MPEG-4/H.264 video– Accelerazione hardware basata sulla GPU

• Attributi• src• autoplay• controls• preload• loop• height & width

<audio>

• Come il video anche l’audio è un semplice tag HTML– Formato: MP3 and AAC audio

• Attributi– src– autoplay– controls– preload

Client side storage

• String based key-value pair– Session storage– Local storage

• Maggiore spazio dei cookie• Non invia dati al server ad ogni

richiesta come i cookie

Session storage

• sessionStorage.setItem('fullname', ‘Rossi Mario');

• alert(“Ti chiami: " + sessionStorage.getItem('fullname'));

• alert(“Ciao " + sessionStorage.fullname);

• sessionStorage.removeItem('fullname');

Local storage

• localStorage.setItem('fullname', ‘Rossi Mario');

• alert(“Ti chiami: " + localStorage.getItem('fullname'));

• alert(“Ciao " + localStorage.fullname);

• localStorage.removeItem('fullname');

Supporto SVG

• Disegno vettoriale 2D tramite XML• Shapes

– rect– circle– ellipse– line– polyline– polygon

Supporto SVG

Semantic tags

• Un semantic tag è un tag il cui nome descrive il contenuto senza aver un particolare comportamento

• Nuovi tag– section– nav– article– aside– hgroup– header– footer– figure– figcaption– mark

Layout classico

Header

Footer

Sidebar

Menu

Contenuti Un struttura tipica contiene:<div id=“header”>….

<div id=“menu”>…

<div id=“sidebar”>…

<div id=“content”>…

<div id=“footer”>…

Semantic tags

• <header>

• <nav> (menu di navigazione)

• <aside> (sidebar)

• <section> … <article> …

• <footer>

• E nuovi relation (rel) (archives, pingback, icon, etc);

Developer tools (aka F12)

• Interfaccia visuale integrata per l’accesso a– HTML, CSS, DOM– Javascript Debugging– Javascript Profiling– Compatibilità dei siti con IE9– Network Tab

• Traccia tutte le richieste uscenti dalla pagina e le relative risposte

• Informazioni sintetiche• Informazioni di dettaglio

Network Tab

Javascript Profiling

Network Tab Summary View

Network Tab Detail View

Performance

• Accelerazione tramite GPU• Nuovo engine Javascript “Chakra”

– Multi core background compilation

Nuovo engine Javascript

Accelerazione tramite GPU

• <canvas>• <video>• <audio>• CSS3• SVG 1.1• Web fonts

Pinning

Pinning: Thumbnails Buttons

Riferimenti ASP.Net• ASP.NET 4.0

http://www.asp.net/learn/whitepapers/aspnet4http://weblogs.asp.net/Scottgu/

• Internet Information Servicehttp://www.iis.net/download/applicationwarmuphttp://learn.iis.net/page.aspx/124/introduction-to-applicationhostconfig/

• CDNhttp://www.asp.net/ajaxlibrary/CDN.ashx

Riferimenti ASP.Net• Chart controls

Microsoft Chart Controls Sampleshttp://go.microsoft.com/fwlink/?LinkId=128300

• XSS: http://msdn.microsoft.com/en-us/library/ff649310.aspx

Riferimenti IE9Internet Explorer Developer Center on MSDNhttp://msdn.com/ie

Windows User Experience Interaction Guidelineshttp://msdn.microsoft.com/en-us/library/aa511446.aspx

Channel 9 Taskbar related videoshttp://channel9.msdn.com/tags/Taskbar/ http://channel9.msdn.com/Search/?Term=taskbar

Icon Guidelineshttp://msdn.microsoft.com/en-us/library/aa511280.aspx

That’s all folks

Domande?