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.