Build Websites and Apache Cordova/PhoneGap apps using the new HTML client for Azure Mobile Services

Posted on March 18, 2013 by nick.harris

Today Scott Guthrie announced HTML client support for Windows Azure Mobile Services such that developers can begin using Windows Azure Mobile Services to build both HTML5/JS Websites and Apache Cordova/PhoneGap apps.

The two major changes in this update include:

New Mobile Services HTML client library that supports IE8+ browsers, current versions of Chrome, Firefox, and Safari, plus PhoneGap 2.3.0+. It provides a simple JavaScript API to enable both the same storage API support we provide in other native SDKs and easy user authentication via any of the four supported identity providers – Microsoft Account, Google, Facebook, and Twitter.
Cross Origin Resource Sharing (CORS) support to enable your Mobile Service to accept cross-domain Ajax requests. You can now configure a whitelist of allowed domains for your Mobile Service using the Windows Azure management portal.

With this update Windows Azure Mobile Services now provides a scalable turnkey backend solution for your Windows Store, Windows Phone, iOS, Android and HTML5/JS applications.

To learn more about the new HTML client library for Windows Azure Mobile Services please see checkout the new HTML tutorials on WindowsAzure.com and the following short 4 minute video where Yavor Georgiev demonstrates how to quickly create a new mobile service, download the HTML client quick start app, run the app and store data within the Mobile Service then configure a custom domain with Cross-origin Resource Sharing (CORS) support

Watch on Channel9 here

If you have any questions please reach out to us via dedicated Windows Azure Mobile Services our forum.

Enjoy,

Nick Harris

Devices + Services: Near Realtime Sensor Data with Windows Azure Mobile Services, .NET MicroFramework, Pusher and ASP .NET MVC

Posted on February 13, 2013 by nick.harris

It’s no surprise to people around me that I have a strong desire to code more, so I did just that on a Saturday several weeks back and here is what I built – a new devices + services scenario using a Gadgeteer, the .NET MicroFramework, Windows Azure Mobile Services and Pusher and Windows Azure Web Sites.

Lets build this:

and get some live graphs that look like this – note up to you to do some better styling

– see it live here

The idea I set out with was to open up the power (and ease) of Windows Azure Mobile Services to embedded devices that can run .NET MicroFramework. The scenario I come up with was to capture some sensor data, insert it into a Mobile Service to store the data for historical purposes and also provide a near real time stream of data for clients such as your web browser using Pusher one of our Windows Azure Store Partners.

Capturing Sensor Data

For this scenario I am using the GHI Gadgeteer FEZ Spider and I have already installed all the pre-req software from GHI An embedded device that runs the .NET MicroFramework and has a bunch of plug and play sensors for rapid prototyping. To collect the sensor data is quite straight forward

use the designer to wire up your sensors

The following code block will show how to open the network and capture sensor data in this case light, humidity and temperature – is quite straight forward and resides within Program.cs.

With that we have now captured our sensor data which is good, but to be useful to me I wanted to store this data off the device. To do this I decided to use Windows Azure Mobile Services

Storing the Sensor Data in Mobile Services Ok the first thing that you will need to do is Create a Mobile Service. Within the Windows Azure Portal Click New+

Select Compute, Mobile Service, Create

Provide a subdomain name for your Mobile Service. This will be the endpoint that your device writes sensor data to and complete the wizard

Once your Mobile Service is provisioned. Click on it and select the Data Tab and click Add a Table

Call this table SensorReading and save

Great, with that done we now have a Windows Azure Mobile Service ready to receive our data from our embedded device. Interestingly Windows Azure Mobile Services already has client SDKs for Windows Store, Windows Phone and iOS apps. If your an Android dev support for Android coming soon – giggidy.

All of these client SDKs consume the REST API that Mobile Services provides for you out of the box. One of the powerful things that the client SDKs offer is a really simple client API for consuming these services for things like data storage and Auth.

My goal was to provide something that gives a similar experience to .NET MicroFramework devs because hey if you’re already writing software for embedded devices which is hard enough why shouldn’t you get an easy backend too? I invested a Saturday afternoon on this and provided a quick v-slice for the Insert operation. To do this I took the Windows Phone Client SDK for Mobile Services and started porting it to .NET MicroFramework. Man I must say I feel for you .NET MicroFramework devs:

no<Generics>
no LINQ
no JSON Serialization
limited Reflection capability – where did the GetProperties method go in .NET MF, I noticed PropertyInfo was there but couldn’t actually find GetProperties?

It was like coding back in ~~the dark ages~~ .NET 1.1 ah yes I remember those days. Quite a wakeup call of how far we have really come! So needless to say the Saturday afternoon was longer and not as productive as expected, sort of typical right? Anyhow I got out a partial port that provides Insert functionality and a quick and pretty dirty JSON Serializer. So here is what it looks like to use it to insert data to your Mobile Service. First we’ll need to add a reference to the (unofficial) Microsoft.Azure.Zumo.MicroFramework assembly. You can find the class library for this in the Where’s teh codez section towards the end

Now create a class SensorReading.cs, this will be the entity you will insert in your Mobile Service

To interact with our mobile service lets now create a new instance MobileServicesClient in your Program.cs

One thing you will note here is that I have not looked into how https is handled in the .NET MF so I am just using the http protocol for writing up to the Mobile Service I still need to investigate support for https on .NET MF. Now lets update temperatureHumidity_MeasurementComplete to create a new sensor reading and store insert it into your Windows Azure Mobile Service (backed by a Windows Azure SQL Database)

That’s it pretty easy right! You’ll note from an API consumer perspective that its pretty close to the experience you get for the Win Store and WP client SDKs minus the fact that I didn’t write a JSON Deserializer yet so I am not currently rehydrating the entity that was passed to the Mobile Service with the updated Id or updated properties…

So now that I had my sensor readings being stored in Windows Azure Mobile Services I wanted to look at how I could visualize this data.

Sending the sensor data to listening clients using Pusher

This is where things get pretty sweet. I wanted to visualize my sensor data in a graph as it arrived in my Mobile Service. Recently we announced a new Windows Azure Store partner – Pusher a WebSocket Powered Realtime Messaging Service. Within the Windows Azure Store you can quickly provision a Pusher account and utilize it from Mobile Services within minutes as follows.

Press New+

Select Store

Select the Pusher add-on

Walk through the remainder of the Wizard to select your plan and get your keys

Note: if the Windows Azure Store is currently not available in your region you can sign up directly on Pusher.com

Next in the Windows Azure Portal select your SensorReading table and click the script tab and set the dropdown to Insert. This will allow us to write code, called Server Scripts, that will be executed every time our Gadgeteer inserts data into our SensorReading table in Mobile Service.

Next we replace the insert code of our script to do two things save the data to our database and then use Pusher subscription to send our sensor data as it is received to all listening clients.

Graphing the data received via Pusher in a web client running on Windows Azure Web Sites

So now we had our sensor data collected, inserted and stored in Mobile Services and then pushed using pusher to any listening clients. What I wanted was a web client to visualize the data in a graph as it arrived. You can learn how to create a free Windows Azure Website using ASP.NET MVC and deploy it to Windows Azure here – http://www.windowsazure.com/en-us/develop/net/tutorials/get-started/

The following code shows how you can write a quick, not so pretty code+UI wise, graph that will receive the sensor data live via Pusher and update the graph. To do this I am using jqplot and the Pusher JavaScript library. First add your script references to _Layout.cshtml

Then add your jquery.jqplot.min.css to your /Content folder. Next we need to Update our Home/Index.cshtml view to listen/bind to our Pusher Channel and then redraw our jqplot graph as data is pushed directly from Pusher.

If you read through the code you will see pretty clearly that the Pusher implementation is 3 lines of code only – to me this is extremely cool. Itty bitty amount of code, phenomenal cosmic power!

So that’s it now we have live graphs on our website, you can checkout a running version of this code and it live graphs that I deployed to a Windows Azure Web Site here – http://microframework.azurewebsites.net

How much does it cost

Everything that I did here can be done for free with Windows Azure Windows Azure Free Trial and/or the great free tier offerings for Windows Azure Web Sites, Windows Azure Mobile Services and Pusher.

Where’s teh codez?

This is unofficial, is not supported – I did it in my free time and it Works on my machine! disclaimers all being said I really hope that this does open up a lot of doors for you for building out a whole new range of devices + services scenarios using Windows Azure and our Store Partners You can download the .NET MF lib and sample code from this github repo

Summary

I hope this has opened the door to great new devices+services scenarios you can build out for your .NET MicroFramework solutions. With few lines of code and powerful services like Windows Azure Web Sites, Windows Azure Mobile Services and Pusher you can make working in the emerging embedded devices + services space a lot easier then it has been in the past. Please do let me know if you have built something awesome in this space on the Twitterz @cloudnick

Using the new Windows Azure Tools v1.4 for VS2010

Posted on August 3, 2011 by nick.harris

The new Windows Azure Tools for v1.4 (August 2011) for VS2010 have just been released. You can download them using Web Platform Installer here. This latest version of the tools introduces several new features as follows:

Support for Multiple Service Configurations
Profiling support for Windows Azure apps running in Windows Azure
MVC 3 web role support
Package validation

Note: Profiling is only supported in VS 2010 Ultimate+Premium. All others are available from Visual Web Developer 2010 and up.

This post will take a brief look at the benefits each of these new features bring to you – the developer

Multiple Service Configurations

Gone are the days of having to change your settings in your ServiceConfiguration.cscfg when you switch from debugging your local cloud+storage emulator to publishing up to Windows Azure. For example in your development environment for:

local debug you may want to:
- utilize 1 instance of your web/worker role
- use the local storage emulator
whereas in Windows Azure you may want to:
- utilize 4 instances of your web/worker role
- use a production Windows Azure storage account

To achieve this using the new multiple service configurations is easy.

Create a new Windows Azure project with an arbitrary web or worker role.
- File > New Project > Cloud > Windows Azure Project
- Select a web or worker role and press OK
Observe that the ServiceConfiguration.cscfg is now split by default into two files:
- ServiceConfiguration.Local.cscfg – default used when debugging in VS
- ServiceConfiguration.Cloud.cscfg – a config you can use on publish

To configure each individual configuration with the settings we desired above.
- Double click on the WorkerRole1 in the roles folder of the cloud project
- then and select the Service Configuration dropdown for Cloud
- Set the desired settings for your Cloud profile ServiceConfiguration.Cloud.cscfg
You can then repeat the above for your Local configuration profile to setup and set the desired settings for ServiceConfiguration.Local.cscfg
The net result is that both ServiceConfiguration.Cloud.cscfg and ServiceConfiguration.Local.cscfg will now have their independent settings as follows:
When you hit debug now the ServiceConfiguration.Local.cscfg is used and when you hit publish you can select which Config you would like to use:

Overall its quite an easy experience to configure and use multiple Service Configuration profiles for your different environments. Please note that you can also rename and add additional Service Configuration profiles perhaps such that you would have a config for Local, Staging and Prod. For more detail on how to work with Service Configuration files please see Configuring a Windows Azure Application.

Profiling Support

This is an incredibly useful tool for any Windows Azure developer as it enables you to profile your Windows Azure application that’s running up in Windows Azure. The information gathered can help analyze any performance issues you may be facing. When you publish your application from VS you are able to specify your profiling options that will apply for the profiling session and results can be pulled for each instance.

The supported profiling options are as follows:

CPU Sampling – Monitor CPU-bound applications with low overhead
Instrumentation – Measure function call counts and timing
.NET Memory Allocation (Sampling) – Track managed memory allocation
Concurrency -Detect threads waiting for other threads

In this segment I will demonstrate how to configure a profiling session for a Windows Azure Application:

Open your existing cloud project and right click on the windows azure cloud project and select Publish

Select the Enable profiling option on the publish page and click settings

Select the type of profiling you wish to perform in this case .NET Memory Allocation

Note: Checking the Enable Tier Interaction Profiling option captures additional information about execution times of synchronous ADO.NET calls in functions of multi-tiered applications that communicate with one or more databases. With the absence of a SQL Profiler in SQL Azure this feature is useful for those developers who want to gain some insight into what queries or stored procedures are running slowly.
Press OK.
Once the deployment is complete and the application has been running for a period of time you can go and download the captured profiling report.
To download the profiling report
- Select View > Server Explorer
- Expand Windows Azure Compute
- Expand the hosted service
- Right click on the Instance that you want do download the profiling report from and press View Profiling Report
Once the report is downloaded it will open in VS and as you can see the CPU is maxing out

If we change the Current View dropdown to Allocation we can quickly identy a problem method that is using excessive amounts of memory

and finally if we right click and select View Source on the method of interest we can see the offending line causing the allocations

What an awesome tool. I look forward to digging deeper into the capabilities provided by for Windows Azure Profiling. In the meantime for more information please see – Profiling a Windows Azure Application

MVC 3 Web Role Support

ASP .NET MVC 3 web roles are now supported out of the box with the new tools. You can select ASP .NET MVC 3 from the new Windows Azure project dialog and the required assemblies used by ASP .NET MVC 3 are set to copy local for you. This results in these assemblies being deployed up to windows azure when you publish your application thus ensuring your MVC 3 application will start when deployed. I know a lot of you are probably thinking Eureka right now and those that may get a little bit too excited may even verbalize it, I know I did

To create a new Windows Azure ASP .NET MVC 3 application:

File > New Project > Cloud > Windows Azure Project
Select ASP .NET MVC 3 Web Role, press the > button followed by OK

In the ASP .NET MVC 3 project dialog select settings to suit your preferences and press ok
In solution explorer observe that all the references assemblies for ASP .NET MVC 3 that are not in the GAC in the current Windows Azure gues OS have had their Copy Local property set to true. The below image shows and example of one of the required reference assemblies that is automatically set to copy local so you dont actually have to do anything

From here on in all you have to do is start coding – For more information on ASP .NET MVC 3 see this and for a detailed walkthrough of ASP .NET MVC 3 on Windows Azure see this post by Nathan Totten

Package Validation

Last but definitely not least is improved package validation. When you select to create a package or publish your Windows Azure application. Additional warnings or errors are now provided in VS to enable you to fix the problem before you package or publish it. This as you know will be a great timesaver for details of what package validations are performed please see Troubleshooting Package Validation Errors and Warnings

Time to Download

All in all its an excellent new set of features that focus on improving your productivity and make your dev life a whole lot easier. If you have not already then now would be the time to download using Web Platform Installer

happy coding,

Nick

ASP .NET MVC 3 Beta Deploy to Azure Cycles

Posted on October 18, 2010 by nick.harris

If you have just downloaded ASP .NET MVC 3 Beta and upgraded your ASP .NET MVC 2 website then tried to deploy on Azure and found that your deploy is cycling this will likely solve your problem.

Recall while upgrading for MVC 3 Beta you update your project to reference System.Web.Mvc.dll (v3.0.0.0), System.WebPages.dll and System.Web.Helpers.dll – well the likely cause of the issue is you have not updated those three assembly references to copy local i.e Right Click >> Copy Local = True. If you were to deploy at this stage you would still have the cycle issue. With a quick review of intellitrace logs you you have to add a reference to WebMatrix.Data.dll, System.Web.WebPages.Razor.dll and Microsoft.Web.Infrastructure.dll all of which when run on local are retrieved from the GAC. Therefore the full list of assemblies to copy local becomes:

System.Web.Mvc.dll (v3.0.0.0)

System.WebPages.dll

System.Web.Helpers.dll

WebMatrix.Data.dll

System.Web.WebPages.Razor.dll

Microsoft.Web.Infrastructure.dll

Hope this saves you some time
Nick

A first look at the ASP .NET MVC 3 WebGrid

Posted on October 10, 2010 by nick.harris

I just installed ASP .NET MVC 3 Beta. This post provides a brief introduction to the new WebGrid.
Note:

At the time of writing the ASP .NET MVC 3 was in Beta
I am not yet using Razor for my view markup
Sorry about the formatting in the syntax highlighting on this one

How to add an ActionLink Edit column to the ASP .NET MVC 3 WebGrid.

To start lets look at a cut down version of the original ASP .NET MVC 2 View generated (except the delete action) using the built in scaffolding:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<ABC.Web.Models.ModelX>>" %>
<table>
<tr>
<th></th>
<th>
   Title
</th>
<th></th>
</tr>
<% foreach (var item in Model) { %>
   <tr>
   <td>
      <%: Html.ActionLink("Edit", "Edit", new { id=item.Id }) %>
   </td>
   <td>
      <%: item.Title %>
   </td>
   <td>
      <a onclick="deleteRecord('Cart', '<%= item.Id %>')" href="JavaScript:void(0)">Delete</a>
   </td>
   </tr>
   <% } %>
<p>
<%: Html.ActionLink("Create New", "Create") %>
</p>

Replacing this with the ASP .NET MVC 3 Beta WebGrid can be performed as follows:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<ABC.Web.Models.ModelX>>" %>
<%
var grid = new System.Web.Helpers.WebGrid(Model, new List<string>(){"Title"});
%>
<%= grid.GetHtml(columns: grid.Columns(
      grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { id = item.Id })),
      grid.Column("Title"),
      grid.Column(format:(item) => Html.ActionLink("Delete", "Delete", null, new {onclick=string.Format("deleteRecord('Cart', '{0}')", item.Id), @class="Delete", href="JavaScript:void(0)"}))
)
) %>
<p>
<%: Html.ActionLink("Create New", "Create") %>
</p>

The important point to note here is that to get your Edit ActionLink you need to provide a Column definition with the format parameter specified such that it returns your ActionLink i.e

grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { id = item.Id }))

How to enable/disable the pager and change the page size.

Straight out of the box the WebGrid supports paging which by default is enabled with a page size of 10 but can be configured using the rowsPerPage and canPage attributes as follows:

<%
var grid = new System.Web.Helpers.WebGrid(Model,
             columnNames: new List<string>(){"Title"},
             rowsPerPage:5,
             canPage:true);
%>

How to emit CSS class attributes to your table

The last thing worth mentioning in this introductory post is that the css class can also be specified for the table using the following parameters tableStyle, headerStyle, footerStyle, rowStyle and alternateRowStyle style as follows:

<%= grid.GetHtml(
   tableStyle: "table",
   headerStyle: "header",
   footerStyle: "footer",
   rowStyle: "row",
   alternatingRowStyle: "alt",
   columns: grid.Columns(
      grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { id = item.Id })),
      grid.Column("Title"),
      grid.Column(format:(item) => Html.ActionLink("Delete", "Delete", null, new {onclick=string.Format("deleteRecord(Cart, '{0}')", item.Id), @class="Delete", href="JavaScript:void(0)"}))
)
) %>

Happy Coding,
Nick

How to Enable IntelliTrace on Windows Azure

Posted on September 20, 2010 by nick.harris

If your Azure project targets the .NET framework 4.0 you can utilize IntelliTrace to help debug your application. This post briefly covers how to enable and retrieve your IntelliTrace log. The issue I was debugging in this scenario was a service I was deploying and ASP .NET MVC website it was initializing /stopping / initializing / stopping repeatedly during the deploy to Azure.

When publishing your service select the Enable IntelliTrace for .NET 4 roles checkbox

Enable IntelliTrace

Let the instance deploy and cycle through the initializing and stopping states
Then to download your IntelliTrace log. In Server Explorer expand your windows Azure hosted service node, right click on your hosting account and select View IntelliTrace log. This will be downloaded Async.

View Intellitrace

Once the log is retrieved you can review the exceptions

IntelliTrace

In this case I had not set the System.Web.MVC assembly to copy local and re-deployed. Job done.

Nick

ASP .NET Ajax ActionLink with UpdateTargetId callback

Posted on September 6, 2010 by nick.harris

The Ajax.ActionLink available withing ASP.NET AJAX can be used to invoke controller actions and update your form asynchronously based on the response. This brief post will describe at how to do this within the context of an Approvals table.
In yoru ASP .NET MVC 2 Web Application add a references to the ASP.NET AJAX library scripts into your Views/Shared/Site.Master at the end of your head element.

<head>
...
<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"/>
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"/>
</head>

Update your view

Tip: To improve performance these files are available on the Microsoft CDN which means if you use this they should be downloaded faster from the appropriate node based on user location as compaired to from your own web server.

Add your Ajax.ActionLinks. In this case we want one to Approve and one to Reject. On success we want the cell to the left of the ActionLinks to be updated to contain the updated status.

<%@ Page Title="" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<Dummy.Web.Models.SomeModel>>" %>

<asp:Content ContentPlaceHolderID="TitleContent" runat="server">
 Index
</asp:Content>

<asp:Content ContentPlaceHolderID="MainContent" runat="server">
 <table>
        <tr>
            <th>
                Name
            </th>
            <th>
                Caption
            </th>         
            <th>
               Approved/Rejected
            </th>          
        </tr>

    <% foreach (var item in Model) { %>   
        <tr>
            <td>
                <%: item.Name %>
            </td>
            <td>
                <%: item.Caption %>
            </td>         
            <td id="status_<%: item.Id.ToString() %>>
                 <%: item.Status %>
            </td>
            <td>
                <%: Ajax.ActionLink("Approve", "ApproveAction", new { id= item.Id }, new AjaxOptions() { UpdateTargetId = string.Format("status_{0}", item.Id) })%>
                <%: Ajax.ActionLink("Reject", "RejectAction", new { id= item.Id }, new AjaxOptions() { UpdateTargetId = string.Format("status_{0}", item.Id) })%>
            </td>         
        </tr>
   
    <% } %>
</asp:Content>

Note: the Id of the cell that we want to update afterwards is set dynamically as follows <td id=”status_<%: item.Id.ToString() %>> then the ActionLink parameters state Text of Approve, call the Controllers ApproveAction with the parameter id set as a value of item.Id and the result of the ApproveAction is to update the target cell with id string.Format(“status_{0}”, item.Id)

Update your corresponding controller to define the ApproveAction and RejectAction methods:

using System;
using System.Web.Mvc;
using Dummy.Web.Models;
using Dummy.Web.Models.Common;

namespace Dummy.Web.Controllers
{
    [Authorize]
    public class ApprovalsController : AntiForgeryController
    {
        ISomeRepository _someRepository;

        public ApprovalsController():this(new someRepository()){ }

        public ApprovalsController(ISomeRepository someRepository)
        {           
            _someRepository = someRepository);
        }
        //
        // GET: /Approvals/
        public ActionResult Index()
        {
            return View(_someRepository.GetItemsForApproval(20));
        }

        [HttpPost]       
        public string ApproveAction(Guid id)
        {
           return UpdateAction(id, ApprovalStatusType.Approved);
        }

        [HttpPost]       
        public string RejectAction(Guid id)
        {
           return UpdateAction(id, ApprovalStatusType.Rejected);
        }

        protected string UpdateAction(Guid id, ApprovalStatusType status)
        {

           string result = "Error: Unable to Update";
            if (_someRepository.UpdateStatus(id, ApprovalStatusType.Approved))
            {
                result = ApprovalStatusType.Approved.ToString();
            }

            return result;
        }
    }
}

Thats about all that is required to add an Ajax.ActionLink that can be used to invoke controller actions and update your form asynchronously based on the controllers response.

Nick

ASP .NET MVC datetime editor template using jQuery datepicker

Posted on August 26, 2010 by nick.harris

This post details how to create an ASP .NET MVC editor template for the DateTime? datatype which will show a jQuery datepicker:

Add the the jQuery UI js, css and Images to solution:
- I have put the jQuery images and css under /Content/Images and /Content respectively.
- and the js under the /Scripts
Update your site.master to reference the js and css:

    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/jquery.ui.all.css" rel="stylesheet" type="text/css" />

    <script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"/>
    <script src="../../Scripts/jquery.ui.core.js" type="text/javascript" />
    <script src="../../Scripts/jquery.ui.widget.js" type="text/javascript" />
    <script src="../../Scripts/jquery.ui.datepicker.js" type="text/javascript" />

    <script src="/Scripts/MicrosoftAjax.js" type="text/javascript" />
    <script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript" />
    <script src="/Scripts/MicrosoftMvcValidation.js" type="text/javascript" />

Create the Editor Template:
- Create the following folder structure if not already present Views/Shared/EditorTemplates/
- Add a ViewUserControl called DateTime.ascx and use the following as thee content.

Note: the htmlAttributes parameter is new { @class = “dp”}) this will render a class=’dp’ attribute for later use by jQuery to identify where datepickers are required

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.DateTime?>" %>
<%: Html.TextBox("",  String.Format("{0:yyyy-MM-dd}", Model.HasValue ? Model : DateTime.Today), new { @class = "dp"})%>

JQuery datepicker script:
- Place the following jQuery preferably in a Common.js or in the head of your page or site master wher ethe control will be displayed.

<script  type="text/javascript">
 $(document).ready(function () {
 $(".dp").datepicker({
             changeMonth: true,
             changeYear: true,
             dateFormat: 'yy-mm-dd'
                   });
                });
  </script>

Note: that we are searching for anything using the “.dp” class and supplying arguments to the datepicker to format the date and provide dropdowns for year and month.

At this point any defined view that you have that is rendering the DateTime should now show the editor as the DateTime.ascx editor template

E.g I have a view binding to my Model and one of the properties called StartDate is DateTime? the view for displaying this model contains

  
<div class="editor-label">
    <%: Html.LabelFor(model => model.StartDate) %>
</div>
<div class="editor-field">
    <%: Html.EditorFor(model => model.StartDate)%>
    <%: Html.ValidationMessageFor(model => model.StartDate) %>
</div>

Upon rendering the DateTime editor template is applied and hey presto:

Nick

Debugging WCF Data Services – An error occured while processing this request

Posted on August 20, 2010 by nick.harris

Issue: I was calling my WCF Data Service today and was getting a NotSupportedException with an InnerException of “An error occured while processing this request” and no further detail which is not very helpful for debugging.

Solution: So the workaround for this is to set UseVerboseErrors in your service in your service initialization method like so

public static void InitializeService(DataServiceConfiguration config)
{
   config.UseVerboseErrors = true;

  .....

}

This however is not good for production scenarios as we don’t want Verbose errors going back to clients. Given that it is hardcoded to true ideally you would want to be able to configure this in your web.config. There is no section within the web.config supported out of the box for this. So you can use an appSetting or create your own custom section.

after building and deploying the service you should now get the full detail in your exception.InnerException.Message E.g

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<error xmlns="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata">
  <code></code>
  <message xml:lang="en-AU">An error occurred while processing this request.</message>
  <innererror>
    <message>Unable to update the EntitySet 'Posts' because it has a DefiningQuery and no &lt;InsertFunction&gt; element exists in the &lt;ModificationFunctionMapping&gt; element to support the current operation.</message>
    <type>System.Data.UpdateException</type>
    <stacktrace>   at System.Data.SqlClient.SqlGen.DmlSqlGenerator.ExpressionTranslator.Visit(DbScanExpression expression)&#xD;
   at System.Data.SqlClient.SqlGen.DmlSqlGenerator.GenerateInsertSql(DbInsertCommandTree tree, SqlVersion sqlVersion, List`1&amp; parameters)&#xD;
   at System.Data.SqlClient.SqlProviderServices.CreateCommand(DbProviderManifest providerManifest, DbCommandTree commandTree)&#xD;
   at System.Data.Mapping.Update.Internal.UpdateTranslator.CreateCommand(DbModificationCommandTree commandTree)&#xD;
   at System.Data.Mapping.Update.Internal.DynamicUpdateCommand.CreateCommand(UpdateTranslator translator, Dictionary`2 identifierValues)&#xD;
   at System.Data.Mapping.Update.Internal.DynamicUpdateCommand.Execute(UpdateTranslator translator, EntityConnection connection, Dictionary`2 identifierValues, List`1 generatedValues)&#xD;
   at System.Data.Mapping.Update.Internal.UpdateTranslator.Update(IEntityStateManager stateManager, IEntityAdapter adapter)&#xD;
   at System.Data.Objects.ObjectContext.SaveChanges(SaveOptions options)&#xD;
   at System.Data.Services.Providers.ObjectContextServiceProvider.SaveChanges()&#xD;
   at System.Data.Services.DataService`1.HandleNonBatchRequest(RequestDescription description)&#xD;
   at System.Data.Services.DataService`1.HandleRequest()</stacktrace>
  </innererror>
</error>

Nick

Nick Harris is a Senior Technical Evangelist at Microsoft specializing in Windows Azure. Before Microsoft, he founded his own startup AdGAC a mobile advertising company developed utilizing Windows Azure, WP7 and ASP.NET MVC. In the 9 years prior, Nick worked as both a consultant and Senior Software Engineer delivering smart client applications, distributed enterprise applications and airborne software systems. While not working you can find him blogging or on Twitter about Windows Azure along with a diverse range of related technical content.

Nick Harris .NET

Devices+Services Development with Windows Azure, ASP .NET MVC, Windows 8 and Windows Phone

Category Archives: ASP .NET

Build Websites and Apache Cordova/PhoneGap apps using the new HTML client for Azure Mobile Services

Devices + Services: Near Realtime Sensor Data with Windows Azure Mobile Services, .NET MicroFramework, Pusher and ASP .NET MVC

Using the new Windows Azure Tools v1.4 for VS2010

Multiple Service Configurations

Profiling Support

MVC 3 Web Role Support

Package Validation

Time to Download

ASP .NET MVC 3 Beta Deploy to Azure Cycles

A first look at the ASP .NET MVC 3 WebGrid

How to Enable IntelliTrace on Windows Azure

ASP .NET Ajax ActionLink with UpdateTargetId callback

ASP .NET MVC datetime editor template using jQuery datepicker

Debugging WCF Data Services – An error occured while processing this request