Your SlideShare is downloading. ×
ASP.NET Ajax 4.0
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

ASP.NET Ajax 4.0


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Change the Rules ASP.NET Ajax 4.0 Fritz Onion
  • 2. Change the Rules About Fritz Onion • Cofounder of Pluralsight – Developer training company specializing in Microsoft technologies – Pluralsight On-Demand! - subscription library – Pluralsight twitter feed: • Community contributions – Author of Essential ASP.NET books, MSDN articles – Conference / user group speaker (PDC, TechEd, VSLive!, DevWeek, …) – Microsoft MVP for ASP.NET • Contact info – Email: – Blog: – Twitter:
  • 3. Change the Rules ASP.NET Ajax Library (released with ASP.NET 4) • Focus on client-side features – Client data sources – Script library refactoring – Client script manager – Client template rendering – Declarative control/behavior instantiation – Live data binding – Observer pattern – AdoNetServiceProxy – DataContext, AdoNetDataContext – Inclusion of and support for jQuery library
  • 4. Change the Rules ASP.NET Ajax Library • Available on CodePlex – • Documentation, samples, tutorials available – • All scripts now loadable through Microsoft Ajax CDN – • Toolkit controls now part of core library – No more separate installation – Most controls available as client-only in addition to 'extenders' • ASP.NET Ajax Library being contributed to the CodePlex foundation – • Standard & premier support for ASP.NET Ajax Library after RTM
  • 5. Change the Rules Client Script Loader • Loads all scripts required by a component and executes them in the right order • Supports script combining • Supports on-demand loading • Just point to start.js and use Sys.require – Sys.components namespace <script src="Scripts/start.debug.js"></script> for object dependencies – Sys.scripts namespace for <script> Sys.require([Sys.components.dataView]); pre-defined script collections Sys.onReady(function () { // use dataView here } …
  • 6. Change the Rules Client Script Loader Aliases Sys.scripts Value Script Description AdoNet MicrosoftAjaxAdoNet.js Allows client-side code to interact with ADO.NET Data Services. ApplicationServices MicrosoftAjaxApplicationServices.js Provides access to ASP.NET profile, authentication and role services. ComponentModel MicrosoftAjaxComponentModel.js Provides behavior and component functionality. Core MicrosoftAjaxCore.js Base script that contains core ASP.NET Ajax Library functionality and JavaScript language enhancements. DataContext MicrosoftAjaxDataContext.js Contains the DataContext and AdoNetDataContext client-side classes. Globalization MicrosoftAjaxGlobalization.js Contains language globalization functionality for dates, times and numbers. History MicrosoftAjaxHistory.js Provides browser history functionality for Ajax applications. jQuery jquery-1.3.2.min.js Minified jQuery library script. jQueryValidate jquery.validate.min.js Minified jQuery Validate script used to validate form elements. Network MicrosoftAjaxNetwork.js Contains core networking features used to communicate with remote sites and services. Serialization MicrosoftAjaxSerialization.js Provides object serialization and deserialization functionality. Templates MicrosoftAjaxTemplates.js Provides client-side template rendering functionality. WebServices MicrosoftAjaxWebServices.js Contains a web service proxy class used to call web services.
  • 7. Change the Rules ScriptManager • ScriptManager enhanced to use script loader – <asp:ScriptManager… EnableCdn="true" /> • Effects controls that bring in script too (like menu) – AjaxFrameworkMode – does not bring in all scripts
  • 8. Change the Rules Content Delivery Network (CDN) • Microsoft hosts ajax/jQuery scripts on CDN – Cached on 'edge' servers strategically placed around the world – Enables cross application caching – Full list of files: <script src="" type="text/javascript"></script>
  • 9. Change the Rules Toolkit Controls • Toolkit controls now rolled into core release – No separate install • – In addition to server extenders, now available as pure client controls <head> <link href="scripts/extended/calendar/calendar.css" rel="stylesheet" type="text/css" /> <script src="scripts/start.debug.js"></script> <script src="scripts/extended/ExtendedControls.js"></script> <script type="text/javascript"> Sys.require([Sys.components.calendar]); Sys.onReady(function () { Sys.create.calendar("#dateInput"); }); </script> </head> <body> Enter a date: <input type="text" id="dateInput" /> </body>
  • 10. Change the Rules jQuery Integration • All ASP.NET Ajax Library controls are exposed as jQuery plug-ins – Can use jQuery selector syntax to apply $("#nameInput").watermark("Enter your name…");
  • 11. Change the Rules Client Templates • Client templates replicate HTML – XHTML compliant – Placeholder notation similar to Silverlight • {{ Name }} – Expression language is JavaScript • {{BirthDate.localeFormat("dd/MM/yyyy")}} – Interspersed code and markup – Declarative behavior and events <table id="resultTable" class="sys-template"> <tr> <td>{{CourseCode}}</td> <td>{{CourseCode + ":" + Course}}</td> </tr> </table>
  • 12. Change the Rules Sys.UI.DataView • The DataView class applies data to an HTML template <script src=""></script> <script> Sys.require([Sys.components.dataView]); var courses = [ { CourseCode: "AP17", Course: "ASP.NET Ajax Fundamentals" }, … ]; // The onReady callback will be called when the DOMReady event has fired, // and when any dynamically loaded scripts have loaded - as a result of // Sys.require(...). Sys.onReady(function () { Sys.create.dataView("#resultTable", { data: courses }); ); </script>
  • 13. Change the Rules Sys.UI.DataView properties public class Sys.UI.DataView : Sys.UI.Control, Sys.UI.ITemplateContextConsumer { //… public object data { get; set; } public object dataProvider { get; set; } public bool autoFetch { get; set; } public bool isFetching { get; } public string httpVerb { get; set; } public object items { get; } public object fetchParameters { get; set; } public object selectedData { get; } public int selectedIndex { get; set; } public int initialSelectedIndex { get; set; } public object selectedItemClass { get; set; } public int timeout { get; set; } public string fetchOperation { get; set; } public object itemPlaceholder { get; set; } public object templateContext { get; set; } public object itemTemplate { get; set; } }
  • 14. Change the Rules Sys.UI.DataView methods public class Sys.UI.DataView : Sys.UI.Control, Sys.UI.ITemplateContextConsumer { //… public void abortFetch(); public object getItem(source); public void refresh(); public object fetchData(succeededCallback, failedCallback, mergeOption, userContext); public void updated(); }
  • 15. Change the Rules Attribute Binding • Use sys:attr to bind attributes to data fields in a template – Defers interpretation of attributes until bound to data <table id="resultTable" border="1" class="sys-template"> <tr> <td><img sys:src="{{ImageUrl}}" /></td> <td>{{CourseCode}}</td> <td>{{Course}}</td> </tr> </table>
  • 16. Change the Rules Explicit binding • In addition to templates, it is possible to bind data explicitly to elements – Use Sys.bind in response to the itemRendered event – Keeps markup clean <table id="resultTable" border="1" class="sys-template"> <script src=""></script> <tr> <td id="c1"></td> <script> <td id="c2"></td> Sys.require([Sys.components.dataView]); </tr> var courses = [ </table> { CourseCode: "AP17", Course: "ASP.NET Ajax Fundamentals" }, … ]; Sys.onReady(function () { Sys.create.dataView("#resultTable", { data: courses, itemRendered: resultTableRendered }); }); function resultTableRendered(dataView, ctx) { Sys.bind(Sys.get("#c1", ctx), "innerHTML", ctx.dataItem, "CourseCode"); Sys.bind(Sys.get("#c2", ctx), "innerHTML", ctx.dataItem, "Course"); } </script>
  • 17. Change the Rules Customizing Templates • Expression language is JavaScript • {{BirthDate.localeFormat("dd/MM/yyyy")}} • Can leverage pseudo columns and interspersed code and markup $index Ordinal index or the row (0-based). $dataItem Current item being bound.
  • 18. Change the Rules Template Pseudo-Columns <script> function formatDataItem(item) { return String.format("({0}) Name: {1}", item.Id, item.Name); } </script> … <table id="resultTable" border="1" class="sys-template" sys:attach="dataview" dataview:dataprovider="SampleDataService.svc" dataview:fetchoperation="GetData" dataview:autofetch="true"> <tr> <td>{{$index}}</td> <td>{{formatDataItem($dataItem)}}</td> </tr> </table>
  • 19. Change the Rules Declarative Instantiation • Support for client object creation without script code • Works for any Sys.UI.Control-derived client class <body xmlns:sys="javascript:Sys" xmlns:dataview="javascript:Sys.UI.DataView"> … <table id="resultTable" class="sys-template" sys:attach="dataview" dataview:data="{{courses}}">
  • 20. Change the Rules Web Service Invocation • DataView supports dataProvider and fetchOperation properties to invoke WCF svcs – Service must support JSON // SampleDataService.svc WCF service serialization and Ajax proxy public class SampleDataService generation { [OperationContract] function pageLoad() public List<SampleData> GetData() { { … } $create(Sys.UI.DataView, { } dataProvider: "SampleDataService.svc", fetchOperation: "GetData", autoFetch: "true" }, {}, {}, $get("resultTable")); }
  • 21. Change the Rules Live Bindings • Reflect changes live from data • <span>{binding Name}</span> • <input sys:value="{binding Name}" /> • Reflect changes live back to data from user input – No round-trip to server • Convert and ConvertBack functions
  • 22. Change the Rules Live Binding Example <script>var titleValue = { Title: "sample title"};</script> <body xmlns:sys="javascript:Sys" xmlns:code="" xmlns:dataview="javascript:Sys.UI.DataView"> <div sys:attach="dataview" class="sys-template" dataview:data="{{ titleValue }}"> <h3>{ binding Title }</h3> <hr /> Set the title here: <input type="text" sys:value="{binding Title}" /> </div> </body>
  • 23. Change the Rules LiveBinding with Conversion Functions • Can specify convert and convertBack functions in live bindings <script> var titleValue = { Title: "sample title", Amount: 42 }; function toDollars(amt) { return '$' + amt; } function fromDollars(str) { return str.substring(1); } </script> … <div sys:attach="dataview" class="sys-template" dataview:data="{{ titleValue }}"> <h4>{ binding Amount, convert=toDollars}</h4><br /> Set amount here: <input type="text" sys:value= "{binding Amount, convert=toDollars, convertBack=fromDollars}" /> </div>
  • 24. Change the Rules Observer Pattern • Sys.Observer adds observer functionality to ordinary JavaScript objects causing notifications on change – Used for live binding <script> var itemsArray = []; function pageLoad() { Sys.Observer.makeObservable(itemsArray); } function onEnterNewItem() { var newItem = { Id: $get("_itemId").value, Name: $get("_itemName").value }; itemsArray.add(newItem); } </script>
  • 25. Change the Rules Observer Pattern Example • DataView bound to observable array – Binding updated whenever array updates <ol id="orderedListView" class="sys-template" sys:attach="dataview" dataview:data="{{ itemsArray }}"> <li>{{Name + '-' + Id}}</li> </ol> <hr /> Enter new item:<br /> Id: <input type="text" id="_itemId" /><br /> Name: <input type="text" id="_itemName" /><br /> <input type="button" value="enter" onclick="onEnterNewItem()" />
  • 26. Change the Rules Sys.Data.DataContext • Sys.Data.DataContext provides a client-side data context – Tracks changes <script> made to data var ctx = new Sys.Data.DataContext(); – Changes can ctx.set_serviceUri("sampleDataService.svc"); ctx.set_saveOperation("SaveData"); be propagated ctx.initialize(); to server with </script> … SaveChanges <ol id="orderedListView" class="sys-template" sys:attach="dataview" dataview:dataprovider="{{ctx}}" dataview:query="GetData"> <li> <input type="text" value="{binding Id}" /><br /> <input type="text" value="{binding Name}" /> </li> </ol> <input type="button" onclick="ctx.saveChanges()" value="Save changes" />
  • 27. Change the Rules AdoNetServiceProxy • AdoNetServiceProxy class enables read-write interaction with ADO.NET Data Services public class Sys.Data.AdoNetServiceProxy : Sys.Net.WebServiceProxy, Sys.Data.IDataProvider { //… public string path { get; set; } public bool replaceOnUpdate { get; set; } public string serviceUri { get; } public object createActionSequence(); public object invoke(…); public object insert(…); public object fetchData(…); public object fetchDeferredProperty(…); public object query(…); public object update(…); public object remove(…); }
  • 28. Change the Rules Sys.Data.AdoNetDataContext Sys.Data.AdoNetDataContext provides a context for an ADO.NET data service – Derives from DataContext, maps to ADO.NET data service methods <div id="peopleView" sys:attach="dataview" class="sys-template" dataview:dataprovider= "{{ $create(Sys.Data.AdoNetDataContext, {serviceUri: 'MovieReviewsService.svc'})}}" dataview:fetchoperation="movies" dataview:autofetch="true"> <fieldset> <legend> <span>{{movie_id}}</span> </legend> <em>{{title}}</em> - {{release_date}} </fieldset> </div>