Powerful asp.net 4 e ie9

Powerful ASP.NET 4.0
&
Internet Explorer 9
Benedetti Stefano

Contatti
Ing. Stefano Benedetti
http://www.be-st.it
http://blog.be-st.it
info@be-st.it
http://dotdotnet.org/
Lo User Group dell'Emilia-Romagna
interamente 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:WindowsSystem32inetsrvconfig)
<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 301
Found 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!!!

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

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=s
cott%>“>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
• ListView (1 solo campo concatenato)
ClientIDRowSuffix = "ProductId“
id = rootPanel_GridView1_ProductNameLabel
• Repeater (non applicabile, appende il
RowIndex): Repeater1_ProductNameLabel
• 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(expre
ssion) %>
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

controlRendering
CompatibilityVersion
• 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"
>Test</span>
• 4.0
<span id="Span1"
>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

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

Performance
• Accelerazione tramite GPU
• Nuovo engine Javascript “Chakra”
– Multi core background compilation

Accelerazione tramite GPU
• <canvas>
• <video>
• <audio>
• CSS3
• SVG 1.1
• Web fonts

Riferimenti ASP.Net
• ASP.NET 4.0
http://www.asp.net/learn/whitepapers/aspnet4
http://weblogs.asp.net/Scottgu/
• Internet Information Service
http://www.iis.net/download/applicationwarmup
http://learn.iis.net/page.aspx/124/introduction-to-
applicationhostconfig/
• CDN
http://www.asp.net/ajaxlibrary/CDN.ashx

Riferimenti ASP.Net
• Chart controls
Microsoft Chart Controls Samples
http://go.microsoft.com/fwlink/?LinkId=1283
00
• XSS: http://msdn.microsoft.com/en-
us/library/ff649310.aspx

Riferimenti IE9
Internet Explorer Developer Center on MSDN
http://msdn.com/ie
Windows User Experience Interaction Guidelines
http://msdn.microsoft.com/en-us/library/aa511446.aspx
Channel 9 Taskbar related videos
http://channel9.msdn.com/tags/Taskbar/
http://channel9.msdn.com/Search/?Term=taskbar
Icon Guidelines
http://msdn.microsoft.com/en-us/library/aa511280.aspx

Powerful asp.net 4 e ie9

More Related Content

What's hot (19)

Viewers also liked (8)

Similar to Powerful asp.net 4 e ie9 (20)

Powerful asp.net 4 e ie9