NET Framework versione 4 include miglioramenti per ASP.NET 4 in aree mirate. Anche Visual Studio 2010 include miglioramenti e nuove funzionalità per ottimizzare lo sviluppo di risorse Web. In questa sessione verrà fornita una panoramica di numerose delle nuove funzionalità incluse nella nuova versione. Vedremo anche le novità per gli sviluppatori introdotte da Internet Explorer 9

1. Powerful ASP.NET 4.0
&
Internet Explorer 9
Benedetti Stefano

2. 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

3. ASP.Net 4
• What’s new?
– Niente (?)
• Powerful ASP.Net
– Performance
– Productivity
– SEO
– Cura per la “Lazy Dev Syndrome” 

4. Session roadmap
• Core services
• AJAX
• Web forms
• Visual Studio 2010 Web Development
Improvements
• Web Application Deployment
• Internet Explorer 9

5. 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

6. Web.config File Refactoring
<?xml version="1.0"?>
<configuration>
<system.web>
<compilation targetFramework="4.0" />
</system.web>
</configuration>

7. Auto-Start Web Applications
• Impostare l’application pool da caricare nel
file applicationHost.config
(C:WindowsSystem32inetsrvconfig)
<applicationpools>
<add name="MyApplicationPool"
startMode="AlwaysRunning" />
</applicationpools>

8. Auto-Start Web Applications
• Alternativa:
IIS Application Warm-Up Module for IIS
7.5 (beta)

9. 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

10. 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…

11. 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

12. Session roadmap
• Core services
• AJAX
• Web forms
• Visual Studio 2010 Web Development
Improvements
• Web Application Deployment

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

14. 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!!!

15. 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

16. AJAX :: CDN Support
• Librerie incluse:
• jQuery
• jQuery Validation
• Ajax Control Toolkit
• ASP.NET Ajax
• ASP.NET MVC JavaScript Files

17. 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!!

18. 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!!!

19. Session roadmap
• Core services
• AJAX
• Web forms
• Visual Studio 2010 Web Development
Improvements
• Web Application Deployment

20. 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

21. 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" />

22. 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" %>

23. 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

24. 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

25. 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

26. Routing: nuove feature
• PageRouteHandler
• HttpRequest.RequestContext e
Page.RouteData
• Nuovi expression builder
– RouteUrl
– RouteValue
– RouteParameter

27. Accesso ai parametri da codice
• HttpRequest.RequestContext e
Page.RouteData
(Page.RouteData è un wrapper di
HttpRequest.RequestContext.RouteData)
• Demo: Search

28. 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

29. 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

30. 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>

31. 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

32. 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

33. ClientIDMode AutoID
• Comportamento legacy
• WebControl
– Id= [NamingContainer_]id
• Controlli “repeater”
– Id =
<prefix>_NamingContainer_id_<SequentialNumber>

34. 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

35. 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

36. 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

37. 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

38. 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

39. 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

40. 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
)

41. 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 %>

42. 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

43. 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

44. 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>

45. 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>

46. Controlli template e tabelle
• 3.5: Viene generata una tabella esterna
– FormView
– Login
– PasswordRecovery
– ChangePassword
– Wizard
– CreateUserWizard

47. Controlli template e tabelle
• 4.0: Nuova property RenderOuterTable
– Non viene più generata la tabella esterna (table, tr
e td tag rimossi)

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

49. 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

50. CheckList e RadioButtonList
• 3.5
– RepeatLayout: Flow (span) e Table (table)
• 4.0
– Nuove opzioni:
• OrdererdList => li
• UnorderedList => ul
• Demo: Others

51. Visual Studio 2010 Web
Development Improvements
• Migliorata la compatibilità dei CSS con gli
standard 2.1
• HTML e JavaScript Snippets
• JavaScript IntelliSense Enhancements

52. 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

53. 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

54. Web Application Deployment with
Visual Studio 2010
• Web Packaging
• Web.config Transformation
• Database Deployment
• One-Click Publish per le Web Applications

55. Web config transformation
• Web.config trasformabile tramite XML
Document Transform
• Versioni diverse per dev, production
• Production = compilation debug=false!!

56. Internet Explorer 9
• HTML 5 (draft!)
• Performance
• CSS3 (draft!)
• Supporto SVG
• Pinned sites

57. HTML 5
• DRAFT!
• Canvas
• Nuovi tag
– Audio
– Video
– Semantic tags
• Client side storage
• Scalable Vector Graphics

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

59. 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

60. 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>

61. <video>
• È un tag html
– Formato MPEG-4/H.264 video
– Accelerazione hardware basata sulla GPU
• Attributi
• src
• autoplay
• controls
• preload
• loop
• height & width

62. <audio>
• Come il video anche l’audio è un semplice
tag HTML
– Formato: MP3 and AAC audio
• Attributi
– src
– autoplay
– controls
– preload

63. 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

64. Session storage
• sessionStorage.setItem('fullname', ‘Rossi
Mario');
• alert(“Ti chiami: " +
sessionStorage.getItem('fullname'));
• alert(“Ciao " + sessionStorage.fullname);
• sessionStorage.removeItem('fullname');

65. Local storage
• localStorage.setItem('fullname', ‘Rossi
Mario');
• alert(“Ti chiami: " +
localStorage.getItem('fullname'));
• alert(“Ciao " + localStorage.fullname);
• localStorage.removeItem('fullname');

66. Supporto SVG
• Disegno vettoriale 2D tramite XML
• Shapes
– rect
– circle
– ellipse
– line
– polyline
– polygon

67. Supporto SVG

68. 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

69. 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”>…

70. Semantic tags
• <header>
• <nav> (menu di navigazione)
• <aside> (sidebar)
• <section> … <article> …
• <footer>
• E nuovi relation (rel) (archives, pingback, icon, etc);

71. 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

72. • Traccia tutte le richieste uscenti dalla
pagina e le relative risposte
• Informazioni sintetiche
• Informazioni di dettaglio
Network Tab

73. Javascript Profiling

74. Network Tab Summary View

75. Network Tab Detail View

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

77. Nuovo engine Javascript

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

79. Pinning

80. Pinning: Thumbnails Buttons

81. 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

82. 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

83. 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

84. That’s all folks
Domande?