Now Umbraco 5 (aka Jupiter) is knocking at the door, RC2 was just released, and it looks really promising. The whole CMS has been rewritten using Asp Net MVC3 instead of Webforms, and with modern standard dev architectures.

Umbraco 5 current status http://umbraco.com/umbraco-5-status.aspx

I have been postponing my attempts to do a real dive into Umbraco 5, but now it’s really time, and where to start? With the basics of course – so in this article I’ll describe my first try building a raw site with the basic components.

I thought it might be of interest for those of you that are interested in what’s up with this Umbraco thing and want to check out the 5 even if you did not look at it before. And for those of you who are old timers and want a very quick review of Jupiter from a site builder perspective.

Did I say basic? Yes.

Disclaimer – I like to write as I learn new stuff. I’m new to Jupiter and might have been missing important parts that should be noted in this article. If I did I will be very grateful if you, dear reader, contact me, here or otherwhere.

Installation process

Short version : Download the RC2, unblock the zip, unzip it, open it as a website in WebMatrix. Run it, and go through the installation process, choose Sql CE as the database. No problems. The same good looking installation UI as in version 4.

I started two parallell sites, one with the provided starter kit and one without it. The starter kit for help and reference and the empty site for my experiment.

UI Gotchas

Gotchas? … nope, did not find any… The UI looks pretty much the same as in Umbraco 4 which of course makes perfect sense as it has proved to work very good for devs, admins and editors.

I know they have been putting lot of effort into the UI, and it shows, it has a very nice and professional user experience feeling. And as in v4, and probably even more so now, it is extensible. Be sure that many devs in the Umbraco community are busy developing valuable addons/packages as we speak.

(And you can right click a section and open in a new tab in the browser again… yay!)

The Trinity

To build a visible web page with the help of Umbraco 5 we need at least three things just like before: a document type (defines the dynamic elements), a template (the html with placeholders for dynamic elements basically) and a content document (with values for the dynamic elements).

Document type

I added a Content document type with the two properties header (textstring) and body text (rich text editor):

Very similar to Umbraco 4. Some nice new details to the UI gives it a newish and fresh feeling.

To separate the site start node from content documents I also added a Home Page document type, with only the name and the icon and the properties inherited from the Content document type.

Inherit from several document types

Here’s a new cool thing : you can have document types inherit properties and tabs from not only one but several different parent document types. And you can change those whenever you like. That makes a big difference when it comes to how easy it is to manage the content structure on a big site.

Templates

These are changed in Umbraco 5. In 4 we had the Webforms MasterPage-templates. But now we have the new cool kid in town –  MVC3 Razor Views and Layouts, which makes templating really easy and flexible. As it is standards you will be able to use ready made MVC3 and/razor templates and just add the umbraco parts.

A view includes a reference to a layout and functions to render the dynamic contents, add content “fields” using the tool in the toolbar or by writing: @Umbraco.Field(“header”) and @Umbraco.Field(“bodyText”):

And a layout contains the base html with a @RenderBody() call which renders the view contents. A layout can have another layout by itself if necessary.

To the layout I also added a simple css-file in Settings > Styles. The css got the path /content/styles/stylesheet.css

Content

I added a Home page node in the content section, wrote text for header and body text (same html editing capabilities as in v4 and many other CMS’es with the Tinymce), and the similar for a sub content page.

I also added an image with the help of the image tool. The image tool has been changed a bit since v4, and works well, but I bet there will be packages which will help us to have a really nice touch to image handling eventually.

Now we have a result

Viewing the site as is:

A navigation macro?

Umbraco 5 has macros, which I did not look at very much yet. But for stuff like navigations it’s enough (and easy) to create a small razor file and add is as a Partial which can be rendered wherever in a layout (or a view), I took this from the starter template:

… and added it to the right place in my layout with the code @Html.Partial(“Navigation”) et voila:

For the section to the right I added another document type “Section content” with just a rich text editor property named sidebarText and made my other document types inherit from that one, then I defined a section in the layout and added the @Umbraco.Field(“sidebarText”)

About the difference between Partial and a Macro

Umbraco 5 Lead Architect Alex Norcliffe just answered the question on twitter, “Partial is small reusable piece you can put in many templates, & a Macro Partial is one that can have user params e.g. in an RTE” (rte = rich text editor). And Umbraco HQ & Core developer Matt Brailsford added ”MacroPartials have extra editor requirements, we made an explicit split, and housed the Macro Partials next to the Macro definitions. Kinda like usercontrols in v4, they don’t have to be macros, but then can be to allow user config. We just have an explicit split so it’s clear what they are used for and house them closest to those that use them Partials > Templates, Macro Partials > Macros.” Which also means the permissions differ, a designer can for example be allowed to access the Settings section and change Template Partials but not the Developer section where Macro Partials is.

Conclusion

I did not stumble on any thing doing this basic site setup, everything worked as I was expecting or was easy to figure out. I know there are still things they are working on, and the RC2 is still a RC so not ready for production yet. But they definately seem to have nailed the most importand parts, and have a solid ground for a great CMS. MVC3 is a darn good framework, used by many. And Razor simply rocks. So – what’s keeping you?

https://twitter.com/#!/joeriks/status/157442677493858304

Umbraco 5 current status http://umbraco.com/umbraco-5-status.aspx

Further reading – from a site builder perspective

What is V5 http://umbraco.com/umbraco-5-status/what-is-v5.aspx

To get a good understanding of how the layout system work have a look at the descriptions for MVC 3 Razor layouts, for example http://weblogs.asp.net/scottgu/archive/2010/10/22/asp-net-mvc-3-layouts.aspx

Umbraco 5 gems for content editors http://umbraco.com/follow-us/blog-archive/2011/7/8/umbraco-5-gems-for-content-editors.aspx

Well basically: http://umbraco.com/follow-us/blog-archive.aspx :)

My goal with this is to have a way to send messages from running tasks to me (and other admins) using a broadcast method … aswell as have some fun playing with SignalR which looks really cool .

Just by adding the SignalR dll and js files and some minimal code you’ll get started with SignalR within an Umbraco application in 15 minutes.

Installation
1. Either download and install my little uSignalR experimental package (SignalR files from 2011-11-21) or run the SignalR Nuget to get fresh files from the source, and add the myconnection.cs and the two templates as shown below.

2. I could not find out how to add a reserved url to the web.config using package actions, so you will need to add ~/echo manually in your web.config:

...
<appSettings>
...
<add key="umbracoReservedUrls" value="~/config/splashes/booting.aspx,~/install/default.aspx,~/config/splashes/noNodes.aspx,~/echo"/>
...

Then just open the /mysite/recieve page in two (or more) browsers and start “chatting”. And to try the server send functionality – open the /mysite/send page . You can see the code here below. To read more and explore the possibilities : look at the SignalR wiki

Brief explanation of the parts that makes it happen

In /App_Code/MyConnection.cs we hook up the connection which listens to messages and broadcasts them to the listeners.

using System;
using System.Threading.Tasks;
using SignalR;

public class MyConnection : PersistentConnection
{
    protected override Task OnReceivedAsync(string clientId, string data)
    {
        return Connection.Broadcast(data);
    }
}

public class MySignalRRoute : umbraco.BusinessLogic.ApplicationBase
{
    public MySignalRRoute()
    {
        SignalR.Routing.RouteExtensions.MapConnection<MyConnection>(System.Web.Routing.RouteTable.Routes, "echo", "echo/{*operation}");
    }
}

In the “Send” Template we just send messages to all listeners.

<asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server">
<umbraco:macro runat="server" language="cshtml">
@{
    SignalR.Connection.GetConnection<MyConnection>().Broadcast("This is a message from the server");   
}
</umbraco:macro>
</asp:Content>

The “Recieve” Template is only html + javascript which lets the users send and listen to messages.

<asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server">

<script src="http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"></script>

<script src="Scripts/jquery.signalR.min.js" type="text/javascript"></script>

<script type="text/javascript">

    $(function () {

        var connection = $.connection('echo');
        connection.received(function (data) {
            $('#messages').append('<li>' + data + '</li>');
        });

        connection.start();

        $("#broadcast").click(function () {
            connection.send($('#msg').val());
        });
    });
</script>

<input type="text" id="msg" />
<input type="button" id="broadcast" value="broadcast" />

<ul id="messages">
</ul>
</asp:Content>

Ultimately I want my Razor to be free from

• variable assignments other than for loop iterators
• function calls other than formatting and html helpers
• usage of data outside of the “ViewModel”

I have some WebPages and Umbraco projects with some quite advanced razor code and I’ve been having many doubts about how I mix logic in my razor code. I try to separate it, most often by placing logic at the top, but still using Razor (with helpers or RenderPage by all means). After re-thinking some about the @functions ability in Razor and found out about the overridable InitializePage function I feel I now have a better more solid structure to use.

The idea is simply this : remove all logic (but necessary iterations and some conditions) from the razor, and place it in the @functions part (in the InitializePage function) together with ViewModel properties. The ViewModel properties should contain all data that the view part needs to be able to render the page / the macro. And the view part should not access anything else than the ViewModel properties:

@* --- The logic-less view part: --- *@

<p>@SomeProperty</p>

@* --- The controller / viewmodel constructor part: --- *@

@functions{

  // the properties of the view model:
  public string SomeProperty {get; set;}

  // taking care of post data and constructing the view model:
  protected override void InitializePage()
  {
    // make up the "ViewModel" properties
    SomeProperty = "some data";
  } 
}

Advantages with this approach

• A clear separation of view and logic (not as clear as having them in separate files tho)
• The logic is pure C#-code, no risk of doing mistakes due to misplaced @’s (and missing code blocks)
• The code is a big step towards MVC, and the full step will be quite easy later on if necessary
• Minimal added whitespace in page source

Helpers are perfectly fine to add to this – but just as with the view code, I think any logic but view logic should be left out of them.

A remake of my “old skool” contact form sample

I wrote a contact form razor sample quite a while ago, guilty of mixing logic into the view. However I’m not the only one , a sample at asp.net.

Here’s a better (I think) remake, using the initializepage-structure:

<h2>Contact form</h2>

@if(ShowMessage)
{
   <div><strong>@Message</strong></div>
}
@if(ShowForm)
{
   <form action="#" method="post">
     <div>
       <label for="name">Name:</label>
       <input id="name" name="name" value="@PostedName"/>
     </div>
     <div>
       <label for="message">Message:</label>
       <textarea id="message" name="message">@PostedMessage</textarea>
     </div>
     <input type="submit" value="Post message"/>
 
   </form>
}


@functions{
  public bool ShowForm {get; set;}
  public bool ShowMessage {get; set;}      
  public string Message {get; set;}
  public string PostedName {get; set;}
  public string PostedMessage {get; set;}
           
  protected override void InitializePage() 
  {
    if (!IsPost) 
    {
       ShowForm = true;
       ShowMessage = false;
    }
    else
    {
       PostedName = Request["name"];
       PostedMessage = Request["message"];
       var IsValid = (!string.IsNullOrEmpty(PostedName) &amp;&amp; !string.IsNullOrEmpty(PostedMessage));
       if (IsValid)
       {
         var bodyText = "Message from " + PostedName + Environment.NewLine + PostedMessage;
         umbraco.library.SendMail("from@mysite.com","admin@mysite.com","New message", bodyText,false);
         Message = "Thank you " + PostedName + " for posting a message";
         ShowForm = false;
         ShowMessage = true;
       }
       else
       {
         Message = "You need to enter both name and message";
         ShowForm = true;
         ShowMessage = true;
       }
    }
  }
}

Public properties or private fields?
The public properties could be private fields without any problem (in these samples), the reason I choose public properties is that I like to resemble the MVC structure as far as possible.

Responding to an ajax-post

This structure also makes it really easy to handle and respond to ajax posts to the same form (this can only be done in a pure WebPages razor, not Umbraco macro as that does handle the Response output the same way) :

    ... in the validated post part ...
    if (IsAjax)
    {
        Json.Write(new {
          postValid = true,
          message = Message
          }, Response.Output);
    }

In Umbraco the options for ajax are to either to run razor script outside of the Umbraco context (use WebPages + add reservedpath in web.config) or to make a separate “ajaxresult-template” with a razor call:

Bonus: posting the form with ajax in Umbraco

Using this method you can return json directly from your razor script in Umbraco. The tricky part is we dont want to return the surrounding template parts, and for simplicity we want to use code in the same razor script as as we already are in.

Add a template – call it AjaxRazor – which will be responsible for rendering the razor without anything but the script result (we add an if IsAjax condition to have some kind of security against unintended run script files, please add more security checks for posts on a live site):

<%@ Master Language="C#" MasterPageFile="~/umbraco/masterpages/default.master" AutoEventWireup="true" %>

<asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server">
  <umbraco:macro language="cshtml" runat="server">
    @if (IsAjax){
      var path = Request["path"];
      if (!path.StartsWith("~")) { path = umbraco.IO.SystemDirectories.MacroScripts + "/" + path;}
      @RenderPage(path)   
    }
  </umbraco:macro>
</asp:Content>

Now it’s possible to run any razor script using the url /AjaxRazor?path={path-to-script}

Next make the form post it’s contents to the template, with the razor script path as a querystring parameter, we get that path with the help of the page property VirtualPath:

@if(showOnlyJson)
{
  Json.Write(json, Response.Output);
}
else 
{
 if(showForm)
 {
 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js"></script>
 <script type="text/javascript">
  $(document).ready(function() {
  $('form').submit(function() {
  $.post('@ajaxPostPath', 
      $(this).serialize(), 
      function(data){
         alert(data);
      });
  return false;
 });
 });
 </script>

 <form method="post" action="#">
 <input type="text" name="name"/>
 <input type="submit"/>
 </form>
 }
 if (showMessage)
 {
   <p>@message</p>
 }
}
@functions{
 private bool showOnlyJson;
 private bool showMessage;
 private bool showForm;
 private string message;
 private object json;
 private string ajaxPostPath;
 protected override void InitializePage()
 {
   if(IsPost)
   {
      var postedName = Request["name"];
      message = "Thanks for posting";
      if (IsAjax)
      {
       showOnlyJson = true;
       json = new {message=message, name = postedName};
      }
      else
      {
       showMessage = true;
       showForm = false;
      }
   }
   else
   {
       showForm = true;
       ajaxPostPath = "/AjaxRazor?path=" + VirtualPath; 
   }
 }         
}

Umbraco v5

I believe this approach still might be useful in Umbraco v5. It should likely not be recommended as an option for advanced solutions, but for simple forms (and advanced navigations) I think its suitable. And even if it’s not suitable it’s a good step towards controllers and viewmodels.

The pricing is also a pleasant detail : no cost at all for a single server instance. So for trying out stuff it’s really ideal. Oh, and deploy is as easy as a Git commit and push. *happy face*

Here’s an example as how you can use it to host an Umbraco 5 alpha:

1. Get your Umbraco website running locally

1.1 Download and extract an Umbraco prebuilt web application of your choice (nightly / alpha or whatever is available) (Alpha 3)

You should even be able use the full Umbraco project – as AppHarbor has a automatic build process. Would be cool if someone tried it. I went the easy path and only used the pre-built nightly to get going quickly.

1.2 Run the Umbraco site in WebMatrix (right click the extracted folder and choose “open as a website in WebMatrix) go through the installation and choose the SQL CE database option as it requires no extra configuration. You can use a full SQL database if you need, AppHarbor has such as an add on.

You can do the Umbraco site installation online at AppHarbor, but that is not recommended as you will miss the possibility to work with the site locally and only push to the running site when you are ready to deploy your changes.

2. Create a local Git repository

2.1 Download and install Git Extensions
2.2 Right click the folder and click Git extensions -> Browse.
2.3 In the Git Explorer click Initialize Repository. Let it initialize.
2.4 Click commit to make an “initial commit”. It looks into the folders and lists all non-committed files in a list (all of the files at this first commit).
2.5 Click Stage All (the green double arrow) to add all files to the list of files to commit.
2.6 Add a commit message for example “Initial commit”
2.7 Click Commit. Now you commited all files to your local repository.

3. First deploy to AppHarbor

3.1 Create an account at AppHarbor
3.2 Login and create an application (it’s free until you require the application to run on multiple server instances.
3.3 Go to the settings page for your application and check the checkbox “Allow write-access to file system” and click update. Umbraco needs to be able to write to the file system.
3.4 Go back to the start page for your application to see the “Getting started” instructions. We don’t need all the steps as we already taken care of some of them.

3.5 In Git Extensions browser – click “Git Bash” in the toolbar to open a command window.
3.6 In the command window enter the following commands from the AppHarbor instruction page (copy paste using the context menu is easiest) to configurate your user and a necessary buffer setting (this you only need to do once for your repo) :

git config –global user.name {yourname} (or use your full name)
git config –global user.email {your email}
git config –global http.postBuffer 52428800

3.7 Now follow the last steps in the AppHarbor instructions, enter in your command window:

git remote add appharbor {your appharbor repository path}
git push appharbor master

Git will ask you for your AppHarbor password, and then the push process will start uploading files.

After some time (there’s quite a lot of files) you will get a message saying “Queuing build of master”. That’s good news – AppHarbor will now build the application for you and automatically deploy and host it. That is often a quick process and you will then be able to access your site – check out the url on your application page:

Application URL’s

http://myumbracosite.apphb.com

Deploying changes – this is the coolest part

Now you have two copies of your Umbraco web site. One locally and one on AppHarbor. When you need to change something you’ll do that locally and then deploy the changes to AppHarbor just by using Git commit and push.

Let’s say you added some razor templates, css’es and javascripts and you like to deploy them.

4.1 Right click your local Umbraco site folder and click Git extensions > Commit. The Git will find out which files you have changed and show them in the same list as you had before your first commit.
4.2 Click Stage all
4.3 Add a commit message “New changes to my css” and click commit. Now you committed to your local repository.

4.4 Go to the Git Extensions explorer and open the Git Bash window again.
4.5 Write

git push appharbor master

enter your password when prompted.

Git will upload the changes and AppHarbor starts a new Build process. A few moments later the updated site is live!

(If you like to omit the database from the commit you will need to add it to the gitignore file.)

Commit and push from the UI – no need to open the command prompt
Open the menuitem “Remote repositorys” in Git Ext, open the “AppHarbor” remote. Add your password to the url, so it says https://myname:mypassword@appharbor.com/mysite.git. Then go to the tab “default pull behaviour” (yeah I know, it says Pull but it goes for Push as well.) Set your AppHarbor as the default “Remote repository” click Save. Then you can use the “Commit and Push” button in the UI.

We decided to go for an asp.net WebPages, aka Razor, aka WebMatrix, solution in this case. It’s a very straight forward, close to the metal, way of coding for the web, and we’re very happy with our experiences so far.
When we develop the application we work completely outside of Umbraco, within an Asp.Net Razor website in Visual Studio (and sometimes in WebMatrix actually). The application itself is completely independent of Umbraco context.

So, we test run and debug our application within Visual Studio, then we deploy all changes just by FTP’ing the files to the Umbraco staging site where our customer can try it within their site. It’s a very fluent and flexible developing process.

The most important parts of the application

• A set of (~10) cshtmls that represents each different page (url) of the application.
• A wrapper content page in Umbraco for each of the app pages, with the path to It’s corresponding cshtml as a property, RenderScriptPath.
• A wrapper template in Umbraco, which is a copy of the standard content template for the whole site, but with one important instruction:
  

  <umbraco:macro runat="server" language="cshtml">
  @if(Model.RenderScriptPath!="") {
     @RenderPage(Model.RenderScriptPath)
  }
  </umbraco:macro>

  
  this call is rendering the actual application page within the site layout.
• A service cshtml for serving Ajax calls
  

  @if (OurApp.CheckLogin() && IsAjax)
  {
    
    // routing each call to the right function / json result
  
    var action = Request["action"];
    if (action=="products") {
      var category = Request["category"];
      Json.Write(OurApp.ProductsByCategory(category),Response.Output);
    }
  }

• A corresponding – empty – template with just this code to render the service cshtml:
  

  <umbraco:macro runat="server" FileLocation="/macroscripts/ourapp/ajaxservice.cshtml" />

• An UmbracoMockLayout.cshtml to make the off-site app look nice, with references to the necessary CSS, images and JavaScript files
• An _PageStart.cshtml to automatically use the above layout from each of our .cshtml-pages. We do not copy the _PageStart-file to the Umbraco site (and even if we did it would not be run).
  

  @{Layout = "_UmbracoMockLayout.cshtml";}

• Businesslogic, in a separate project
• PetaPoco, as the micro Orm layer for the database
• JavaScript, CSS and image files. In the same paths in the separate project as in the Umbraco site
• Dewd, as a way for our Umbraco editors to edit some datatables directly within Umbraco

Umbraco content and asp.Net membership

The application is not entirely disconnected from Umbraco (but almost). There are texts on a few of the pages that is editable from within Umbraco, and used with the common Model.Property syntax. Otherwise the application is just using the Umbraco site navigation and designs. Also the app is using the same membership as the site.

Conclusion

In this project we’re using techniques and products we really like and find to be very efficient and high quality. The resulting application is soon to be launced, so we cannot say much about how it ends up , but it’s looking good so far, and we can definitively say that the development process has been unusually friction-free and fast.

For me it was the first real experience of WebSockets coding, and in this blog post I’ll write a few words about it (so there – my usual “I’m a noob-disclaimer”).

WebSockets (and the WebSockets API) is currently in an evolving phase, and as such it has varying support in the different web browsers. It’s quite a lot of work to use it directly with cross-browser support for real time applications. Therefore many look for helping libraries, actively maintained by people following the ongoing development of WebSockets and with fallback support for non-websockets-supporting browsers. XSockets is such a library. It is under active development, has support for several WebSockets protocol versions and it has fallback support that works in most browsers, with the help of Flash or Silverlight plugins.

Setting up an XSockets Visual Studio solution is easy with the help of the XSockets Nuget package. The recommended way to start playing [link to video] – see also this walkthrough is to 1) create an empty MVC3-application, then 2) type Install-package XSockets in the package manager. The Nuget installs a XSockets server project, a custom handler project, and a samples web project with a few samples. To have a go – 3) right click the server and run it. Then 4) open a Sample project html page also by right clicking, and browse open the file – preferrably in Chrome.

The parts of an XSockets solution

For a XSockets solution to run you will need the following.

• A websockets server. A .Net Windows command line application or a service. Configured to serve websockets communication on a specified port (for example 4502). The easiest way to get a server up and running is simply by installing the Nuget (se above).
• Client side code. For example js code using the jxsockets client side libray – best if they are running on WebSockets enabled browsers like Chrome, or Safari.

The clients all communicate with the server, there’s no direct peer-to-peer communication. However, the server can of course maintain a communication between two individual clients.

Here is an example of how an XSockets (and WebSockets) communication sequence can look like:

1. Client A creates a jXSockets instance, responsible to handle WebSockets communication with a running XSockets server.

var ws = jXSockets.xWebSocket('http://myserver.com:4502/XSockets.Core.Handlers.Generic, jXSockets.WEBSOCKET);

2. The server establishes and opens the connection and the event “open” is triggered. The client can now start listen to and trigger own events.

ws.bind("open", function() { $('#status').text('<p>Connection open</p>');} );

3. Client B does the same. Now the server has two open connections. Each client is represented by a guid on serverside, and messages (as events) can easily be sent to all clients or a selection of clients.

4. Client A triggers a “OnChatMessage” event with the data “Hello WebSockets” and “John Doe”.

// Create a WebSocketMessage 
var myMessage = new $$.WebSocketMessage("OnChatMessage");
myMessage.AddJson({Text: "Hello WebSockets",UserName:"John Doe");
//  Send the message using the .trigger(WebSocketMessage) method 
ws.trigger(myMessage.PayLoad());

5. The server’s generic event handler is configured to listen to all events and broadcasts the event directly to all other clients.

6. If Client B has a binding to the “OnChatMessage” event it will get the “Hello World!” data and can for example display it on a web page.

// Event handler for the WebSocket event named OnChatMessage, where the WebSocket instance is named ws
ws.bind("OnChatMessage",function(message) {
 $('#message').append('<p>' + message.Text + ' from ' + message.UserName + '</p>');
});

7. More messages is being sent between the clients and the server.

8. The connections stays open until they are actively closed. This means that the need for overhead is minimal, which in turn means it’s very efficient to send a lot of data back and forth compared to the traditional http request / response method which has a lot of overhead.

We can also bind to the close event if we like

ws.bind("close", function() { $('#status').text('<p>Connection closed</p>');} );

More server side

The generic handler is best for demo usage, and not really (?) meant for real applications. But it’s very easy to build a custom handler which can be setup to handle the communication however you like.

Hackaton

A really fun part – and the part that was given the most time – of the CodeCamp was where we participants was given the task to code real XSockets applications, which should be demo’ed at the end of the camp. It resulted in really cool apps, most of which had a entertainment/game theme, but there were also real business/industry ‘real-time-dashboard’ like applications.

Here’s a short video of my contribution.

In all, the CodeCamp proved to me that WebSockets is a technique that has an important place in the modern web, and XSockets is a well engineered and easy-to-use library for WebSockets solutions.

Genom att använda gratisverktyget WebMatrix så är det väldigt smidigt att installera Umbraco på din dator – och det finns dessutom webhotell som erbjuder billig hosting för WebMatrix-sajter med mycket enkel publicering. Detta innebär att du kan ha en egen webbplats med de smidiga redigeringsmöjligheter som ett professionellt CMS erbjuder uppe och igång ute på internet på mindre än en timme.

Tror du mig inte? Häng med…

1. Ladda ned och installera WebMatrix

Gå till http://www.microsoft.com/web/webmatrix/ och installera den senaste versionen av WebMatrix.

2. Skapa en Umbraco webbplats från WebMatrix “Web Gallery”

När du startar WebMatrix får du som alternativ att starta en ny webbplats från “Web Gallery”. I galleriet hittar du Umbraco. Välj det och skriv in ett namn för din webbplats, följ sedan guiden för att ladda ned och installera Umbraco:

3. Kör Umbraco-installationen

När WebMatrix har installerat Umbraco kommer du att återgå till redigeringsdelen i WebMatrix. Klicka på länken till din webbplats (site) “URL : http://localhost:nnnn” för att öppna din lokala webbplats i din webbläsare:

Första gången du öppnar din lokala webbplats kommer Umbraco att köra sin installationsrutin. Där väljer du vilken typ av databas du vill använda, samt det användarnamn och lösenord du vill ha, dessutom får du om du vill välja “Starter kit” och “Skin” för din webbplats.

Jag rekommenderar dig att följa installationsrutinens föreslagna alternativ när sådana finns, välj således Sql CE som databas, det innebär att du inte behöver någon installerad databasserver på din dator, Sql CE använder helt enkelt en fil som kommer att sparas i din webbplats filstruktur.

När du får välja Starter kit och Skin föreslår jag att du väljer “Simple Starter kit”, och det Skin som du själv tycker bäst om.

4. Dags för det administrativa gränssnittet i Umbraco

När Umbracos installationsrutin är färdig så är det dags att titta på Umbracos användargränssnitt för första gången.

Lägg märke till att du har en trädvy med en “nod” för varje sida på din Umbracowebbplats. Klicka till att börja med på noden “Sample website” som representerar webbplatsens startsida. Ändra på några texter. När du har ändrat och vill att ändringarna ska synas så ska du klicka på Publicera (Publish). Då kommer din lokala sajt att uppdateras och du kan se webbplatsen med dina ändrade texter:

Det är enkelt att växla fram och tillbaka mellan Umbracos användargränssnitt och din webbplats med hjälp av webbläsarens flikar. Om du tappar bort din Umbraco-flik så kan du alltid öppna den igen genom att öppna adressen http://localhost:nnn/umbraco/ (när nnn är det portnummer som WebMatrix har valt åt dig, du hittar det under Site i WebMatrix).

Du har nu WebMatrix och din webbplats på din egen dator och det finns ingen möjlighet att komma åt den utifrån. Webbplatsens filer finns din mapp “Mina dokument” och undermappen “My Sites”. När du har stängt WebMatrix kan du komma åt din webbplats igen genom att öppna WebMatrix och sedan välja din webbplats under “My Sites”.

5. Ut med webbplatsen på internet

När du har redigerat din webbplats och vill att den ska synas på internet så behöver du hitta ett webbhotell (webbhost).

Du kan göra det med hjälp av en länk i WebMatrix, under Publish – Find Hosting, eller använda ett webbhotell som du känner till sedan tidigare.

Jag testade “Appliedi” när jag skrev den här artikeln. Deras installation var väldigt enkel med stöd för funktionen WebDeploy. Appliedi är dessutom gratis i tre månader (därefter $5 i månaden).

När du har beställt testpaketet ska du få ett epostmeddelande med dina inloggningsuppgifter.

Kopiera dessa uppgifter och klistra in dem i WebMatrix “Publish Settings”

6. Publicera!

När du har lagt in dessa uppgifter så kan du publicera din webbplats, klicka på “Publish”. Det kommer att ta några minuter eftersom en fullständig Umbracoinstallation innehåller ganska många filer. När publiceringen är klar kommer du – och alla andra – att komma åt din sida på Internet!

Att redigera innehållet

Både din lokala installation och den på ditt webbhotell har allting som behövs både för att visa webbplatsen och för att redigera den med Umbracos administrativa gränssnitt. Förutom publiceringsrutinen så finns det ingenting som kopplar ihop din lokala installation med den som finns på Internet. Det innebär att om du ändrar innehåll lokalt så kommer det inte att synas utåt om du inte publicerar om webbplatsen. Men det innebär också att du kan använda din lokala kopia för att testa olika idéer, och sedan lägga in dem på din publika webbplats när du är nöjd med resultatet, helt enkelt genom att jobba i det administrativa gränssnittet där också.

På samma sätt som att din lokala kopia är åtkomlig via localhost://nnn/umbraco/ så kommer du åt din webbplats på internet genom att gå till adressen http://www.mysite.com/umbraco/ . Inloggningsuppgifterna är desamma som du valde när du gjorde umbracoinstallationen.

Lycka till!

Läs mer om Umbraco på http://www.umbraco.org och om du har frågor eller kommentarer så får du gärna ställa dem här. Om det finns intresse så kommer jag återkomma med fler artiklar på svenska om Umbraco.

Jag kan också varmt rekommendera Umbraco-forumet.

This is what I did:

• Create a new Console Application in Visual Studio
• Add the EF Migrations Nuget (which also includes EF itself).
  

  PM> Install-Package EntityFramework.SqlMigrations

• Add these classes:
  

  public class Person
  {
      public int Id { get; set; }
      public string Name { get; set; }
      public string SurName { get; set; }
  
  }
  public class DemoContext : DbContext
  {
      public DbSet<Person> People { get; set; }
  }

• Make Main add some people:
  

  static void Main(string[] args)
  {
      var db = new DemoContext();
      db.People.Add(new Person { Name = "Test 1"});
      db.People.Add(new Person { Name = "Test 2"});
      db.SaveChanges();
  }

• Run the program.

What happened here?

For me all went fine – no errors. Which meant the program either failed silently or I got a new database somewhere. I looked for an automatically created SQL CE DB file in my project folder, but none could be found. However I found a new DB in my SqlExpress instance, named ConsoleApplication1.DemoContext. Obviously it’s the convention for EF to create such and populate it with the necessary data. And yes, the table People was there with two records, Test 1 and Test 2. Very cool.

How about changing the schema a bit?

Now for some testing of the migrations part of this experiment.

• Add the property Surname
  

  public class Person
  {
      public int Id { get; set; }
      public string Name { get; set; }
      public string Surname { get; set; }
  }

• And some code in Main
  

  static void Main(string[] args)
  {
      var db = new DemoContext();
      db.People.Add(new Person { Name = "Test 3", Surname = "AAA" });
      db.People.Add(new Person { Name = "Test 4", Surname = "BBB" });
      db.SaveChanges();
  }

• When I run this I got an expected error – because the newly added property does not have a corresponding field in the database table. Time to let the EF Migration perform it’s magic:
  

  PM> Update-Database

• EF migrations takes some time to complete, when it’s done the schema is updated and the program runs fine. And the previously added names are still in the database.

I think EF SqlMigrations looks really nice. I’m sure it does not cover all and everything, but I can think of quite a few of my previous coding projects where I would have been in great benefit of this tool.

• The Views should not do anything else than display the data.
• The Controllers should (on get’s) only be responsible for serving the right viewmodel to the right view for the particular request.
• The Models should not depend on one particular source of data.

In my last post I made a small controller that constructed a mock viewmodel and sent it to the View. Now I like to use a separate mock data class to serve that purpose. The controller should take the id from the Url, get the data from the data class and serve it to the view.

Other than that I like to be able to change from my mock data to a real database, back and forth. I accomplish that with the help of an interface for the datacontext and the use of a dependency injection framework for the actual coupling. I am new to DI and use Ninject (install-package Ninject) as I heard it’s easy to use.

using System;
using System.Web.Mvc;
using System.Web.Routing;
using Ninject;

namespace MyApplication
{
    public interface IDataLayer
    {
        dynamic GetItem(int id);
        dynamic SaveItem(dynamic item);
    }

    public class MockDataLayer : IDataLayer
    {
        public dynamic GetItem(int id)
        {
            dynamic item = new System.Dynamic.ExpandoObject();
            item.Id = id;
            item.Name = "Some name";
            return item;
        }
        public dynamic SaveItem(dynamic item)
        {
            return item;
        }
    }
    public class ItemController : Controller
    {
        public ActionResult Display(int id = 0)
        {
            dynamic viewModel = MvcApplication.DataContext.GetItem(id);
            return View(viewModel);
        }
    }
    public class MvcApplication : System.Web.HttpApplication
    {
        public static IDataLayer DataContext;

        protected void Application_Start(object sender, EventArgs e)
        {
            // the following three rows is the Ninject use
            IKernel kernel = new StandardKernel();

            kernel.Bind<IDataLayer>().To<MockDataLayer>();
            DataContext = kernel.Get<IDataLayer>();

            RouteTable.Routes.MapRoute("", "{id}", new { controller = "Item", action = "Display", id = UrlParameter.Optional });
        }
    }
}

The Razor view file requires us to add a little bit of structure to our project, namely a root Views folder, a web.config file and a separate folder for the views of each of our controllers:

/Views (folder in the root)
/Views/web.config (config file with the configuration for the view engine)
/Views/Item/ (the folder for our controller)

In the /Views/Item folder we’re going to add our razor file, Display.cshtml. To use that file we’re adding a controller with an action function. This function can consist of only the instruction return View() if we like. With that MVC3 automatically looks for and runs the view file in the following path /Views/{controllername}/{actionname}.cshtml.

However, I like to add a little bit of code to show how a viewmodel (a data object) typically is being sent to and used by a view.

using System;
using System.Web.Mvc;
using System.Web.Routing;

namespace MvcApplication3
{
    public class ItemController : Controller
    {
        public ActionResult Display(int id = 0)
        {
            dynamic viewModel = new System.Dynamic.ExpandoObject(); // we add a view model with some data
            viewModel.Id = id;
            viewModel.Name = "Some name";
            return View(viewModel); 
        }
    }
    public class Global : System.Web.HttpApplication
    {
        protected void Application_Start(object sender, EventArgs e)
        {
            RouteTable.Routes.MapRoute("", "item/display/{id}", new { controller = "Item", action = "Display", id = UrlParameter.Optional });
        }
    }
}

With this model, we can write our razor view as such:

@model dynamic // defines the type of the view model (not required)
<h2>Hello World</h2>

id: @Model.Id // using the data from the view model with the @ razor syntax
name: @Model.Name

The mentioned /Views/web.config file is essential for MVC3 for the Razor view engine to function properly. The one I use is simply the one that comes with a empty MVC3 project and I don’t find it necessary to paste it here.

The heart of a web application

This is pretty much what I need as a base for my web applications. From here it’s straight forward to build Html with the help of Razor helpers and templates, and construct models with the help of good ol’ C# businesslogic and a data access library of choice.

Oh, and dependency injection, source code versioning, deployments and testing…