With Ignite UI we’ve mostly kept to its platform-agnostic nature, showing you how you can create something great, without touching too much detail of all the possible environments. However, some applications can be platforms in their own right, like web CMS. As content and teams grow,  many end up using some form of CMS(and there’s always room for extending with some awesome jQuery widgets, right?). While WordPress dominates here and it’s pretty great, it’s not always the perfect fit for anyone, especially more .NET oriented web developers. The list of available picks for various platforms is rather long, but what stood out to me is that one CMS consistently either topped “.NET CMS” searches or was pretty high up there – Umbraco. What this tells me is that Umbraco has been gaining a lot of traction the last few years, or at least it got my attention. There’s a good reason for people to adopt it – it’s ASP.NET based, it’s open source, it’s got a lively community and as they put it “ ...Oh, and did we mention that it's free?”. Even the ASP.NET homepage is using it. Like, if that’s not good enough, there’s also the fact that Umbraco and the back-office, as they call it, are user-friendly and quite easy to start using by anyone.

Even though you can install Umbraco with pre-configured template sites(Starter kits) for various purposes, if you choose to do a Blank application, what you get is all the necessary infrastructure and an extremely clean foundation. Kind of like the “empty-really-blank-this-time” project template for ASP.NET MVC What’s so nice about bare-bones base? It can be built just the way you need it – no extra luggage to fight your way though. It will still integrate good old .NET controls, cache, let you use master pages or Razor or both and generally be the really nice platform that it is. But most importantly – MVC. Can I hear ASP.NET MVC Helpers?

Setup

I kind of wish this part could be super short, but it isn’t for now. If you haven’t got Umbraco or have no idea what that is – no worries, there are guides that have you covered. If you are using WebMatrix you can go ahead and hit New and then pick App Gallery. And it will be right up there

All left to do is follow the rest of the steps and you will have Umbraco up in like 2min. There’s a convenient NuGet package that can just add Umbraco to your project in a click. In reality, Umbraco is a heavily customized ASP.NET Web Site and you can always download it, unzip and open in either WebMatrix or Visual Studio manually. At the time of writing the WebMatrix template is at v6 and NuGet is already updated to the new and pretty v7.

I’m assuming you already have Ignite UI, but here’s a neat trick we offer as of the latest release – igniteui.com (which is like a second, more geeky home of Ignite UI, where all the samples and codes are) also has a big “Download Now” button. Yes, you can download the  full thing here, but there’s a bit extra – a custom build configurator. You can pick just the controls you need (like a chart for this blog) and get a combined and minified file with all the dependencies in. (for the doge fans)

Umbraco can have somewhat wonky setup – v6 kits often use both Razor rendering engine and ASP.NET WebPages. It’s a refreshing freedom to use anything you see fit, which is nicely in-tune with ASP.NET embracing  similar multi-faced development side allowing us to simply tick off anything.

Resources

First things first, place the Ignite UI files in their respective CSS and Scripts folders. Now, I can’t really tell you how to add those to the content. I’ve seen a few ways and I’ve barely scratched the surface of Umbraco. And that’s kind of it, really – Umbraco doesn’t enforce anything on you. So be it though Client Dependency (which ships with Umbraco), the “umbraco.library.RegisterJavaScriptFile” method, some other third party packages like Combres that I’ve seen.

So Umbraco actually comes with jQuery anyways, so what’s left for you is to use it and also add jQuery UI and the Ignite UI. For my v6 demo I went with the library provided utility:

This sadly won’t combine resource like Client Dependency would, but I failed miserably to integrate the latter with MVC view and web forms template(might be me, might be the different engines, context, whatnot). However, if you have your own templates built with MVC or.. did I mention Umbraco 7 is out? It’s kits are full on MVC, so this works perfectly too:

Either way(or any other), just make sure those files are there, will ya? :)

What Infragistics MVC assembly should I use?

Not saying that you need to use one(you can just use the controls with client scripts only), but with MVC platform you’ll probably want to. Ignite UI helpers for ASP.NET MVC ship in multiple versions starting from MVC 2 to MVC 5 with the latest release, because it’s sort of a bummer you can’t have a single helper for everything. You will have to go check the MVC version you are using, since it’s a web site not even Visual Studio will give you properties with version. Good old explorer to the rescue:

Helpers are built and will only work with their version of MVC available, so grab the Infragistics.Web.Mvc.dll for that version (for me both v6 and v7 were MVC4) and just copy it to the bin folder of the site (Visual Studio has add reference option too).

Where to develop?

Once more I can’t really tell you that, but I can give suggestions. I picked starter kits that have blogs/news, so I thought it’s only reasonable that there’s a page that allows content creators to see stats on those. With  some kits’ default master pages templates the only reasonable entry point with Html helpers is a Macro. Those are under the developer section, and they are quite flexible as to what they can be developed with. as with everything in Umbraco – hit Create and pick a name. But it can also be somewhat confusing at first – for example there are two options using the Razor engine where you can find the Html helpers. Alas, Razor is used, but not always the one I expected. Script files are DynamicNodeContext  that inherits from WebPages but as we already talked Html helper extensions are tied to System.Web.Mvc instead. That means you should go for the MVC Partial View, plus it’s the more recent and recommended way to develop macros anyways.

The great part of macros is that you as developer can include them in templates for content, but you can also expose them to the editor, so content creators can reuse them. And you can setup properties to support that even further with users entering settings when adding your macro to content:

Show me the code

Now that you have your Umbraco macro ready and with some published content you can add some Ignite UI visualization for that data. I have two demos with very similar code (links below), but one is on v6 Blog Starter and the other is on v7 with the Txt Starter Kit that has news instead, so the query for content items is different. I’ve added a property to blog/news items called “Views” where you would probably have some package to manage those.

In your MVC Partial View start with the all important:

And then after making sure the resources are covered, add in a chart to display the stats:

After that you can add the macro to some content page or render it in some template. The content query assumes this will be published on top level next to the News. If your templates are MVC based or you are using v7 where UmbracoTemplatePage inherits from System.Web.Mvc.WebViewPage, you can directly add this code without a macro too. I have second version with just that on the v7 demo. Regardless, the outcome should be a chart that shows the latest posts’ statistics:

Resources

I think I’ve mentioned it already, but I’ll say it again – I’m only scratching the surface here with what’s possible – Umbraco CMS is good because it’s flexible and it just “supports”, but that also means there are many differences and also it can be easy to start, but it does have a steep learning curve if you want to go deep. Hopefully, the information above was useful and at the very least sparked some ideas what you can do next with our jQuery controls and their ASP.NET MVC wrappers. So, happy developing and happy holidays. Presents in forms of links are below :)

• Check out Umbraco (they have nice getting started guides, videos, forums and the sorts)
• Umbraco Documentation (separately, because important reasons)
• Umbraco’s latest version 7 has moved code to GitHub
• Download the v6 demo with Blog Starter Kit or the v7 demo with Txt Starter Kit. I’ve setup both demos to use SQL CE so it should be an unzip-and-run deal; the username is “IgniteUI” and the password is “umbraco” – open folder as site with WebMatrix or Visual Studio. Run and go to “/umbraco” for the back-office.

I’d love to hear some thoughts, so leave a comment down below or @DamyanPetev.

And as always, you can follow us on Twitter @Infragistics and stay in touch on Facebook, Google+ and LinkedIn!