Skip to main content

Razor Blade Tutorials

Tutorial HomeRazor.Blade

RazorBlade Id, Title, Class(...) and Style(...) with SmartJoin

All html attributes can have the properties id, class, style and title. So Tag objects have quick commands to set these. What makes it magical is that they always return the main object again, so you can chain them like
@Tag.Div().Id("wrapper").Class("alert").Class("alert-primary)
Note that some of these, like Id will replace the previous value, while others like Class will add new values to the attribute.

Imagine your code will add attributes step by step by using some kind of logic. In situations where you add more classes, they should be appended - like firstClass secondClass. Others should be appended with a special character like ; in styles because you want width: 75px; height: 25px. And others should replace the previous value - like id should always only have one value.

RazorBlade Attributes are super-smart...

  1. @Tag.Div().Id("original").Id("replaced") will get you <div id='replaced'></div>
  2. @Tag.Div().Class("original").Class("replaced") will get you <div class='original replaced'></div>
  3. @Tag.Div().Style("width: 75px").Style("height: 100px") will get you <div style='width: 75px;height: 100px'></div>

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 Id , Title , Class(...) and... <!-- unimportant stuff, hidden -->

  <ol>
    <li>
      <code>@@Tag.Div().Id("original").Id("replaced")</code>
      will get you 
      <code>@Tag.Div().Id("original").Id("replaced").ToString()</code>
    </li>
    <li>
      <code>@@Tag.Div().Class("original").Class("replaced")</code>
      will get you 
      <code>@Tag.Div().Class("original").Class("replaced").ToString()</code>
    </li>
    <li>
      <code>@@Tag.Div().Style("width: 75px").Style("height: 100px")</code>
      will get you 
      <code>@Tag.Div().Style("width: 75px").Style("height: 100px").ToString()</code>
    </li>
  </ol>
  


<!-- unimportant stuff, hidden -->