Powerful asp.net 4 e ie9

2,079 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,079
On SlideShare
0
From Embeds
0
Number of Embeds
168
Actions
Shares
0
Downloads
31
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Powerful asp.net 4 e ie9

  1. 1. Powerful ASP.NET 4.0 & Internet Explorer 9 Benedetti Stefano
  2. 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. 3. ASP.Net 4 • What’s new? – Niente (?) • Powerful ASP.Net – Performance – Productivity – SEO – Cura per la “Lazy Dev Syndrome” 
  4. 4. Session roadmap • Core services • AJAX • Web forms • Visual Studio 2010 Web Development Improvements • Web Application Deployment • Internet Explorer 9
  5. 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. 6. Web.config File Refactoring <?xml version="1.0"?> <configuration> <system.web> <compilation targetFramework="4.0" /> </system.web> </configuration>
  7. 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. 8. Auto-Start Web Applications • Alternativa: IIS Application Warm-Up Module for IIS 7.5 (beta)
  9. 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. 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. 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. 12. Session roadmap • Core services • AJAX • Web forms • Visual Studio 2010 Web Development Improvements • Web Application Deployment
  13. 13. AJAX • jQuery out of the box • Content Delivery Network Support • ScriptManager Explicit Scripts
  14. 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. 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. 16. AJAX :: CDN Support • Librerie incluse: • jQuery • jQuery Validation • Ajax Control Toolkit • ASP.NET Ajax • ASP.NET MVC JavaScript Files
  17. 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. 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. 19. Session roadmap • Core services • AJAX • Web forms • Visual Studio 2010 Web Development Improvements • Web Application Deployment
  20. 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. 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. 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. 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. 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. 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. 26. Routing: nuove feature • PageRouteHandler • HttpRequest.RequestContext e Page.RouteData • Nuovi expression builder – RouteUrl – RouteValue – RouteParameter
  27. 27. Accesso ai parametri da codice • HttpRequest.RequestContext e Page.RouteData (Page.RouteData è un wrapper di HttpRequest.RequestContext.RouteData) • Demo: Search
  28. 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. 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. 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. 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. 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. 33. ClientIDMode AutoID • Comportamento legacy • WebControl – Id= [NamingContainer_]id • Controlli “repeater” – Id = <prefix>_NamingContainer_id_<SequentialNumber>
  34. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 46. Controlli template e tabelle • 3.5: Viene generata una tabella esterna – FormView – Login – PasswordRecovery – ChangePassword – Wizard – CreateUserWizard
  47. 47. Controlli template e tabelle • 4.0: Nuova property RenderOuterTable – Non viene più generata la tabella esterna (table, tr e td tag rimossi)
  48. 48. Menù • 3.5 gestito tramite una serie di tabelle • 4.0 renderizzato tramite ul/li • Demo: Menu40
  49. 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. 50. CheckList e RadioButtonList • 3.5 – RepeatLayout: Flow (span) e Table (table) • 4.0 – Nuove opzioni: • OrdererdList => li • UnorderedList => ul • Demo: Others
  51. 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. 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. 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. 54. Web Application Deployment with Visual Studio 2010 • Web Packaging • Web.config Transformation • Database Deployment • One-Click Publish per le Web Applications
  55. 55. Web config transformation • Web.config trasformabile tramite XML Document Transform • Versioni diverse per dev, production • Production = compilation debug=false!!
  56. 56. Internet Explorer 9 • HTML 5 (draft!) • Performance • CSS3 (draft!) • Supporto SVG • Pinned sites
  57. 57. HTML 5 • DRAFT! • Canvas • Nuovi tag – Audio – Video – Semantic tags • Client side storage • Scalable Vector Graphics
  58. 58. HTML 5 intellisense • https://blogs.msdn.com/b/pietrobr/archive/2010/06/11/visual-studio-2010-e-html-5- intellisense.aspx
  59. 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. 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. 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. 62. <audio> • Come il video anche l’audio è un semplice tag HTML – Formato: MP3 and AAC audio • Attributi – src – autoplay – controls – preload
  63. 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. 64. Session storage • sessionStorage.setItem('fullname', ‘Rossi Mario'); • alert(“Ti chiami: " + sessionStorage.getItem('fullname')); • alert(“Ciao " + sessionStorage.fullname); • sessionStorage.removeItem('fullname');
  65. 65. Local storage • localStorage.setItem('fullname', ‘Rossi Mario'); • alert(“Ti chiami: " + localStorage.getItem('fullname')); • alert(“Ciao " + localStorage.fullname); • localStorage.removeItem('fullname');
  66. 66. Supporto SVG • Disegno vettoriale 2D tramite XML • Shapes – rect – circle – ellipse – line – polyline – polygon
  67. 67. Supporto SVG
  68. 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. 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. 70. Semantic tags • <header> • <nav> (menu di navigazione) • <aside> (sidebar) • <section> … <article> … • <footer> • E nuovi relation (rel) (archives, pingback, icon, etc);
  71. 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. 72. • Traccia tutte le richieste uscenti dalla pagina e le relative risposte • Informazioni sintetiche • Informazioni di dettaglio Network Tab
  73. 73. Javascript Profiling
  74. 74. Network Tab Summary View
  75. 75. Network Tab Detail View
  76. 76. Performance • Accelerazione tramite GPU • Nuovo engine Javascript “Chakra” – Multi core background compilation
  77. 77. Nuovo engine Javascript
  78. 78. Accelerazione tramite GPU • <canvas> • <video> • <audio> • CSS3 • SVG 1.1 • Web fonts
  79. 79. Pinning
  80. 80. Pinning: Thumbnails Buttons
  81. 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. 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. 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. 84. That’s all folks Domande?

×