Skip to main content

Razor Blade Tutorials

Tutorial HomeRazor.Blade

RazorBlade Advanced JSON Attributes with @Tag.Attr v3

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

Creating Attributes Containing JSON

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"}'

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.

@inherits ToSic.Sxc.Dnn.RazorComponent
@using ToSic.Razor.Blade;
<!-- unimportant stuff, hidden -->
RazorBlade Advanced JSON Attributes with... <!-- unimportant stuff, hidden -->

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>


<!-- unimportant stuff, hidden -->