Razor Blade Tutorials

Tutorial Home › Razor.Blade

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.)

Requirements

RazorBlade 3.09

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>

<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>

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

@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 })