Razor Blade Tutorials

Introduction to the Fluid Html5 API with 130+ objects like Img, Table etc.

#3 Common Attributes (Id, Title, Class, Style) with SmartJoin

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.

Requirements

RazorBlade 3.09

Resources

Razor-Blade Tag Docs

Razor-Blade Docs

RazorBlade Attributes are super-smart...

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

Introduction to the Fluid Html5 API with 130+ objects like Img, Table etc.

#3 Common Attributes (Id, Title, Class, Style) with SmartJoin

Images with Unsafe URLs (Umlauts etc.)

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@inherits Custom.Hybrid.Razor14
@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 -->
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX