Send data to a partial view in Umbraco 7

Sometimes you want a partial view in Umbraco with a custom model. You can achieve that using a custom model and the UmbracoViewPage like this

@* SomePartialView: *@
@inherits Umbraco.Web.Mvc.UmbracoViewPage<MyViewModel>
@* the view: *@
@Html.Partial("SomePartialView", new MyViewModel{MyData="foo"})

But how to be able to use the regular RenderModel published content model aswell?

Alternative 1


Alternative 2

Include it as a property in your model. Or subclass the viewmodel from the RenderModel (ref

public class MyViewModel : Umbraco.Web.Models.RenderModel
    public BaseModel(IPublishedContent content)
        : base(content)


Alternative 3

Use the ViewDataDictionary:

@Html.Partial("SomePartialView", new ViewDataDictionary { { "MyData", "The value" } })
@* the view *@

Also – sometimes you want to send documents to the partial view, then simply use the IPublishedContent

@inherits Umbraco.Web.Mvc.UmbracoViewPage<IEnumerable<IPublishedContent>>;
@foreach(var doc in Model){
@Html.Partial("SomeKindOfDocumentList", Model.Content.Children())

Re-use the same view for another set of children:

@Html.Partial("SomeKindOfDocumentList", Model.Content.AncestorOrSelf(3).Children())

Upgrading Umbraco on Azure using Nuget (short notes)

I run an Umbraco 7 site as a Azure WebSite where I try to stay up to date with modern approaches like git updates and nuget package installation.

I had a site setup with Nuget Install-Package UmbracoCms for version 7.1.3. The site has version control with git, gitignoring packages and bins. Now when I needed to upgrade to 7.1.4 my successful process was:


Update-Package UmbracoCms (

Then git commit and push to get the info to my VSO repository.

And in the Visual Studio Online (Monaco) console I needed to restore the packages and re-build manually:

nuget restore mysolution.sln



C# SQL DB ad hoc workflow with EF

From time to time my customers, or their end users, call me with a problem that requires some direct editing in the database for some application.

Previously I solved those kinds of changes with the help of the good old Sql Server Management Studio, writing some T-SQL directly. But I’m not very comfortable doing so, one reason is T-SQL is not very friendly, another reason is I dont have any history to look back to. I could write management scripts in stored procedures, but that just feels clunky.

A much better solution is to use LinqPad to query and edit the data. For a few bucks I get intellisense C# with Linq and can do whatever I need very quick.

However – I do have C# projects for my data access, and there are a few methods I sometimes like to run alongside the data changes. Plus some data maintenance comes with requirements to add features to the API.

So – my current workflow is to use an EF context inside a testproject in my Visual Studio solution. And inside that I write testclasses and methods with the maintenance code I need:

Namnlös bild


I like how I keep the maintenance code easily available for future reference this way. And also the closeness to the C# application code. Ideas for improvement are much easier to implement than if I’m inside SSMS.

Notice the long descriptive method name, and for the class name I just use date as it is only expected to work on this time only.

Very important – thanks for the comment Jonas J – I do need to make sure to not run the test more than once – in my code I solve that with asserts, but that might be easy to forget. So a bettersolution might be to comment out the whole code – or at least the [TestMethod] line – after running the maintenance.

Trying out the new Azure WebSites backup

With the new backup feature for Azure WebSites its easy to create a backup for a website and its database:


I tried the manual backup and it got a basic Umbraco site backuped including the database – and restored to a new sites in a couple of minutes. (The backup gets stored (as a zip) in a blob container and can easily be deleted or downloaded.)


I stretched my tests and tried to restore a site to a staging site (a separate deployment slot). I could not do that without a small workaround:

1) Restore from the original site to a new site. This will make it possible to restore without settings that might conflict, in my case an additional domain name.
2) Create another backup from that new site.
3) Swap to the staging deployment slot.
4) Restore from 2) to the now active deployment slot.

5) It’s very cheap to temporarily create a site – and deployment slots – just be sure you delete the ones you do not need later 🙂

I also tried to restore a site to another subscription. I could not do that currently. I got error messages when I tried to restore from the blob storage from across subscriptions. I also tried to download the zip and upload it to a blob storage of the other subscription, but that resulted in the same error messages.

Failed to load resource: the server responded with a status of 404 (Not Found)

Conclusion: the website backup is very easy to use and a welcome addition to the Azure portal. Hopefully they will fix the problem with restoring across subscriptions aswell.

Azure docs resources:

Select images from photo gallery in a Cordova (Phonegap) App on Android

A week after release we realised that Android phones sometimes duplicated the photos uploaded to the server from our app. Turned out to be a bit tricky to find the solution. 

The problem only appeared on Androids. And only when adding more than one image. And only with images from the photo gallery (not from the camera).

In Phonegap I used code like this to get the photo from the gallery:

 function getPhotoWithSize(source) { 
 // Retrieve image file location from specified source, onFail, { quality: 50, 
 targetWidth: 960,
 targetHeight: 960,
 destinationType: destinationType.FILE_URI,
 sourceType: source });

Which gave me a result URI like this on Android devices:


And that kind of path works perfect in the app webview for an img src. But the resize.jpg is only a temporary file, and when the user selects the next one the file is overwritten with a new one.

That does not affect the actual webview – so everything looks fine. But when the user uploads the images later, the uploader uploads the latest file repeatedly.

I found out that it’s only for resized images cordova handles the images this way. When getting picture without height and with settings I get the path to the original file:


For that reason I need to use un-resized images here. However – for users with phones with high resolution cameras this will be a problem, especially if they add lots of pictures. So I need to handle some resizing on my own.

But – what is worse is that in the newest version of Android, the content path is changed like this:


Which neither the web viewer, nor the uploader likes. Apparently this has been fixed in the Cordova 3.5.

But it takes a while for Telerik to add new Cordova releases to AppBuilder – I don’t expect 3.5 to show up until in a few weeks. Too late for our app. So – I needed a workaround.

It took me too many hours to find a good workaround, and I only succeeded after I got a nice debug setup for my Android development:

1) Genymotion to be able to test my application on emulators for any Android version. I use Telerik AppBuilder to build and publish my app, and AppBuilder automatically recognizes running Genymotion emulators, which means I can deploy directly from AppBuilder to the running emulator. Also small updates (js / html) are pushed instantly from AB to the emulator.


2) It’s a PITA to try find errors in code without a console. Weinre is a great solution for that. Just by running Weinre server on my PC and hooking up to the .js on that server from my app I get a console on the running app.

With these tools I soon found that I did not only have to deal with the path problem.

I found out by looking at the HTML that AngularJs caused problems for me here – prefixing the src path with “unsecure:”. Turns out I needed to add “content” to the img src whitelist to make it work.

With “content” whitelisted a simple string replacer fixed the problem with the new path for me:

if (imageURI.substring(0,21)=="content://") {


Faster clicks on buttons and checkboxes with phonegap & angular

To be able to click on buttons without the default 300ms delay on mobile webapps you need to make the browser respond to touch events instead of click events. There are several options to enable that, fastclick might be the most popular all round solution. For angular there is the ngTouch module

With ngTouch js in place you enable it just by adding the module to your app and it will automatically boost all your ng-click’s.

angular.module('myApp', ['ngTouch']);

So a regular button will respond immediately rather than after that small default delay.

However, it will not change any behaviour for checkboxes – unless you add a ngclick to them aswell. And if a checkbox is wrapped inside a label, or the two of them inside a div, simply put the ngclick on the div:

<li ng-repeat="option in model.options" class="list-group-item" ng-click="option.checked=!option.checked">
<input type="checkbox" ng-model="option.checked">


Napkin-Syntax DSL + nodejs text template code generation to any language

I’ve been looking for a way to keep domain types specified in a very simple, “napkin-syntax” like way:


  SomeValue :num

And with string descriptions for use in application(s):

  Id :key
    "Descriptive name"
    "Full address"
    "I.e Street 123"

The reasons for this are

1) to keep the domain type specifications above everything else, dependent on nothing

2) to be able to easily communicate the specifications with the domain knowers (my clients) in a human understandable – and not cluttered – language

3) to be able to use the code to generate necessary types and code in whatever syntax necessary; C#, Typescript and Javascript for example

4) to make it possible for easy iterations of “top-level changes” – for me or the business persons themselves to see the results of adding and changing details immediately. Without involving the ordinary developer process.

A short (2 mins) demonstration:

Github repository

Example of editing DSL code and get the generated code automatically immediately on save. The templates (for cs and html in the example) are written with standard text template syntax.


DSL + a code generation template

The solution I’m trying here is to use a parser generator tool to define a domain specific language (DSL), and then pass the code files to language and application specific templates for the code generation.


First I looked at the MPS tool (Meta Programming System) from Jetbrains. It seems to be the most sophisticated way to do this, and is completely free. However I hoped to be able to keep this in node to be able to combine it with other nice tools I use. So I found and choose to go on with Peg.js Parser Generator for javascript, made by David Majda.

With Peg.js you define a set of syntax rules (grammar) for your DSL and then Peg generates a parser for you.

The PEGjs DSL grammar

I was a bit tricky to understand how the grammar syntax works, but I found the online playground(s) available to be very helpful. With that, some examples in the wild and the js console I managed to create a grammar that works fairly well for a first attempt in a few hours. From there to a more useful version (as in the video) it took me a little while longer, but the syntax was not very hard to learn.

Use the generated parser

After I created my grammar, I let PEG.js generate my parser (as a javascript file) which I need to use it on my domain type syntax files.

To be able to run the parser easily I used the quickpeg.js npm package which is a tiny wrapper around peg. With that I created and used this node script to generate a json object for my source:

var qp = require("quickpeg");
  parser.parseFile("project.txt",function(err,data){    console.log(data);

(dsl.grammar is the file with my dsl grammar). When I run it with my project.txt source file (as above) the created object is:

{ text: 'Project',
  type: '',
   [ { text: 'Id', type: 'key' },
     { text: 'Name', type: '' },
     { text: 'Address', type: '' },
     { text: 'SomeValue', type: 'num' } ] }

Run the created object with a template

With this object the next step is to combine it with a text template to generate the actual code.

I found that the “swig” template engine is a popular one on node and decided to give it a go. I actually never heard of it before, but the syntax is very mustache like and it was easy to create what I needed:

public class {{ text }} { {% for child in children %}
 {% if child.type=="key" || child.type=="num" %}int{% else %}string{% endif %} {{ child.text }} {get;set;}{% endfor %}

The complete node script

Here is all the node code I needed to be able to parse a piece of DSL code and combine it with a template to generate a C# class file:

var fs = require("fs");
var qp = require("quickpeg");
var swig = require("swig");
var args = process.argv.splice(2);
var tpl = swig.compileFile(args[0]);
    fs.writeFile(args[2],tpl(data),function(err,data) {
        console.log("Saved to " + args[2]);

I run it with command line arguments

node runqp cstemplate.swig project.txt project.cs

and the generated code (project.cs) looks like this

public class Project { 
 public int Id {get;set;}
 public string Name {get;set;}
 public string Address {get;set;}
 public int SomeValue {get;set;}

I found this useful and will continue to work with my DSL to generate both C#, javascript / typescript and possibly even SQL schema from it.