Powerful asp.net 4 e ie9
-
Upload
stefano-benedetti -
Category
Technology
-
view
1.819 -
download
3
description
Transcript of Powerful asp.net 4 e ie9
Powerful ASP.NET 4.0 &
Internet Explorer 9
Benedetti Stefano
Contatti
Ing. Stefano Benedetti
http://www.be-st.ithttp://[email protected]
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?