Razor Blade Tutorials

Tutorial Home › Razor.Blade

Safe Html5 Attributes from code

#2 Json Html5 Attributes from code

Introduction - Koi - Cool things with CSS-Frameworks and Classes

Requirements

RazorBlade 3.09

Resources

RazorBlade Advanced JSON Attributes with @Tag.Attr v3

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

Creating Attributes Containing JSON

Output

This div has an attribute created using an object, because we wanted json. If you look at the source, youll find data-my='{"Name":"razor","Description":"This isn\u0027t your normal text - it has \n line breaks and apostrophes"}'

@{
  // this is the object we want in the data-attribute
  var myObj = new { 
    Name = "razor", 
    Description="This isn't your normal text - it has \n line breaks and apostrophes"
  };
}
<div class="alert alert-secondary" @Tag.Attr("data-my", myObj)>
  This div has an attribute created using... <!-- unimportant stuff, hidden -->
</div>

Safe Html5 Attributes from code

#2 Json Html5 Attributes from code

Introduction - Koi - Cool things with CSS-Frameworks and Classes

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> Advanced JSON Attributes with @@Tag.Attr <em>v3</em></h2>
      <div>
        Here we'll go through some more advanced examples using <code>@@Tag.Attr(...)</code>
      </div>
    </div>
  </div>


Creating Attributes Containing JSON

  @{
    // this is the object we want in the data-attribute
    var myObj = new { 
      Name = "razor", 
      Description="This isn't your normal text - it has \n line breaks and apostrophes"
    };
  }
  <div class="alert alert-secondary" @Tag.Attr("data-my", myObj)>
    This div has an attribute created using... <!-- unimportant stuff, hidden -->
  </div>



@* Footer *@
@Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })