Requirements
Resources
RazorBlade Id
, Title
, Class(...)
and Style(...)
with SmartJoin
All html attributes can have these Properties
id
- made with.Id(...)
(replaces previous id)class
- made with.Class(...)
(expands previous class)style
- made with.Style(...)
(expands previous style)title
- made with.Title(...)
(replaces previous 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)
Info: SmartJoin
Note that some of these, like Id
will replace the previous value.
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...
Output
-
@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>
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> <code>Id</code>, <code>Title</code>, <code>Class(...)</code> and <code>Style(...)</code> with SmartJoin</h2> <p> All html attributes can have these Properties </p> <ul> <li><code>id</code> - made with <code>.Id(...)</code> (replaces previous id)</li> <li><code>class</code> - made with <code>.Class(...)</code> (expands previous class)</li> <li><code>style</code> - made with <code>.Style(...)</code> (expands previous style)</li> <li><code>title</code> - made with <code>.Title(...)</code> (replaces previous title)</li> </ul> <p> So <code>Tag</code> 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 <br> <code>@@Tag.Div().Id("wrapper").Class("alert").Class("alert-primary)</code> </p> <div class="alert alert-info"> <h2>Info: SmartJoin</h2> <p> Note that some of these, like <code>Id</code> will replace the previous value. Others like <code>Class</code> will add new values to the attribute. </p> <p> 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 <code>firstClass secondClass</code>. Others should be appended with a special character like <code>;</code> in styles because you want <code>width: 75px; height: 25px</code>. And others should replace the previous value - like <code>id</code> should always only have one value. </p> </div> </div> </div> <h3> RazorBlade Attributes are super-smart... </h3> <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> @* Footer *@ @Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })