Blogs
Systenics Website Relaunch
Our older website was starting to show age and unable to keep pace with styles. We had several internal discussions regarding a re-design but usually ended up shelving the plan since we were unable to identify and justify the reason for re-design if the outcome would just be a better design. At times we thought of just purchasing a template and updating the content and finish the process.
Latest Posts
Create navigation menu in Umbraco 6 using ASP.NET MVC Partial View and Razor
I was recently faced with the challenge of implementing a navigation menu in Umbraco 6, it was very difficult to search creditable samples which worked in Umbraco 6. In this blog post, I will explain the steps to create a navigation menu using partial view as you can see on current Systenics website. Besides linking the pages, we also wanted to display a help text for each menu item. Umbraco 6 provides several ways to implement the same, you could either use Macros, but I have chosen to write a MVC Partial View. This article assumes that you have Umbraco 6 configured to use Mvc as the display engine so that MVC Partial Views can be used.
Continue readingBundle and Minify CSS/JS using ClientDependency in Umbraco 6 MVC/Razor
This is going to be a short post on how to configure style sheets and JavaScript's bundling and minification in Umbraco 6 using ClientDependency framework in MVC. The benefits of bundling and minification are obvious as they reduce the number of HTTP requests as well as decrease the download size of resources to the browser resulting in a faster browsing experience. While Microsoft has prebuilt its own libraries to enable these features, Umbraco uses the ClientDependency framework to achieve the same. You can read more about the client dependency framework from its codeplex website, its got quite a few configurations options and you and read more about them on its website. In this post I am just going to focus on getting an initial configuration up and running since there seems to be lack of clear documentation on the topic and it took me a while too to figure how to set it up correctly. This article assumes that you already have a installation of Umbraco 6 and have configured its rendering engine to use ASP.NET MVC for the pages.
Continue readingGenerate Sitemap using Umbraco 6 CMS and ASP.NET MVC Razor code
Sitemap is still considered one of the most important element of Website development. Google and Bing do provide an option to reference your website sitemap so that their bots can traverse through all the links. But, most developers or website administrators often forget to include it. In this blog post, I will explain the steps to create a Sitemap using Umbraco 6, ASP.NET Partial View and Razor code. This article assumes that you have Umbraco 6 configured to use Mvc as the default rendering engine so that MVC Partial Views can be used.
Continue readingSetting up Umbraco 6 in Visual Studio 2012 for MVC development
The starter packs provided on the Umbraco 6 default installation are good, but in case you need to build a complete new UI design as per your clients requirements then its far easier to start with a blank slate rather than try to mend an existing design to suit your requirements. If you want to move further and start developing forms etc. then its best to setup Umbraco 6 as a Visual Studio project so that you can debug your code. Umbraco provides two kinds of rendering engines for your pages, it can work in traditional Web Forms (its default engine) as well as it can user Razor with MVC. I personally find the HTML generated by MVC to be much clean, and better suited for building responsive html5 based applications. In this short blog post I am detailing the steps required to setup Umbraco 6 in Visual Studio 2012 as well as configure it to use MVC rendering engine. This blog post seeks to serve as a starting point for various other Umbraco development post that I plan to write.
Continue readingCreate a Grid View with paging and sorting feature using ASP.NET MVC Razor and LINQ
Recently, I came across a requirement to create a Grid View with paging and column sorting feature. Since, I was using ASP.NET MVC there was no server side control such as Repeater, GridView or DataList which are available in ASP.NET. I googled but didn’t come across a good solution except few third-party paid ASP.NET MVC controls. So finally I decided to code my own Grid View with support for paging and column sorting with help from information available on blogs and forums. Even though I am showing the code in context of an example its extensible enough to reuse it elsewhere.
Continue readingCreate a Responsive, Fluid HTML5/CSS3 based website on Umbraco 6 using Twitter Bootstrap
Building responsive, fluid HTML5/CSS3 based websites are a rage these days delivering the best ROI for clients investing in building new web sites. Building a single website which adapts itself depending on the device screen size gives end users richer experiences. There are several ways of building responsive websites, one of the popular ways to to use an existing framework like Bootstrap from Twitter which provide base scaffolding to quickly build responsive websites. In this blog post I am going to focus on how to integrate Twitter Bootstrap with Umbraco 6 and MVC/Razor display engine to build a HTML5/CSS3 based responsive website. The goal is to build a simple single page responsive website similar to the fluid bootstrap sample and focus on the integration part so that you can build more complex layouts as required. I plan to build upon this sample in future blog posts.
Continue readingCreating an Ajax enabled Contact Form in Umbraco 6 with ASP.NET MVC 4 and Twitter Bootstrap
In the previous blog post, I covered how to create a Bootstrap enabled responsive website in Umbraco 6 using ASP.NET MVC 4. In this blog post, I intend to build upon the previous post to add a Contact Form, which is one of the key requirements of any simple web site which will email the owner of the site with the contents of the form. The aim of this blog post is two fold, firstly we will see how to write controllers in Umbraco 6 using ASP.NET MVC 4. Secondly, we will see how we can Ajax enable the same contact form in Umbraco 6 for better user experience.
Continue readingSetting up Umbraco 7 in Visual Studio 2013 for MVC 4 development
Umbraco 7 has been released, with a refreshed administrative interface making it one of the top CMS in the market. Our earlier blog post on Setting up Umbraco 6 in Visual Studio 2012 for MVC development was found useful by many readers so its time to write and updated blog post with Umbraco 7. The Umbraco team have fully embraced ASP.NET 4.5 as well as MVC for Umbraco 7, making it far more easier for us to build MVC based web sites. In this blog post we will focus on using Visual Studio 2013 and creating a fresh Umbraco 7 website which can be built upon going further.
Continue readingCreate a Responsive, Fluid HTML5/CSS3 based website on Umbraco 7 using Bootstrap 3.0 Framework
Building responsive, fluid HTML5/CSS3 based websites are a rage these days delivering the best ROI for clients investing in building new web sites. Building a single website which adapts itself depending on the device screen size gives end users richer experiences. There are several ways of building responsive websites, one of the popular ways to to use an existing framework like Bootstrap which provide base scaffolding to quickly build responsive websites. In this blog post I am going to focus on how to integrate Bootstrap v3.0.X with Umbraco 7 to build a HTML5/CSS3 based fluid responsive website. The goal is to build a simple single page responsive web page similar to the Jumbotron bootstrap sample and focus on the integration part so that you can build more complex layouts as required. I plan to build upon this sample in future blog posts.
Continue readingAdding Bootstrap based Responsive Carousel to Umbraco 7
Image Sliders and Carousels are very popular elements for building any kind of modern websites. There are several JQuery based scripts available which provide a wide variety of features for building the carousel element. In this blog post I’ll illustrate how easy it is to implement bootstrap based carousel for your website. This blog post with build on my previous blog post Create a Responsive, Fluid HTML5/CSS3 based website on Umbraco 7 using Bootstrap 3.0 Framework where I have integrated bootstrap 3.0.1 with Umbraco 7. This example can be extended to use your own JQuery based slider script.
Continue reading