Monday, November 17, 2014

Umbraco: Partial View VS Partial View Macro

The company I have worked for is a multinational event organizer which is hosting one of the biggest shows on earth. With this nature of the business, an event website should be as flexible as a rubber where you can twist and make changes anytime and anywhere, not just on contents but on the design aspect as well. So compiling the Umbraco CMS is not an option,and besides, only 2 developers are employed to maintain their websites and in-house enterprise applications.

Umbraco is a great CMS, the best one and friendliest for developers that I have used so far. However, with the business needs, we faced a challenge of applying quick changes on code logic and view logic. If only we have time to compile Umbraco and make custom Surface Controllers, it would be a lot better, but because there's only 2 of us, we should be able to apply the changes as quickly as possible even when we're out of the office and lessen the compilation.

Another challenge is to let the designers have total freedom on their layout and not limited to any specific HTML standards but should not be able to see the macro codes because they don't have access to the Developers section and just to be sure they don't accidentally remove any syntax on the macros. The developers should also be able to change or modify the macros without the fear of breaking any HTML codes. They should also be able to create multiple macros but using the same HTML markup from the designers without copy-pasting the html markup on every macros. 

I have searched the internet about the good practice on how to achieve these goals, but to no avail. So, here's what I came up so far for the business needs.
  1. Partial View = where designers can implement their HTML markup. Minimal razor syntax.
  2. Partial View Macro = where developers will code the business logic and call the necessary partial views. No HTML markup.
  3. View Models = classes used to communicate or pass data between Partial View and Partial View Macro. This is the only part where we have to compile on VS. I don't think this will change that much.
The first thing I did is create a new VS project as Class Library (name it anything you like). I then created the view model classes, but using the namespace "Umbraco.Web". Be careful you don't create the same class names with Umbraco. We have added prefix on our classes just to be sure. The reason for this is so that you don't have to modify your existing web.config or including the references for each macros or partial views. At first, I have tried adding the references on the web.config and macros and it worked fine, until I have made the same changes on the Azure website which was not able to find the references. (couldn't find the answers to this yet). Here's a sample view model that I have created on my custom class library.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Umbraco.Web
{
    public class OurHeader
    {
        public string Name{ get; set; }
        public string Logo{ get; set; }
    }
}
Compile this project and copy your dll on the bin folder of your Umbraco installation.


Then, I have created a partial view called "_ourHeader". To make use of the properties available on a normal Umbraco views and helpers, the partial view must inherit from UmbracoViewPage.
@inherits Umbraco.Web.Mvc.UmbracoViewPage<OurHeader>

<div class="header-info">
 <span>@Model.Name</span>
 <img src="/ImageGen.ashx?width=389&heigth=94&constrain=true&image=@Model.Logo" />
</div>

I then created a partial view macro called "header" with parameter which sets the name of the partial view to use.


@inherits Umbraco.Web.Macros.PartialViewMacroPage
@{

      string partialView = (string)Model.MacroParameters["partialView"];

      OurHeader _header = new OurHeader ();
     //add your logic here how to populate the data
 
     //render your partial view
     @Html.Partial(partialView,_header)
}

On the template, the macro is then called by supplying the partial view name to use.


@Umbraco.RenderMacro("Header", new {partialView="_ourHeader"})

With this approach, the designers can have both access on the templates as well as the partial views, and they can have total control on their HTML markup without changing the codes inside the macro. They can define numerous versions of the partial views for a macro, and the developers can create multiple versions of macros using the same partial view. 

Basically, that's it. If you have a better approach to this, please let me know. 

2 comments:

  1. I have read your blog its very attractive and impressive. I like it your blog.

    Dot Net Training in Chennai Dot Net Training in Chennai .Net Online Training .Net Online Training Dot Net Training in Chennai

    Dot Net Online Training .Net Online Training ASP.NET Online Training ASP.NET Online Training

    ReplyDelete