Download as PPSX, PPTX
![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](https://image.slidesharecdn.com/powerfulasp-net4eie9-101121133238-phpapp02/85/Powerful-asp-net-4-e-ie9-31-320.jpg)
![ClientIDMode AutoID
• Comportamento legacy
• WebControl
– Id= [NamingContainer_]id
• Controlli “repeater”
– Id =
<prefix>_NamingContainer_id_<SequentialNumber>](https://image.slidesharecdn.com/powerfulasp-net4eie9-101121133238-phpapp02/85/Powerful-asp-net-4-e-ie9-33-320.jpg)
Uploaded byStefano Benedetti
Powerful asp.net 4 e ie9
Il documento discute le novità di ASP.NET 4.0 e la sua integrazione con Internet Explorer 9, evidenziando miglioramenti nelle prestazioni, nella produttività e nel supporto SEO. Vengono presentati vari servizi core, come il caching estensibile, il redirect permanente delle pagine, e nuove funzioni per la gestione delle sessioni. Inoltre, viene trattato l'approccio verso AJAX, miglioramenti di Visual Studio 2010, e l'adozione di tecnologie HTML5.
Powerful asp.net 4 e ie9
- 1. Powerful ASP.NET 4.0 & InternetExplorer 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/ LoUser Group dell'Emilia-Romagna interamente dedicato alle tecnologie Microsoft .NET
- 3. ASP.Net 4 • What’snew? – Niente (?) • Powerful ASP.Net – Performance – Productivity – SEO – Cura per la “Lazy Dev Syndrome”
- 4. Session roadmap • Coreservices • AJAX • Web forms • Visual Studio 2010 Web Development Improvements • Web Application Deployment • Internet Explorer 9
- 5. Core services – Web.configFile 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 <?xmlversion="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 aPage 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 • Coreservices • AJAX • Web forms • Visual Studio 2010 Web Development Improvements • Web Application Deployment
- 13. AJAX • jQuery outof the box • Content Delivery Network Support • ScriptManager Explicit Scripts
- 14. jQuery out ofthe 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 :: CDNSupport • 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 :: CDNSupport • 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 • Coreservices • AJAX • Web forms • Visual Studio 2010 Web Development Improvements • Web Application Deployment
- 20. Web Forms • SettingMeta 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 Tagsproperties • 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 Tagsproperty • 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 • Ilviewstate 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 • Nuovaproperty 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 nelSEO, 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 parametrida codice • HttpRequest.RequestContext e Page.RouteData (Page.RouteData è un wrapper di HttpRequest.RequestContext.RouteData) • Demo: Search
- 28. Accesso ai parametrida 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 parametrida 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’attributoid 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 • Comportamentolegacy • WebControl – Id= [NamingContainer_]id • Controlli “repeater” – Id = <prefix>_NamingContainer_id_<SequentialNumber>
- 34. ClientIDMode Static • IlClientID è 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’usoprincipale è 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 • 35tipi 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 • Introdotticome 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 CodeExpressions 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 renderingimprovements • 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: comportamentolegacy, 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 controllinon 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 ediv • 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 etabelle • 3.5: Viene generata una tabella esterna – FormView – Login – PasswordRecovery – ChangePassword – Wizard – CreateUserWizard
- 47. Controlli template etabelle • 4.0: Nuova property RenderOuterTable – Non viene più generata la tabella esterna (table, tr e td tag rimossi)
- 48. Menù • 3.5 gestitotramite 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 2010Web Development Improvements • Migliorata la compatibilità dei CSS con gli standard 2.1 • HTML e JavaScript Snippets • JavaScript IntelliSense Enhancements
- 52. HTML e JavaScriptSnippets • 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 • Riconosceoggetti 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 Deploymentwith 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 perdisegnare “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> • È untag html – Formato MPEG-4/H.264 video – Accelerazione hardware basata sulla GPU • Attributi • src • autoplay • controls • preload • loop • height & width
- 62. <audio> • Come ilvideo 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 • Disegnovettoriale 2D tramite XML • Shapes – rect – circle – ellipse – line – polyline – polygon
- 67.
- 68. Semantic tags • Unsemantic 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 Unstruttura 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 (akaF12) • Interfaccia visuale integrata per l’accesso a – HTML, CSS, DOM – Javascript Debugging – Javascript Profiling – Compatibilità dei siti con IE9 – Network Tab
- 72. • Traccia tuttele richieste uscenti dalla pagina e le relative risposte • Informazioni sintetiche • Informazioni di dettaglio Network Tab
- 73.
- 74.
- 75.
- 76. Performance • Accelerazione tramiteGPU • Nuovo engine Javascript “Chakra” – Multi core background compilation
- 77.
- 78. Accelerazione tramite GPU •<canvas> • <video> • <audio> • CSS3 • SVG 1.1 • Web fonts
- 79.
- 80.
- 81. Riferimenti ASP.Net • ASP.NET4.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 • Chartcontrols 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 ExplorerDeveloper 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.