Last active
May 20, 2016 18:47
-
-
Save jmahc/43139328fcdd9a55b55c3622f493c31f to your computer and use it in GitHub Desktop.
Pass a color to a Razor HtmlExtensions Helper that returns HtmlString that appends the color passed to the helper to the containing element's class. This is for when a structure is reused but its colors may vary.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@{ | |
var color = ViewData.ContainsKey("Color") ? ViewData["Color"].ToString() : string.Empty; | |
} | |
<div class="divider @(color)"> | |
<div class="divider-container"> | |
<svg class="divider-triangle" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none"> | |
<path class="divider-triangle-left" d="M0 100 L50 100 L0 0 Z"></path> | |
<path class="divider-triangle-right" d="M49 100 L100 100 L100 0 Z"></path> | |
</svg> | |
</div> | |
</div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
namespace ProjectName.Helpers | |
{ | |
public static class HtmlExtensions | |
{ | |
public static HtmlString DividerHelper(this HtmlHelper helper, string color) | |
{ | |
var builder = new StringBuilder() | |
.Append( | |
helper.Partial( | |
"~/Views/Shared/_Divider.cshtml", // Location of partial view file | |
null, | |
new ViewDataDictionary | |
{ | |
{ | |
"Color", string.Format("divider-{0}", color) // Class name is 'divider-{color}' | |
} | |
} | |
) | |
) | |
.ToString(); | |
return new HtmlString(builder); | |
} | |
public static IHtmlString Resource(this HtmlHelper htmlHelper, HelperResult renderer) | |
{ | |
return renderer; | |
} | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@using ProjectName.Helpers | |
<div class="section home-section home-section-one"> | |
<section class="container"> | |
<h2>Title lorem ipsum </h2> | |
<p>Title text body lorem ipsum</p> | |
</section> | |
// HtmlHelper in use! :) | |
@Html.DividerHelper("blue") | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment