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.

html angular

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:

Created a new Directives custom table, with just the default fields.
Add a single dummy record in there. (don't worry, the contents of the record is irrelevant)
Then for each directive you need, add a new transformation.

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" />

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.