Using Razor files inside the console with Composite C1 4.1

In this blog post I will show you how you can now use razor.cshtml files within the console. We have created all the header stuff needed in a MasterLayout.cshtml for you.

While the build server is working on the 4.1 release of, Composite .Net based CMS C1, I wanted to share one ofthe things I added in the 4.1 release. 

You can see the code at RazorLayout.cshtml here and in the rest of this blog post I will make a little turtorial of using this inside the Console. If you want to tag along, start by getting a 4.1 site up and running. The easiest way to do this is by using the platform installer and follow the instructions here

When you have the site up and running you will have to add two files. First file is for attaching the view we are going to create to the Composite C1 Console. You have options here to do it from code and the freedom to attach to every element in the Console Tree. For this demo I will do it the quickest way for showing the purpose and in most cases this is the only thing you need. A reference to the documentation for Tree Definitions are here. What I did was finding the Actions->CustomUrlAction and there I had all the attributes I needed.

Create a xml file under App_Data/Composite/TreeDefinitions/yourfile.xml and start filling it out.  This is how mine looked:

One of the really cool features that you will learn to love is how the Composite Core Team has a high focus on providing meaning full errors and making development easy by telling what is wrong and when possible, also how to fix it. Thats one of the best things you can focus at as a software provider. We as developers dont want to site and wait for help on StackOverflow or mails telling us what is wrong and how to fix it. One example of this is in this situation as seen in the screenshoot below. Everytime I save the xml file, C1 tries to load it and tells me what is missing and by trial and error i saved time reading documentation. When it succeded my entry poped up without me doing anything in the tree structure.

I can now right click my Razor Demo and Open Razor View, notice its also in the toolbar at the top. Opening it ofcause give me a not found and thats what we will crate now.

I will just create a really simple layout. People who have created C1 Console Applications before knows how to do the <ui:elements> and others will have to do some reading them self. Ofcause normal html is also accepted and <ui:elements> are only for making C1 render it with its styles and layout. So at some point when a skilled frontend developer makes time for creating a new layout for the console, our views will follow along. (If thats you, feel free to get in touch - personally I would love to see the console get a little more modern look).

Back on track, lets create the view. I created mine in the Composite/InstalledPackages/RazorDemo/ as I used in the CustomActionUrl: 

One of the really cool features of the Console is the Ajax Features. If you as illustrated in the demo, uses callbacks and provide elements with ids. Composite will auto update the UI based on the components that changes its content in the post back. As a end user you will not see any flashing or blinking elements, it just feels like a native application that updates when able a button is pressed. To see this, you ofcause will have to create the demo your self. But you can see my screenshoots of the view i just created below.

comments powered by Disqus