Using SignalR to build an Api (in Umbraco, WebMatrix or MVC)

I wrote a blog post the other day about using plain Razor scripts to create an easy to maintain Api on an Umbraco site. It’s a very straight forward way to make ajax-calls possible. However in reality I think many would say razor files is just not the right choice for server functionality like this, and for bigger solutions I do agree on that.

The Umbraco standard way would be to use /Base. And the new AspNet WebApi would be another obvious alternative for it.

But in this post I like to discuss using SignalR as a surprisingly nice technique for common api-functionality. Yes, SignalR is not only very nice for duplex, multiuser communications. With it’s fallback support, automatic routing and javascript proxy to serverside methods I really think it’s a stable and easy to use technique also for regular ajax scenarios.

Here are the only steps you need to go through to get a simple api up with SignalR:

1. Reserve the path /SignalR/Hubs within Umbraco web.config umbracoReservedPaths.
2. Install-Package SignalR in your site
3. Create a Hub with some methods that you like to expose to the client side

public class OrderHub : Hub
{
  public Order Get(int id)
  {
    return WebApp.Db.SingleOrDefault<Order>(id);
  }
}

4. Reference the necessary javascripts on your page

<...jquery...>
<script type="text/javascript" src="/scripts/jquery.signalR-0.5.3.js"></script>
<script type="text/javascript" src="/signalr/hubs"></script>

5. Add signalr client scripts

// start the connection (it's extended from $)
$.connection.start()

// get something from the server, we can use our OrderHub method names (automatically camel cased), 
// use a callback to do something with the retrieved order
  $.connection.orderHub.get(orderId, 
    function(order){
      alert("Yay, order " + order.name + " from " + order.date);
    });
}

There you go, basic api-functionality with a few lines of code.

You can send jsons from client to server aswell, and get them as your own types (Poco’s) on the server side.

The /signalr/hubs path is a path to an automatically generated javascript file that creates a proxy to your server methods. Open up that path in your browser to check out the code.

And when you do need chat functionality, or you like to push information from server to client, thats also easily possible, just check out the numerous SignalR samples and the docs.

Pros

* Easy to setup and use, no need for web.config editing or adding routes
* The js proxy makes your javascript short and nice + it’s possible to explore the api with a javascript console, in Chrome and Firefox you even get intellisense for you callable server side methods.
* Push and duplex communication available when you need
* Falls back to IE6 iirc
* Cool library
* Great support and still under heavy development

Cons

* New and not that well tested, changes between each new version
* Requires Javascript on client
* No Rest (if that’s a requirement)
* Limited to 6 connections at a time (user cannot have more tab’s open in his/hers browser to your application)
* Can’t use Session in a hub (but that might be a Pro)

Some futher comments and observations

Its nice to have the hubs in a separate VS project “MyProject.SignalR” or “MyProject.Core”. When doing so the nuget to install in that core project would be SignalR.Server. And the full SignalR should be installed in the Umbraco web site project.

You can get current (logged in) username in a hub with the standard call to System.Web.Security.Membership.GetUser();

Hub’s are per request

No need to collect all functions in one Hub, use several Hubs to separate stuff

I don’t think you can use Umbraco context in a hub ootb. Will check that out futher on, my use case here was to build a BL api to be used in a Umbraco site, not to expose Umbraco functionality.

Two other blog posts that talks about using SignalR for regular ajax calls:

Clean up your MVC app with SignalR by Yngve Bakken Nilsen

Why should ASP.NET developers consider SignalR for ALL projects? by Kevin Griffin

A simple razor api : JSON Poco’s in Umbraco / WebMatrix

I’m rebuilding some ajaxy stuff on an Umbraco site using Knockout to spice up the UX. And I wanted a nice way to write my api functions. I tried several different approaches (Base, SignalR, WebApi), but in the end I got back to simple Razor scripts with a tiny twist.

1. Reserve a /macroScripts/api/ path in web.config to make your files callable directly from their url’s + you can still edit them from within Umbraco UI if you wish. Or just use /api/.

    <add key="umbracoReservedPaths" value="~/umbraco,~/install/,~/macroScripts/api" />

2. Write one file for each remote procedure to get a nice and easy to maintain structure. Use InitializePage to get rid of unnessesary whitespace. Only add minimum code to the api-files, ideally just one call.

2. Serialize and deserialize Json to Poco’s using the Json helper.

3. Make a little js helper to make the calls nicer.

Here’s a sample of how a Get (/macroScripts/api/order/get/{id}) script can look like:

@functions{
    // URL : /macroScripts/api/order/get/{id} [GET]
    protected override void InitializePage()
    {
        base.InitializePage();
        // UrlData[0] is the first url part after the path, in our case the {id}
        var orderId = UrlData[0].AsInt();
        Json.Write(WebApp.Db.SingleOrDefault<Order>(orderId),Response.Output);
    }
}

And here’s a sample of a post (/macroScripts/api/order/insert)

@functions{
    // URL : /macroScripts/api/order/insert [POST]
    protected override void InitializePage()
    {
        base.InitializePage();
        // Deserialize input stream to Order object
        var jsonData = new StreamReader(HttpContext.Current.Request.InputStream).ReadToEnd();
        var order = Json.Decode<Order>(jsonData);                
        var newOrderId = WebApp.Db.Insert(order);
        Json.Write(newOrderId, Response.Output);
    }
}

My javascript calls looks like this:

// post knockout viewmodel:
my.utils.postJs("/order/insert", ko.toJSON(viewModel), function (newOrderId) {
  // update viewmodel with newOrderId;
});
// get:
my.utils.getJs("/order/get/" + orderId, function (order) {
  // do something with order
}

Thats it. Works on my machine.

Some nice things about this:

* It’s using Pocos, Json de- & serialized the same way as in WebApi and SignalR
* It’s just Razor, no need for extra DLL’s
* Easy to maintain structure

Comments / questions / suggestions are very welcome as always!

Here’s a gist with the same code as above + that little js helper

Also make sure you’re using in your web.config to be able to use WebPages funcitonality.

There is one problem with date formatting. The best workaround I found for it is to use Json.Net serializer (which is in Umbraco bin already). Like this:

        var isoConvert = new IsoDateTimeConverter();
        isoConvert.DateTimeFormat = "yyyy-MM-dd hh:mm:ss";
        Response.Write(JsonConvert.SerializeObject(Get(UrlData[0].AsInt()),isoConvert));
        var jsonData = new StreamReader(HttpContext.Current.Request.InputStream).ReadToEnd();
        var isoConvert = new IsoDateTimeConverter();
        isoConvert.DateTimeFormat = "yyyy-MM-dd hh:mm:ss";
        var order = JsonConvert.DeserializeObject<Order>(jsonData, isoConvert);

        Json.Write(Insert(order), Response.Output);

Using SignalR with Umbraco to broadcast messages (or chat) [15 minutes]

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>

Separating html and logic in Razor (WebPages or Umbraco macroscript)

Mixing logic and html can easily end up with messy, hard-to-maintain code. In MVC it’s easy to separate the parts with the controller / view-separation. But how to do it nicely in WebPages or in an Umbraco macroscript?

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.

Update: I recommend do not use this too extensively
The “functions” approach is nice, but also consider the simpler way just to have an initialization section in the top of the script – still separating C# from actual view. See this post for an example.

And if you have extensive pure C# move it to a base class which you inherit your script from.

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() 
  {
    base.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.

A nice deploy approach : Umbraco 5 alpha at AppHarbor [experimental]

AppHarbor is an interesting service that can deploy and host an Asp.Net application really easy. They use the slogan “Azure done right”. I’m still in an experimental mode with it. But it passed my “if I cannot get this going in less than 1 hour I’ll skip it”- test easily. Azure didn’t.

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.

A Razor application within an Umbraco site (notes from a current project)

We’re in the middle of re-developing a web application that previously was made as an asp.net Webforms app. The current requirements is to integrate the application into an Umbraco 4.7 site, to use a new design (delivered as a html, CSS & js prototype) as well as to change some of the underlying database workings.

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.

Från noll till en komplett webbplats med Umbraco CMS på mindre än en timme

Umbraco är ett gratis opensource-CMS byggt på Microsofts ASP.NET ramverk. Det är byggt för att vara lätt att förstå och använda, samt enkelt att bygga ut. Det är ett av de 3 mest populära nedladdade programvarupaketen i Microsofts Web Platform Installer och det används över hela världen för i stort sett alla typer av webbplatser.

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&#8221; 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.