asp.net ajax 4.0
Post on 29-Nov-2014
4.063 Views
Preview:
DESCRIPTION
TRANSCRIPT
Change the Rules
ASP.NET Ajax 4.0
Fritz Onion
Change the Rules
About Fritz Onion• Cofounder of Pluralsight
– Developer training company specializing in Microsoft technologies
– Pluralsight On-Demand! - subscription library
– Pluralsight twitter feed: http://twitter.com/pluralsight
• 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: fritz@pluralsight.com
– Blog: http://pluralsight.com/fritz
– Twitter: http://twitter.com/fritzonion
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
Change the Rules
ASP.NET Ajax Library
• Available on CodePlex
– http://ajax.codeplex.com
• Documentation, samples, tutorials available
– http://www.asp.net/ajaxlibrary/
• All scripts now loadable through Microsoft Ajax CDN
– http://ajax.microsoft.com/ajax/beta/0911/start.js
• 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
– http://codeplex.org
• Standard & premier support for ASP.NET Ajax Library after RTM
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
for object dependencies
– Sys.scripts namespace for
pre-defined script collections
<script src="Scripts/start.debug.js"></script>
<script>Sys.require([Sys.components.dataView]);
Sys.onReady(function () {// use dataView here
}…
Change the Rules
Client Script Loader AliasesSys.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.
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
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: http://www.asp.net/ajax/cdn
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js"type="text/javascript"></script>
Change the Rules
Toolkit Controls• Toolkit controls now rolled into core release
– No separate install
• http://ajax.microsoft.com/ajax/beta/0911/extended/ExtendedControls.js
– 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>
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…");
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>
Change the Rules
Sys.UI.DataView
• The DataView class applies data to an
HTML template<script src="http://ajax.microsoft.com/ajax/beta/0911/start.debug.js"></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>
Change the Rules
Sys.UI.DataView propertiespublic 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; }}
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();}
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>
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
<script src="http://ajax.microsoft.com/ajax/beta/0911/start.debug.js"></script><script>Sys.require([Sys.components.dataView]);var courses = [
{ 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>
<table id="resultTable" border="1" class="sys-template"><tr><td id="c1"></td><td id="c2"></td>
</tr></table>
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.
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>
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}}">
Change the Rules
Web Service Invocation• DataView supports dataProvider and fetchOperation
properties to invoke WCF svcs– Service must support JSON
serialization and Ajax proxy
generation
function pageLoad(){
$create(Sys.UI.DataView, {dataProvider: "SampleDataService.svc",fetchOperation: "GetData",autoFetch: "true"
}, {}, {}, $get("resultTable"));}
// SampleDataService.svc WCF servicepublic class SampleDataService{
[OperationContract]public List<SampleData> GetData(){ … }
}
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
Change the Rules
Live Binding Example<script>var titleValue = { Title: "sample title"};</script>
<body xmlns:sys="javascript:Sys"xmlns:code="http://schemas.microsoft.com/aspnet/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>
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>
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>
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()" />
Change the Rules
Sys.Data.DataContext• Sys.Data.DataContext provides a client-side data context
– Tracks changes
made to data
– Changes can
be propagated
to server with
SaveChanges
<script>var ctx = new Sys.Data.DataContext();ctx.set_serviceUri("sampleDataService.svc");ctx.set_saveOperation("SaveData");ctx.initialize();
</script>…<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" />
Change the Rules
AdoNetServiceProxy• AdoNetServiceProxy class enables read-write interaction with ADO.NET Data
Servicespublic 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(…);}
Change the Rules
Sys.Data.AdoNetDataContextSys.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>
top related