Skip to content

Instantly share code, notes, and snippets.

@barryokane
Last active March 15, 2017 15:52
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save barryokane/3bb12a1fa117c4eda7ff to your computer and use it in GitHub Desktop.
Save barryokane/3bb12a1fa117c4eda7ff to your computer and use it in GitHub Desktop.
Simple example of using Razor @Helper in an Umbraco template. In this example we have some repeating HTML, using @Helper removes the duplication.
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
Layout = "Layout.cshtml";
}
<main>
<section id="content" class="offers">
@{
var list = CurrentPage.Children.Where("DocumentTypeAlias == \"OffersDetail\"");
if(list.Count() > 0)
{
foreach(var item in list)
{
<div class="offers-list row">
@if(item.HasValue("summaryImage"))
{
var img = Umbraco.Media(item.GetPropertyValue("summaryImage"));
<div class="offer-list-image">
@if( some_logic_test )
{
<img src="@img.Url" alt="@img.altText" />
<p>other code here</p>
if (!String.IsNullOrEmpty(text)) {
<div class="list-image-overlay">
<div class="list-image-overlay-table">
<div class="list-image-overlay-inner">
@item.summaryImageOverlayText
</div>
</div>
</div>
}
}
else
{
<a href="@item.Url">
<img src="@img.Url" alt="@img.altText" />
<div class="list-image-overlay">
<div class="list-image-overlay-table">
<div class="list-image-overlay-inner">
@item.summaryImageOverlayText
</div>
</div>
</div>
</a>
}
</div>
}
}
}
}
</section>
</main>
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
Layout = "Layout.cshtml";
}
@helper SummaryImageOverLayText(string text) {
if (!String.IsNullOrEmpty(text)) {
<div class="list-image-overlay">
<div class="list-image-overlay-table">
<div class="list-image-overlay-inner">
@text
</div>
</div>
</div>
}
}
<main>
<section id="content" class="offers">
@{
var list = CurrentPage.Children.Where("DocumentTypeAlias == \"OffersDetail\"");
if(list.Count() > 0)
{
foreach(var item in list)
{
<div class="offers-list row">
@if(item.HasValue("summaryImage"))
{
var img = Umbraco.Media(item.GetPropertyValue("summaryImage"));
<div class="offer-list-image">
@if( some_logic_test )
{
<img src="@img.Url" alt="@img.altText" />
<p>other code here</p>
@SummaryImageOverLayText(item.summaryImageOverlayText)
}
else
{
<a href="@item.Url">
<img src="@img.Url" alt="@img.altText" />
@SummaryImageOverLayText(item.summaryImageOverlayText)
</a>
}
</div>
}
}
}
}
</section>
</main>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment