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>
@Model.MyData
@* 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

@{
  ViewData["MyData"]="foo";
}
@{
  @ViewData["MyData"];
}

Alternative 2

Include it as a property in your model. Or subclass the viewmodel from the RenderModel (ref http://our.umbraco.org/forum/templating/templates-and-document-types/38311-Using-RenderMvcController?p=2)

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 *@
@Model.Content...
@ViewData["MyData"]

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:

Locally:

Update-Package UmbracoCms (http://our.umbraco.org/documentation/Installation/Upgrading/general)

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

msbuild

 

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">
<label>
{{option.text}}
</label>
</li>


 

Trying out ftploy.com – autodeploy to ftp on github push

I just found a tool I like, it’s called ftploy.com and it deploys to ftp on a push to github (or bitbucket). As I have a few sites still on ftp, and I like the git push -> deploy flow this is a service I wanted to try. The service is made by a british company called Cocoon http://wearecocoon.co.uk/.

It was easy to get started, just by log in with my Github account and add an ftp server. The service has been around for a while and they seem to be serious and alert https://twitter.com/ftploy so I dared to add the credentials for a ftp login for their service on my server.

My idea is to push deploy javascripts from one project and razor from another project to a website of mine.

I had a few questions:

  • Can I deploy to a specified folder?
  • From a specified branch?
  • Will it keep files I have in the folder before?
  • Can it delete files I delete from the repository?

I did some experiments and I was happy to find out that the answer to all my questions was yes. I can deploy from a branch to a specified subfolder in the ftp, and it did not touch the files I had in the folder before, nor the ones I added manually in between deploys. But it took care of deletions I made within the repository.

The UI could need a little bit of love. Some minor issues (far from showstoppers). Also I would like to be able to pay with paypal. The service costs 12£ a month for unlimited projects. One proj is free.

I like their roadmap, both for being explicit with their plans and for many of the features they plan to add.

My current deploy to Azure setup

Azure is easy to use and powerful. We all know that. Right? This is the way I setup my current project after I moved from a physical server to Azure.

1. A regular Git repository, hosted on Github.
2. The master branch for my daily up-to-date-code. Other branches for experiments.
3. A .gitignore that ignores folders like node_modules and .idea
4. A deploy folder that I copy all the relevant deploy files to – and only them – when it is time to deploy to Azure. Manually or with grunt.
5. A .deployment file that points to the deploy folder.
6. A free (for my staging/demo site) Azure website pointing to my repository and the master branch.

With this I commit and push often, but only save files to deploy + push those when it’s time for a new deployment.

Execute Javascript and Typescript within Visual Studio (and repl)

Add PhantomJs as an external tool in Visual Studio and you have a really easy way to test run your javascript or typescript. You can even use it to play around with your code in a run-eval-print-loop (repl).

First download PhantomJs from http://phantomjs.org/ and extract the folder. Copy the path.

phantom

Next open Visual Studio and open the menu Tools > External Tools

Add a new tool, give it the title Phantom&Js (the ampersand makes you get an alt-shortcut for the letter J in the menu).

Paste the path to your phantomjs.exe as the command, add $(ItemFileName).js as the filename and add $(ItemDir) as the initial directory.

The explicit file extension (.js) makes typescript files work just fine, we cannot send the actual .ts file to PhantomJs, so we need the typescript compiled .js (use WebEssentials to compile to .js on save).

Check the “use output window” to get the console result there.

 

Next add a small typescript file, sample code in this image, the actual test code is below the class, simply a value output’ed with console.log:
console ts
Save the file. Now run the script from the Tools menu, or hit Alt+T,J .

You should get the result “hello Foo” in the output window.
 

phantom.exit(); is necessary to stop the execution. (Otherwise you can do that from the tools window.)

 

 

Add a REPL
Cool – but what if you like to play with the code in a console window? That is also possible since PhantomJs can be run in “REPL mode”. To do that, just create another external tool. With the following values:

Title : Phantom &Repl
Command : the path to phantomjs.exe
Filename : empty
InitialDirectory : $(ItemDir)

Do not check the use output window checkbox.

Now when you hit Alt+T+R you will get a command prompt with a phantomjs> prompt.
Try writing some code:

var foo = "bar";
console.log(foo);

You should get the result “bar” inside the console.

You can also load your own scripts into the repl using the injectJs function:

phantom.injectJs("somelib.js");
var test = new MyAwesomeClass();
console.log(test.Whatever());

Check out the PhantomJs site for more information.

Note: I tried to get the Nuget Package Manager console to behave nicely with PhantomJs Repl, I could not do that as the output pipeline is not redirected to the console host, I guess a Powershell guru can fix that pretty easily (it does work in std PowerShell).

Web app woes: Save files offline for later upload to server

Ok, so this is something I like to do with a web application: make the users choose pictures when they are offline, and upload them later when they are online (even after the original page was closed). Easy? Not as far as I understand.

Data is easy to store locally in localstorage. But localstorage is not good for images. There’s a limit of 5 mb’s. FileApi? Yes, seems like a good candidate, but not on iOS Safari, which is a requirement, it cannot do filewrites.

My current shot is to keep the page open and keep the files in a DataForm variable until the user goes online again. The page must be kept alive. But I think we can live with that (it is a single page application). And in worst case, the users just need to find the images from the local disk again. Another alternative is to use createObjectUrl(), which generates a temorary url to a local file, the url is easy to store in localstorage. But, those urls are only valid during the document lifetime. Don’t understand why. Should at least be an option to keep them longer. A more robust alternative for the iPad would be to rely on some native application to keep the files for us. I think PhoneGap can do that, but I’m not sure.