A way to render HTML snippets

John Fu asked on December 8, 2014 13:26

Hi, I have some HTML cut ups written with Angular and am now trying to implement that to Kentico. One of the challenges I'm facing now, is the ability to use Directives.

For those who don't know, angular directives are quite useful in that they bring in a snippet of reusable HTML via AJAX on load. Meaning that you can greatly reduce the markup that search engines read. Especially useful if you have repetitively long winded navigation, footers, etc that does not add to the search engine optimization.

So the problem I'm having is, where within Kentico can I content manage this snippet so that when Angular comes and request for the snippet, only the contents of the snippet will be rendered? If I did it as a regular page menu, it would bring in the HTML tags, header tags, body tags etc. If such a place exists, where is it? And how do I call the snippet?

Thanks, John.

Correct Answer

John Fu answered on December 9, 2014 04:28

Brenden, I think I'm onto something. At least that's what I'm sticking to for this project I'm working on. Here's what I did:

  1. Created a new Directives custom table, with just the default fields.
  2. Add a single dummy record in there. (don't worry, the contents of the record is irrelevant)
  3. Then for each directive you need, add a new transformation.
  4. In the Visual Studios solution, add a new ASPX Web Form. I'm calling mine GetSnippet.aspx. Here's my aspx page.

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="GetSnippet.aspx.cs" Inherits="Website_Tools_GetSnippet" ViewStateMode="Disabled" EnableViewState="false" %>

    <%@ Register Src="~/CMSWebParts/CustomTables/customtablerepeater.ascx" TagPrefix="uc1" TagName="customtablerepeater" %>
    <%--Gets the name of the snippet required from the query string, and gets the related layout from the directives custom table.--%>
    <uc1:customtablerepeater runat="server" ID="customtablerepeater" CustomTable="site.Directives" />
  5. Here's the Page_Load in the code behind for GetSnippet.aspx.cs

protected void Page_Load(object sender, EventArgs e)
    string directiveName = Request.QueryString["name"];

    if (!String.IsNullOrEmpty(directiveName)) {
        customtablerepeater.TransformationName = "crown.Directives." + directiveName;

So in the templateUrl option for the directive's javascript, you can now set it as /Site/Tools/GetSnippet.aspx?name=header and it would get you the snippet for the header.

One thing to think about is, what should it serve if the name passed through the querystring is invalid?

1 votesVote for this answer Unmark Correct answer

Recent Answers

Brenden Kehren answered on December 8, 2014 19:15

I'm not thinking of a way off the top of my head but when you do find a solution, please post, I'm interested to hear what you've done or what worked.

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on December 31, 2014 02:13

Sorry for the delayed answer, what I'd do is create a default transformation that simply returns "no records found". It could be in "crown.Directives.DefaultEmpty". So you'd simply modify your code a bit to possibly look up and see if the transformation even existed and if it didn't then display the empty one.

0 votesVote for this answer Mark as a Correct answer

John Fu answered on December 31, 2014 03:12

But that would only cater for 1 single snippet wouldn't it? i.e. DefaultEmpty?

0 votesVote for this answer Mark as a Correct answer

Mohamed Rashed answered on February 3, 2015 15:24

I'm happy because, This is the first question talking about angular with Kentico. also I hope we get official support for angular apps inside Kentico, this will be very handy for SPA apps.

From the other side I see new Admin area in Kentico 8 built with the SPA method.

Also I wanted to share this great blog post from Sterling Heibeck (Bizstream) talking about how two technologies get married :)


0 votesVote for this answer Mark as a Correct answer

Yang Wen answered on February 24, 2016 23:57

John: Resurrecting an old thread I know. However, how has your solution worked out for you? We are also contemplating on how to store + manage template files for use with Angular.

0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.