Web Development & Execution
Justin Colangelo
by Justin Colangelo
share this
?fl
« Back to the Blog

Handlebars Dot Net

11/02/2016
Handlebars Dot Net

We are always looking for ways to streamline the website building process at our company. For almost every website that we build, there are pages that list a set of things like restaurants, activities, lodging, and press releases. Each client has a different set of fields for each list item. A restaurant can have a featured image, thumbnail image, location, menu (link to a PDF typically), hours, and season (in the case of ski resorts). In our CMS, for every one of the types of listings a developer was required for each part of the process. We would have to create a new .cs  file that implemented a shortcode interface, then pass the data to a partial view where we wrote the HTML for the listings of that type based on the custom fields. That was exhausting. Here is a sample of the code we would write several times over per project, per type of listing:

public string GetHtml(Dictionary parameters)
{
using (var context = new DataContext())
{
_listings = context.ContentPages.Where(x => x.SchemaId == SchemaId
&& x.IsActive == true
&& x.IsRevision == false
&& !string.IsNullOrEmpty(x.SchemaEntryValues))
.OrderBy(x => x.SortOrder)
.ToList();
}
if (parameters != null && parameters.ContainsKey("exclude") && !string.IsNullOrEmpty(parameters["exclude"]) && _listings.Any())
{
var exclude = parameters["exclude"];
_listings = _listings.Where(x => x.GetTextValue("Season") != exclude).OrderBy(x => x.SortOrder).ToList();
}
return DynamicModules.GetViewHtml("Partials/_DiningShortcodePartial", _listings);
}

That's just the first part. We have our data, and now we need to apply it to a new .cshtml  view file.


@model List
@if (Model.Any())
{

@foreach (var item in Model.OrderBy(x => x.SortOrder)) { var image = item.GetTextValue("Featured Image"); var shortDesc = item.GetTextValue("Short Description");
@Html.RenderUserShortcode("responsive_background url=\"" + image + "\"")
@item.GetTextValue("Outlet Name")
@Html.Raw(shortDesc)
Location:@item.GetTextValue("Location")
Hours:@item.GetTextValue("Hours")
}

}
Once we've built these two files, we can add a new shortcode reference to our shortcode config. Then we are ready to use it on a content page. What happens when a client wants to alter a field for the listing type? The person in contact with the client contacts a developer with the proposed changes, and the developer changes at least one file, publishes the code, then tests it. This process took a lot of multiple peoples' time. Then we found Handlebars.Net .
install-package Handlebars.Net
At this time we are using the latest version which is v1.8 . We were able to create a generalized listing shortcode .cs  file without needing a .cshtml  partial at all.

 

 


foreach (var page in pages)
{
data.Add(new PageWithEntries
{
Page = page,
Entries = schemaDataHelper.GetSchemaDataForPage(page.ContentPageId).ToDictionary(),
Url = navUtils.GetGeneratedUrl(
CachedObjects.GetCacheContentPages().FirstOrDefault(x => x.ContentPageId == page.ContentPageId))
});
}
Handlebars.RegisterHelper("remove_spaces", (writer, ctx, args) =>
{
writer.Write(args[0].ToString().Replace(" ", ""));
});
var hbs = Handlebars.Compile(template);
var result = hbs(data);
return result;

 


If you paid attention to that last block of code, you might be asking where the template comes from, or what are pages? Pages are content pages from the database. The template is a block of text that comes from the CMS. With our new Listing Template Schema we can now have an admin log in to the CMS, create a new content page, assign the Listing Template Schema to that page, provide the schema ID for the type of listings to display (an integer found in the list of schemas), and write a simple Handlebars template.

 

 


{{# this}}

[responsive_background url="{{Entries.[Listing Image]}}" alt="{{Entries.[Listing Image Alt Text]}}"]
{{Page.Title}}
Location: {{Entries.[Location]}}
Season: {{#each Entries.[Season]}} {{this}} {{/each}}
{{Entries.[Short Description]}}

{{/ this}}
In the editable HTML for each of these listing type pages we simply use this shortcode to access the page data:

[listing pageId="%%ContentPageId%%"]


Now we have made it possible to have an admin make edits to the listing code on a per listing type basis, leaving the developer out of it. Typically a developer just provides the first template so that an admin can copy, paste, and change field names for every other type.
Handlebars.Net has cut hours out of development time.

Thanks!

Thank you for contacting us!

We'll be in touch!

Back Home ×