barryokane
3/24/2016 - 12:09 PM

Simple example of using Razor @helper in an Umbraco template. In this example we have some repeating HTML, using @helper removes the duplic

Simple example of using Razor @helper in an Umbraco template. In this example we have some repeating HTML, using @helper removes the duplication.

umbraco.helper.sample.changed.cshtml
content_copyfile_download
@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>
umbraco.helper.sample.before.cshtml
content_copyfile_download
@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>