{"id":973,"date":"2011-04-13T14:37:00","date_gmt":"2011-04-13T14:37:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/odatateam\/2011\/04\/13\/reference-data-caching-walkthrough\/"},"modified":"2024-02-16T13:13:09","modified_gmt":"2024-02-16T20:13:09","slug":"reference-data-caching-walkthrough","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/odata\/reference-data-caching-walkthrough\/","title":{"rendered":"Reference Data Caching Walkthrough"},"content":{"rendered":"<p>This walkthrough shows how a simple web application can be built using the reference data caching features in the &ldquo;Microsoft WCF Data Services For .NET March 2011 Community Technical Preview with Reference Data Caching Extensions&rdquo; aka &ldquo;<a href=\"https:\/\/www.microsoft.com\/downloads\/details.aspx?FamilyID=eb4501ca-02f3-42a4-838a-229e8c77d1c6\">Reference Data Caching CTP<\/a>&rdquo;. The walkthrough isn&rsquo;t intended for production use but should be of value in learning about the caching protocol additions to OData as well as to provide practical knowledge in how to build applications using the new protocol features.<\/p>\n<h3>Walkthrough Sections<\/h3>\n<p>The walkthrough contains five sections as follows:<\/p>\n<ol>\n<li><b>Setup:<\/b> This defines the pre-requisites for the walkthrough and links to the setup of the Reference Data Caching CTP. <\/li>\n<li><b>Create the Web Application:<\/b> A web application will be used to host an OData reference data caching-enabled service and HTML 5 application. In this section you will create the web app and configure it. <\/li>\n<li><b>Build an Entity Framework Code First Model:<\/b> An EF Code First model will be used to define the data model for the reference data caching-enabled application. <\/li>\n<li><b>Build the service: <\/b>A reference data caching-enabled OData service will be built on top of the Code First model to enable access to the data over HTTP. <\/li>\n<li><b>Build the front end: <\/b>A simple HTML5 front end that uses the datajs reference data caching capabilities will be built to show how OData reference data caching can be used. <\/li>\n<\/ol>\n<h3>&nbsp;<\/h3>\n<h3>Setup<\/h3>\n<p>The pre-requisites and setup requirements for the walkthrough are:<\/p>\n<ol>\n<li>This walkthrough assumes you have Visual Studio 2010, SQL Server Express, and SQL Server Management Studio 2008 R2 installed. <\/li>\n<li>Install the <a href=\"https:\/\/www.microsoft.com\/downloads\/details.aspx?FamilyID=eb4501ca-02f3-42a4-838a-229e8c77d1c6\">Reference Data Caching CTP<\/a>. This setup creates a folder at &ldquo;C:Program FilesWCF Data Services March 2011 CTP with Reference Data CachingBinaries&rdquo; that contains: \n<ul>\n<li>A .NETFramework folder with: \n<ul>\n<li>i. An EntityFramework.dll that allows creating off-line enabled models using the Code First workflow. <\/li>\n<li>ii. A System.Data.Services.Delta.dll and System.Data.Services.Delta.Client.dll that allow creation of delta enabled Data Services. <\/li>\n<\/ul>\n<\/li>\n<li>A JavaScript folder with: \n<ul>\n<li>i. Two delta-enabled datajs OData library files: datajs-0.0.2 and datajs-0.0.2.min.js. <\/li>\n<li>ii. A .js file that leverages the caching capabilities inside of datajs for the walkthrough: TweetCaching.js <\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<h3>Create the web application <\/h3>\n<p>Next you&rsquo;ll create an ASP.NET Web Application where the OData service and HTML5 front end will be hosted.<\/p>\n<ol>\n<li>Open Visual Studio 2010 and create a new ASP.NET web application and name it ConferenceReferenceDataTest.&nbsp; When you create the application, make sure you target .NET Framework 4. <\/li>\n<li>Add the .js files in &ldquo;C:Program FilesWCF Data Services March 2011 CTP with Reference Data CachingBinariesJavascript&rdquo; to your scripts folder. <\/li>\n<li>Add a reference to the new reference data caching-enabled data service libraries found in &ldquo;C:Program FilesWCF Data Services March 2011 CTP with Reference Data CachingBinaries.NETFramework&rdquo;: \n<ul>\n<li>Microsoft.Data.Services.Delta.dll <\/li>\n<li>Microsoft.Data.Services.Delta.Client.dll <\/li>\n<\/ul>\n<\/li>\n<li>Add a reference to the reference data caching-enabled EntityFramework.dll found in in &ldquo;C:Program FilesWCF Data Services March 2011 CTP with Reference Data CachingBinaries.NETFramework&rdquo;. <\/li>\n<li>Add a reference to System.ComponentModel.DataAnnotations. <\/li>\n<\/ol>\n<h3>Build your Code First model and off-line enable it.<\/h3>\n<p>In order to build a Data Service we need a data model and data to expose.&nbsp; You will use Entity Framework Code First classes to define the delta enabled model and a Code First database initializer to ensure there is seed data in the database. When the application runs, EF Code First will create a database with appropriate structures and seed data for your delta-enabled service.<\/p>\n<ol>\n<li>Add a C# class file to the root of your project and name it model.cs. <\/li>\n<li>Add the Session and Tweets classes to your model.cs file. Mark the Tweets class with the DeltaEnabled attribute. Marking the Tweets class with the attribute will force Code First to generate additional database structures to support change tracking for Tweet records. <\/li>\n<\/ol>\n<p><span style=\"color: blue\">public class <\/span><span style=\"color: #2b91af\">Session <br \/><\/span>{ <br \/>&nbsp;&nbsp;&nbsp; <span style=\"color: blue\">public int <\/span>Id { <span style=\"color: blue\">get<\/span>; <span style=\"color: blue\">set<\/span>; } <br \/>&nbsp;&nbsp;&nbsp; <span style=\"color: blue\">public string <\/span>Name { <span style=\"color: blue\">get<\/span>; <span style=\"color: blue\">set<\/span>; } <br \/>&nbsp;&nbsp;&nbsp; <span style=\"color: blue\">public <\/span><span style=\"color: #2b91af\">DateTime <\/span>When { <span style=\"color: blue\">get<\/span>; <span style=\"color: blue\">set<\/span>; } <br \/>&nbsp;&nbsp;&nbsp; <span style=\"color: blue\">public <\/span><span style=\"color: #2b91af\">ICollection<\/span>&lt;<span style=\"color: #2b91af\">Tweet<\/span>&gt; Tweets { <span style=\"color: blue\">get<\/span>; <span style=\"color: blue\">set<\/span>; } <br \/>} <\/p>\n<p><span style=\"background-color: #ffff00\">[<span style=\"color: #2b91af\">DeltaEnabled<\/span>] <br \/><\/span><span style=\"color: blue\">public class <\/span><span style=\"color: #2b91af\">Tweet <br \/><\/span>{ <br \/>&nbsp;&nbsp;&nbsp; [<span style=\"color: #2b91af\">Key<\/span>, <span style=\"color: #2b91af\">DatabaseGenerated<\/span>(<span style=\"color: #2b91af\">DatabaseGeneratedOption<\/span>.Identity)] <br \/>&nbsp;&nbsp;&nbsp; [<span style=\"color: #2b91af\">Column<\/span>(Order = 1)] <br \/>&nbsp;&nbsp;&nbsp; <span style=\"color: blue\">public int <\/span>Id { <span style=\"color: blue\">get<\/span>; <span style=\"color: blue\">set<\/span>; } <\/p>\n<p>&nbsp;&nbsp;&nbsp; [<span style=\"color: #2b91af\">Key<\/span>] <br \/>&nbsp;&nbsp;&nbsp; [<span style=\"color: #2b91af\">Column<\/span>(Order = 2)] <br \/>&nbsp;&nbsp;&nbsp; <span style=\"color: blue\">public int <\/span>SessionId { <span style=\"color: blue\">get<\/span>; <span style=\"color: blue\">set<\/span>; } <\/p>\n<p>&nbsp;&nbsp;&nbsp; <span style=\"color: blue\">public string <\/span>Text { <span style=\"color: blue\">get<\/span>; <span style=\"color: blue\">set<\/span>; } <\/p>\n<p>&nbsp;&nbsp;&nbsp; [<span style=\"color: #2b91af\">ForeignKey<\/span>(<span style=\"color: #a31515\">&#8220;SessionId&#8221;<\/span>)] <br \/>&nbsp;&nbsp;&nbsp; <span style=\"color: blue\">public <\/span><span style=\"color: #2b91af\">Session <\/span>Session { <span style=\"color: blue\">get<\/span>; <span style=\"color: blue\">set<\/span>; } <br \/>} <\/p>\n<p>Note the attributes used to further configure the Tweet class for a composite primary key and foreign key relationship. These attributes will directly affect how Code First creates your database.<\/p>\n<blockquote>\n<p>3.&nbsp;&nbsp; Add a using statement at the top of the file so the DeltaEnabled annotation will resolve:<\/p>\n<\/blockquote>\n<pre class=\"code\"><span style=\"color: blue\">using <\/span>System.ComponentModel.DataAnnotations;<\/pre>\n<blockquote>\n<p>4. Add a ConferenceContext DbContext class to your model.cs file and expose Session and Tweet DbSets from it.<\/p>\n<\/blockquote>\n<pre class=\"code\"><span style=\"color: blue\">public class <\/span><span style=\"color: #2b91af\">ConferenceContext <\/span>: <span style=\"color: #2b91af\">DbContext\r\n<\/span>{\r\n    <span style=\"color: blue\">public <\/span><span style=\"color: #2b91af\">DbSet<\/span>&lt;<span style=\"color: #2b91af\">Session<\/span>&gt; Sessions { <span style=\"color: blue\">get<\/span>; <span style=\"color: blue\">set<\/span>; }\r\n    <span style=\"color: blue\">public <\/span><span style=\"color: #2b91af\">DbSet<\/span>&lt;<span style=\"color: #2b91af\">Tweet<\/span>&gt; Tweets { <span style=\"color: blue\">get<\/span>; <span style=\"color: blue\">set<\/span>; }\r\n}<\/pre>\n<blockquote>\n<p>5. Add a using statement at the top of the file so the DbContext and DbSet classes will resolve:<\/p>\n<\/blockquote>\n<pre class=\"code\"><span style=\"color: blue\">using <\/span>System.Data.Entity;<\/pre>\n<blockquote>\n<p>6. Add seed data for sessions and tweets to the model by adding a Code First database initializer class to the model.cs file:<\/p>\n<\/blockquote>\n<pre class=\"code\"><span style=\"color: blue\">public class <\/span><span style=\"color: #2b91af\">ConferenceInitializer <\/span>: <span style=\"color: #2b91af\">IncludeDeltaEnabledExtensions<\/span>&lt;<span style=\"color: #2b91af\">ConferenceContext<\/span>&gt;\r\n{\r\n    <span style=\"color: blue\">protected override void <\/span>Seed(<span style=\"color: #2b91af\">ConferenceContext <\/span>context)\r\n    {\r\n        <span style=\"color: #2b91af\">Session <\/span>s1 = <span style=\"color: blue\">new <\/span><span style=\"color: #2b91af\">Session<\/span>() { Name = <span style=\"color: #a31515\">\"OData Futures\"<\/span>, When = <span style=\"color: #2b91af\">DateTime<\/span>.Now.AddDays(1) };\r\n        <span style=\"color: #2b91af\">Session <\/span>s2 = <span style=\"color: blue\">new <\/span><span style=\"color: #2b91af\">Session<\/span>() { Name = <span style=\"color: #a31515\">\"Building practical OData applications\"<\/span>, When = <span style=\"color: #2b91af\">DateTime<\/span>.Now.AddDays(2) };\r\n\r\n        <span style=\"color: #2b91af\">Tweet <\/span>t1 = <span style=\"color: blue\">new <\/span><span style=\"color: #2b91af\">Tweet<\/span>() { Session = s1, Text = <span style=\"color: #a31515\">\"Wow, great session!\" <\/span>};\r\n        <span style=\"color: #2b91af\">Tweet <\/span>t2 = <span style=\"color: blue\">new <\/span><span style=\"color: #2b91af\">Tweet<\/span>() { Session = s2, Text = <span style=\"color: #a31515\">\"Caching capabilities in OData and HTML5!\" <\/span>};\r\n\r\n        context.Sessions.Add(s1);\r\n        context.Sessions.Add(s2);\r\n        context.Tweets.Add(t1);\r\n        context.Tweets.Add(t2);\r\n        context.SaveChanges();\r\n    }\r\n}<\/pre>\n<blockquote>\n<p>7. Ensure the ConferenceIntializer is called whenever the Code First DbContext is used by opening the global.asax.cs file in your project and adding the following code:<\/p>\n<\/blockquote>\n<pre class=\"code\"><span style=\"color: blue\">void <\/span>Application_Start(<span style=\"color: blue\">object <\/span>sender, <span style=\"color: #2b91af\">EventArgs <\/span>e)\r\n{\r\n            <span style=\"color: green\">\/\/ Code that runs on application startup\r\n            <\/span><span style=\"color: #2b91af\">Database<\/span>.SetInitializer(<span style=\"color: blue\">new <\/span><span style=\"color: #2b91af\">ConferenceInitializer<\/span>());\r\n\r\n}<\/pre>\n<p>Calling the initializer will direct Code First to create your database and call the &lsquo;Seed&rsquo; method above placing data in the database<\/p>\n<blockquote>\n<p>8. Add a using statement at the top of the global.asax.cs file so the Database class will resolve:<\/p>\n<\/blockquote>\n<pre class=\"code\"><span style=\"color: blue\">using <\/span>System.Data.Entity;<\/pre>\n<h3>Build an OData service on top of the model<\/h3>\n<p>Next you will build the delta enabled OData service. The service allows querying for data over HTTP just as any other OData service but in addition provides a &ldquo;delta link&rdquo; for queries over delta-enabled entities. The delta link provides a way to obtain changes made to sets of data from a given point in time. Using this functionality an application can store data locally and incrementally update it, offering improved performance, cross-session persistence, etc.<\/p>\n<p>1. Add a new WCF Data Service to the Project and name it ConferenceService.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/odatateam\/wp-content\/uploads\/sites\/23\/2011\/04\/5265.AddNewgif_thumb_5F336756.png\"><img decoding=\"async\" height=\"416\" width=\"600\" src=\"https:\/\/devblogs.microsoft.com\/odatateam\/wp-content\/uploads\/sites\/23\/2011\/04\/5265.AddNewgif_thumb_5F336756.png\" alt=\"AddNewgif\" border=\"0\" title=\"AddNewgif\" style=\"border-right-width: 0px;padding-left: 0px;padding-right: 0px;border-top-width: 0px;border-bottom-width: 0px;border-left-width: 0px;padding-top: 0px\" \/><\/a><\/p>\n<p>2. Remove the references to System.Data.Services and System.Data.Services.Client under the References treeview. We are using the Data Service libraries that are delta enabled instead.<\/p>\n<p><i>3. <\/i>Change the service to expose sessions and tweets from the ConferenceContext and <i>change the protocol version to V3. <\/i>This tells the OData delta enabled service to expose Sessions and Tweets from the ConferenceContext Code First model created previously.<i> <\/i><\/p>\n<pre class=\"code\"><span style=\"color: blue\">public class <\/span><span style=\"color: #2b91af\">ConferenceService <\/span>: <span style=\"color: #2b91af\">DataService<\/span>&lt;<span style=\"color: #2b91af\">ConferenceContext<\/span>&gt;\r\n{\r\n    <span style=\"color: green\">\/\/ This method is called only once to initialize service-wide policies.\r\n    <\/span><span style=\"color: blue\">public static void <\/span>InitializeService(<span style=\"color: #2b91af\">DataServiceConfiguration <\/span>config)\r\n    {\r\n        config.SetEntitySetAccessRule(<span style=\"color: #a31515\">\"Sessions\"<\/span>, <span style=\"color: #2b91af\">EntitySetRights<\/span>.All);\r\n        config.SetEntitySetAccessRule(<span style=\"color: #a31515\">\"Tweets\"<\/span>, <span style=\"color: #2b91af\">EntitySetRights<\/span>.All);\r\n        config.DataServiceBehavior.MaxProtocolVersion = <span style=\"color: #2b91af\">DataServiceProtocolVersion<\/span>.V3;\r\n    }\r\n}<\/pre>\n<p>4. Right-click on ConferenceService.svc in Solution Explorer and click &ldquo;View Markup&rdquo;. Change the Data Services reference as follows.<\/p>\n<p><b>Change:<\/b><\/p>\n<p>&lt;%@ ServiceHost Language=&#8221;C#&#8221; Factory=&#8221;System.Data.Services.DataServiceHostFactory, <span style=\"background-color: #ffff00\">System.Data.Services<\/span>, Version=4.0.0.0, Culture=neutral,<span style=\"background-color: #ffffff\"> PublicKeyToken=b77a5c561934e089&#8243; <\/span>Service=&#8221;ConferenceReferenceDataTest.ConferenceContext&#8221; %&gt;<\/p>\n<p><b>To:<\/b><\/p>\n<p>&lt;%@ ServiceHost Language=&#8221;C#&#8221; Factory=&#8221;System.Data.Services.DataServiceHostFactory, <span style=\"background-color: #ffff00\">Microsoft.Data.Services.Delta<\/span>, Version=4.0.0.0, Culture=neutral, <span style=\"background-color: #ffffff\">PublicKeyToken=b77a5c561934e089&#8243; Service<\/span>=&#8221;ConferenceReferenceDataTest.ConferenceService&#8221; %&gt;<\/p>\n<p>6. Change the ConferenceService.svc to be the startup file for the application by right clicking on ConferenceService.svc in Solution Explorer and choosing &ldquo;Set as Start Page&rdquo;. <\/p>\n<p>7. Run the application by pressing F5.<\/p>\n<ul>\n<li>In your browser settings ensure feed reading view is turned off. Using Internet Explorer 9 you can turn feed reading view off by choosing Options-&gt;Content then clicking &ldquo;Settings for Feeds and Web Slices&rdquo;. In the dialog that opens uncheck the &ldquo;Turn on feed reading view&rdquo; checkbox. <\/li>\n<\/ul>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/odatateam\/wp-content\/uploads\/sites\/23\/2011\/04\/1376.clip_image003_thumb_25B0575F.png\"><img decoding=\"async\" height=\"244\" width=\"230\" src=\"https:\/\/devblogs.microsoft.com\/odatateam\/wp-content\/uploads\/sites\/23\/2011\/04\/1376.clip_image003_thumb_25B0575F.png\" alt=\"clip_image003\" border=\"0\" title=\"clip_image003\" style=\"border-right-width: 0px;margin: 0px;padding-left: 0px;padding-right: 0px;border-top-width: 0px;border-bottom-width: 0px;border-left-width: 0px;padding-top: 0px\" \/><\/a><\/p>\n<ul>\n<li>Request all Sessions with this OData query: <a href=\"http:\/\/localhost:11497\/ConferenceService.svc\/Sessions\">http:\/\/localhost:11497\/ConferenceService.svc\/Sessions<\/a> (<em>note the port, 11497, will likely be different<\/em> on your machine) and note there&rsquo;s no delta link at the bottom of the page. This is because the DeltaEnabled attribute was not placed on the Session class in the model.cs file. <\/li>\n<li>Request all tweets with this OData query: <a href=\"http:\/\/localhost:11497\/ConferenceService.svc\/Tweets\">http:\/\/localhost:11497\/ConferenceService.svc\/Tweets<\/a> and note there is a delta link at the bottom of the page: <\/li>\n<\/ul>\n<p>&lt;link rel=&#8221;https:\/\/odata.org\/delta&#8221; href=<span style=\"background-color: #ffff00\"><a href=\"http:\/\/localhost:11497\/ConferenceService.svc\/Tweets?$deltatoken=2002\">http:\/\/localhost:11497\/ConferenceService.svc\/Tweets?$deltatoken=2002<\/a><\/span> \/&gt;<\/p>\n<blockquote>\n<p>The delta link is shown because the DeltaEnabled attribute was used on the Tweet class.<\/p>\n<\/blockquote>\n<ul>\n<li>The delta link will allow you to obtain any changes made to the data based from that current point in time. You can think of it like a reference to what your data looked like at a specific point in time. For now copy just the delta link to the clipboard with Control-C. <\/li>\n<\/ul>\n<p>8. Open a new browser instance, paste the delta link into the nav bar: <a href=\"http:\/\/localhost:11497\/ConferenceService.svc\/Tweets?$deltatoken=2002\">http:\/\/localhost:11497\/ConferenceService.svc\/Tweets?$deltatoken=2002<\/a>, and press enter.<\/p>\n<p>9. Note the delta link returns no new data. This is because no changes have been made to the data in the database since we queried the service and obtained the delta link. If any changes are made to the data (Inserts, Updates or Deletes) changes would be shown when you open the delta link.<\/p>\n<p>10. Open SQL Server Management Studio, create a new query file and change the connection to the ConferenceReferenceDataTest.ConferenceContext database. Note the database was created by a code first convention based the classes in model.cs.<\/p>\n<p>11. Execute the following query to add a new row to the Tweets table:<\/p>\n<p>insert into Tweets (Text, SessionId) values (&#8216;test tweet&#8217;, 1)<\/p>\n<p>12. Refresh the delta link and note that the newly inserted test tweet record is shown. Notice also that an updated delta link is provided, giving a way to track any changes from the current point in time. This shows how the delta link can be used to obtain changed data. A client can hence use the OData protocol to query for delta-enabled entities, store them locally, and update them as desired.<\/p>\n<p>13. Stop debugging the project and return to Visual Studio.<\/p>\n<h3>Write a simple HTML5 front end <\/h3>\n<p>We&rsquo;re going to use HTML5 and the reference data caching-enabled datajs library to build a simple front end that allows browsing sessions and viewing session detail with tweets. We&rsquo;ll leverage a pre-written library that uses the reference data capabilities added to OData and leverages the datajs local store capabilities for local storage. <\/p>\n<p>1. Add a new HTML page to the root of the project and name it SessionBrowsing.htm.<\/p>\n<p>2. Add the following HTML to the &lt;body&gt; section of the .htm file:<\/p>\n<blockquote>\n<pre class=\"code\"><span style=\"color: blue\">&lt;<\/span><span style=\"color: maroon\">body<\/span><span style=\"color: blue\">&gt;\r\n&lt;<\/span><span style=\"color: maroon\">button <\/span><span style=\"color: red\">id<\/span><span style=\"color: blue\">='ClearDataJsStore'&gt;<\/span>Clear Local Store<span style=\"color: blue\">&lt;\/<\/span><span style=\"color: maroon\">button<\/span><span style=\"color: blue\">&gt;\r\n&lt;<\/span><span style=\"color: maroon\">button <\/span><span style=\"color: red\">id<\/span><span style=\"color: blue\">='UpdateDataJsStore'&gt;<\/span>Update Tweet Store<span style=\"color: blue\">&lt;\/<\/span><span style=\"color: maroon\">button<\/span><span style=\"color: blue\">&gt;\r\n&lt;<\/span><span style=\"color: maroon\">br <\/span><span style=\"color: blue\">\/&gt;\r\n&lt;<\/span><span style=\"color: maroon\">br <\/span><span style=\"color: blue\">\/&gt;\r\n<\/span>Choose a Session: \r\n<span style=\"color: blue\">&lt;<\/span><span style=\"color: maroon\">select <\/span><span style=\"color: red\">id<\/span><span style=\"color: blue\">='sessionComboBox'&gt;\r\n&lt;\/<\/span><span style=\"color: maroon\">select<\/span><span style=\"color: blue\">&gt;\r\n&lt;<\/span><span style=\"color: maroon\">br <\/span><span style=\"color: blue\">\/&gt;\r\n&lt;<\/span><span style=\"color: maroon\">br <\/span><span style=\"color: blue\">\/&gt;\r\n&lt;<\/span><span style=\"color: maroon\">div <\/span><span style=\"color: red\">id<\/span><span style=\"color: blue\">='SessionDetail'&gt;<\/span>No session selected.<span style=\"color: blue\">&lt;\/<\/span><span style=\"color: maroon\">div<\/span><span style=\"color: blue\">&gt;\r\n&lt;\/<\/span><span style=\"color: maroon\">body<\/span><span style=\"color: blue\">&gt;\r\n<\/span><\/pre>\n<\/blockquote>\n<p>3. At the top of the head section, add the following script references immediately after the head element:<\/p>\n<blockquote>\n<pre class=\"code\"><span style=\"color: blue\">&lt;<\/span><span style=\"color: maroon\">head<\/span><span style=\"color: blue\">&gt; \r\n    &lt;<\/span><span style=\"color: maroon\">script <\/span><span style=\"color: red\">src<\/span><span style=\"color: blue\">=\"http:\/\/ajax.aspnetcdn.com\/ajax\/jQuery\/jquery-1.5.2.min.js\" <\/span><span style=\"color: red\">type<\/span><span style=\"color: blue\">=\"text\/javascript\"&gt;&lt;\/<\/span><span style=\"color: maroon\">script<\/span><span style=\"color: blue\">&gt;\r\n    &lt;<\/span><span style=\"color: maroon\">script <\/span><span style=\"color: red\">src<\/span><span style=\"color: blue\">=\".Scriptsdatajs-0.0.2.js\" <\/span><span style=\"color: red\">type<\/span><span style=\"color: blue\">=\"text\/javascript\"&gt;&lt;\/<\/span><span style=\"color: maroon\">script<\/span><span style=\"color: blue\">&gt;\r\n    &lt;<\/span><span style=\"color: maroon\">script <\/span><span style=\"color: red\">src<\/span><span style=\"color: blue\">=\".ScriptsTweetCaching.js\" <\/span><span style=\"color: red\">type<\/span><span style=\"color: blue\">=\"text\/javascript\"&gt;&lt;\/<\/span><span style=\"color: maroon\">script<\/span><span style=\"color: blue\">&gt;\r\n&hellip;<\/span><\/pre>\n<\/blockquote>\n<p>4. In the head section, add the following javascript functions. These functions:<\/p>\n<ul>\n<li>Pull sessions from our OData service and add them to your combobox. <\/li>\n<li>Create a javascript handler for when a session is selected from the combobox. <\/li>\n<li>Create handlers for clearing and updating the local store. <\/li>\n<\/ul>\n<pre class=\"code\">    <span style=\"color: blue\">&lt;<\/span><span style=\"color: maroon\">script <\/span><span style=\"color: red\">type<\/span><span style=\"color: blue\">=\"text\/javascript\"&gt;\r\n        <\/span><span style=\"color: #006400\">\/\/load all sessions through OData\r\n        <\/span>$(<span style=\"color: blue\">function <\/span>() {\r\n            <span style=\"color: #006400\">\/\/query for loading sessions from OData\r\n            <\/span><span style=\"color: blue\">var <\/span>sessionQuery = <span style=\"color: maroon\">\" ConferenceService.svc\/Sessions?$select=Id,Name\"<\/span>;\r\n            <span style=\"color: #006400\">\/\/initial load of sessions\r\n            <\/span>OData.read(sessionQuery,\r\n                    <span style=\"color: blue\">function <\/span>(data, request) {\r\n                        $(<span style=\"color: maroon\">\"#sessionComboBox\"<\/span>).html(<span style=\"color: maroon\">\"\"<\/span>);\r\n                        $(<span style=\"color: maroon\">\"&lt;option value='-1'&gt;&lt;\/option&gt;\"<\/span>).appendTo(<span style=\"color: maroon\">\"#sessionComboBox\"<\/span>);\r\n                        <span style=\"color: blue\">var <\/span>i, length;\r\n                        <span style=\"color: blue\">for <\/span>(i = 0, length = data.results.length; i &lt; length; i++) {\r\n                            $(<span style=\"color: maroon\">\"&lt;option value='\" <\/span>+ data.results[i].Id + <span style=\"color: maroon\">\"'&gt;\" <\/span>+ data.results[i].Name \r\n                                + <span style=\"color: maroon\">\"&lt;\/option&gt;\"<\/span>).appendTo(<span style=\"color: maroon\">\"#sessionComboBox\"<\/span>);\r\n                        }\r\n                    },\r\n                    <span style=\"color: blue\">function <\/span>(err) {\r\n                        alert(<span style=\"color: maroon\">\"Error occurred \" <\/span>+ err.message);\r\n                    }\r\n                );\r\n\r\n            <span style=\"color: #006400\">\/\/handler for combo box\r\n            <\/span>$(<span style=\"color: maroon\">\"#sessionComboBox\"<\/span>).change(<span style=\"color: blue\">function <\/span>() {\r\n                <span style=\"color: blue\">var <\/span>sessionId = $(<span style=\"color: maroon\">\"#sessionComboBox\"<\/span>).val();\r\n                <span style=\"color: blue\">if <\/span>(sessionId &gt; 0) {\r\n\r\n                    <span style=\"color: blue\">var <\/span>sessionName = $(<span style=\"color: maroon\">\"#sessionComboBox option:selected\"<\/span>).text();\r\n                    <span style=\"color: #006400\">\/\/change localStore to localStore everywhere and TweetStore to be TweetStore\r\n                    <\/span><span style=\"color: blue\">var <\/span>localStore = datajs.createStore(<span style=\"color: maroon\">\"TweetStore\"<\/span>);\r\n\r\n                    document.getElementById(<span style=\"color: maroon\">\"SessionDetail\"<\/span>).innerHTML = <span style=\"color: maroon\">\"\"<\/span>;\r\n                    $(<span style=\"color: maroon\">'#SessionDetail'<\/span>).append(<span style=\"color: maroon\">'Tweets for session ' <\/span>+ sessionName + <span style=\"color: maroon\">\":&lt;br&gt;\"<\/span>);\r\n                    AppendTweetsForSessionToForm(sessionId, localStore, <span style=\"color: maroon\">\"SessionDetail\"<\/span>);\r\n\r\n                } <span style=\"color: blue\">else <\/span>{\r\n                    <span style=\"color: blue\">var <\/span>detailHtml = <span style=\"color: maroon\">\"No session selected.\"<\/span>;\r\n                    document.getElementById(<span style=\"color: maroon\">\"SessionDetail\"<\/span>).innerHTML = detailHtml;\r\n                }\r\n            });\r\n\r\n            <span style=\"color: #006400\">\/\/handler for clearing the store\r\n            <\/span>$(<span style=\"color: maroon\">\"#ClearDataJsStore\"<\/span>).click(<span style=\"color: blue\">function <\/span>() {\r\n                ClearStore();\r\n            });\r\n\r\n            <span style=\"color: #006400\">\/\/handler for updating the store\r\n            <\/span>$(<span style=\"color: maroon\">\"#UpdateDataJsStore\"<\/span>).click(<span style=\"color: blue\">function <\/span>() {\r\n                UpdateStoredTweetData();\r\n                alert(<span style=\"color: maroon\">\"Local Store Updated!\"<\/span>);\r\n            });\r\n\r\n        });\r\n        <span style=\"color: blue\">&lt;\/<\/span><span style=\"color: maroon\">script<\/span><span style=\"color: blue\">&gt;\r\n\r\n<\/span><\/pre>\n<p>5. Change the startup page for the application to the SessionBrowsing.htm file by right clicking on SessionBrowsing.htm in Solution Explorer and choosing &ldquo;Set as Start Page&rdquo;. <\/p>\n<p>6. Run the application. The application should look similar to:<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/odatateam\/wp-content\/uploads\/sites\/23\/2011\/04\/7750.clip_image005_thumb_7756D1B1.jpg\"><img decoding=\"async\" height=\"284\" width=\"506\" src=\"https:\/\/devblogs.microsoft.com\/odatateam\/wp-content\/uploads\/sites\/23\/2011\/04\/7750.clip_image005_thumb_7756D1B1.jpg\" alt=\"clip_image005\" border=\"0\" title=\"clip_image005\" style=\"border-right-width: 0px;padding-left: 0px;padding-right: 0px;border-top-width: 0px;border-bottom-width: 0px;border-left-width: 0px;padding-top: 0px\" \/><\/a><\/p>\n<ul>\n<li>Click the &lsquo;Clear Local Store&rsquo; button: This removes all data from the cache. <\/li>\n<li>Click the &lsquo;Update Tweet Store&rsquo; button. This refreshes the cache. <\/li>\n<li>Choose a session from the combo box and note the tweets shown for the session. <\/li>\n<li>Switch to SSMS and add, update or remove tweets from the Tweets table. <\/li>\n<li>Click the &lsquo;Update Tweet Store&rsquo; button then choose a session from the drop down box again.&nbsp; Note tweets were updated for the session in question. <\/li>\n<\/ul>\n<p>This simple application uses OData delta enabled functionality in an HTML5 web application using datajs. In this case datajs local storage capabilities are used to store Tweet data and datajs OData query capabilities are used to update the Tweet data.<\/p>\n<h3>Conclusion<\/h3>\n<p>This walkthrough offers an introduction to how a delta enabled service and application could be built. The objective was to build a simple application in order to walk through the reference data caching features in the OData Reference Data Caching CTP. The walkthrough isn&rsquo;t intended for production use but hopefully is of value in learning about the protocol additions to OData as well as in providing practical knowledge in how to build applications using the new protocol features. Hopefully you found the walkthrough useful. Please feel free to give feedback in the comments for this blog post as well as in our prerelease forums <a href=\"http:\/\/social.msdn.microsoft.com\/Forums\/en-US\/dataservices\/threads\">here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This walkthrough shows how a simple web application can be built using the reference data caching features in the &ldquo;Microsoft WCF Data Services For .NET March 2011 Community Technical Preview with Reference Data Caching Extensions&rdquo; aka &ldquo;Reference Data Caching CTP&rdquo;. The walkthrough isn&rsquo;t intended for production use but should be of value in learning about [&hellip;]<\/p>\n","protected":false},"author":512,"featured_media":3253,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-973","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-odata"],"acf":[],"blog_post_summary":"<p>This walkthrough shows how a simple web application can be built using the reference data caching features in the &ldquo;Microsoft WCF Data Services For .NET March 2011 Community Technical Preview with Reference Data Caching Extensions&rdquo; aka &ldquo;Reference Data Caching CTP&rdquo;. The walkthrough isn&rsquo;t intended for production use but should be of value in learning about [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/odata\/wp-json\/wp\/v2\/posts\/973","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/odata\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/odata\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/odata\/wp-json\/wp\/v2\/users\/512"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/odata\/wp-json\/wp\/v2\/comments?post=973"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/odata\/wp-json\/wp\/v2\/posts\/973\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/odata\/wp-json\/wp\/v2\/media\/3253"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/odata\/wp-json\/wp\/v2\/media?parent=973"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/odata\/wp-json\/wp\/v2\/categories?post=973"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/odata\/wp-json\/wp\/v2\/tags?post=973"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}