Razor Blade Tutorials

Tutorial Home

Create custom (non Html5) tags or Tags whose name stems from a variable

#1 Safe Html5 Attributes from code

Json Html5 Attributes from code

Requirements

RazorBlade 3.09

Resources

RazorBlade Safe Attributes API @Tag.Attr v3

Here we'll go through some examples using @Tag.Attr(...)

Creating Simple Attributes

Output

This is a simple demo showing how to add the title and class attribute using code.
It switches between warning/primary depending of the second being odd or even. Refresh the page to see the difference.
If you mouse-over, you'll also see the tooltips showing stuff which would cause trouble otherwise.

@{
  var titleWithIssues = "I said \"check this out!\" \n\n even 'different quotes' and line breaks work!";
  var cls = "alert alert-";
  cls += (DateTime.Now.Second % 2 == 0) ? "warning" : "primary";
}
<div @Tag.Attr("title", titleWithIssues) 
  @Tag.Attr("class", cls)
  @Tag.Attr("number", 27)>
  This is a simple demo showing how to add... <!-- unimportant stuff, hidden -->
</div>

Create custom (non Html5) tags or Tags whose name stems from a variable

#1 Safe Html5 Attributes from code

Json Html5 Attributes from code

Source Code of this file

Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code

@inherits Custom.Hybrid.Razor14
@using ToSic.Razor.Blade;
<!-- unimportant stuff, hidden -->


<div @Sys.PageParts.InfoWrapper()>
  @Html.Partial("../shared/_DefaultInfoSection.cshtml")
  <div @Sys.PageParts.InfoIntro()>
      <h2><em>RazorBlade</em> Safe Attributes API @@Tag.Attr <em>v3</em></h2>
      <div>
        Here we'll go through some examples using <code>@@Tag.Attr(...)</code>
      </div>
    </div>
  </div>


Creating Simple Attributes

  @{
    var titleWithIssues = "I said \"check this out!\" \n\n even 'different quotes' and line breaks work!";
    var cls = "alert alert-";
    cls += (DateTime.Now.Second % 2 == 0) ? "warning" : "primary";
  }
  <div @Tag.Attr("title", titleWithIssues) 
    @Tag.Attr("class", cls)
    @Tag.Attr("number", 27)>
    This is a simple demo showing how to add... <!-- unimportant stuff, hidden -->
  </div>