Skip to main content
Home  › ... 2sxc Apps

Razor Blade Tutorials

Tutorial Home
RazorBlade - using the Html5 Tag API
#2 Introduction to the Fluid Html5 API with 130+ objects like Img, Table etc. 
Common Attributes (Id, Title, Class, Style) with SmartJoin

RazorBlade Basic Html5 Tag API Introduction v3.0

This API lets you safely create html from code in an elegant way. This basic introduction shows the most basic principles you can apply, and we'll build on that in the next tutorials.

Requirements
Resources

Basic Principles

  1. Quick, Safe Construction
    @Tag.Div() will created typed objects to generate Html5. The Div can be any known Html5 tag, so @Tag.Img(), @Tag.Table(), @Tag.Br() will all work.
    👉 Here is the complete list
  2. Wrap Text and Tags in the constructor
    Use @Tag.Div("hello!") to put content into a tag. You can also put tags inside tags like @Tag.Div(Tag.H3("a title")), and also add an unlimited list of things with @Tag.Div(Tag.H3("Title"), Tag.P("some intro text"), ...)
  3. Add more Text & Tags later on
    Sometimes your code will want to add content step-by-step. You can always do this using .Add(...), so you can write @Tag.Div(Tag.H3("title")).Add(Tag.P("body"))
  4. Replace the contents completely
    Maybe you've contstructed some tags but now the code needs to throw away the previous content and replace it. Use .Wrap(...) for this. So
    @Tag.Div(Tag.H3("...")).Wrap("just reset the content") will completely replace the whole contents with the text.
  5. Set Common Attributes
    Each tag object has many commands on it like Id(...), Class(...), Style(...), Title(...). The result of these commands is always the original object, so you can chain these (fluid API). So you can write @Tag.Div().Id("myId").Class("row highlighted").
    Important: Some attributes are extra smart, like Class or Style, which will SmartJoin the values if called multiple times. Read the special tutorial for that.
  6. Set Tag-Specific Attributes
    All known html5 objects are supported, and return specially typed objects. So you can write @Tag.Img().Src("...") or @Tag.A().Href(...), but @Tag.Img().Href(...) won't work.
    Important: Some attributes are extra smart, like Src on Img or Srcset on Source. Read the special tutorial for that.

Demo Simple Tags like h4 and div

Instead of trying to merge strings like
<div and id='@yourId' and > followed by the content and closed by </div>
you would instead write:
@Tag.Div("your content").Id("wrapper")
Here's what you get with an @Tag.H4(...) and @Tag.Div(...) and when you combine them...

Example 1: This title was code-generated

This div was coded

Example2: This h4 title is inside the div

and this text in the div follows the title

Example 3: Using Tag.Div
This is the intro. I hope you like it otherwise it's ok too 😉

Example 4: Tag contents can also use Wrap(...) and Add(...)

Now the real power start: using the Wrap method, you can add more content to your tag - and this can be both text, more Tag objects or even lists of Tag objects. Wrap always replaces the content, and you could also use Add(...) instead to append stuff.
Did you know, that you can add text...and tags
as well as more tags and strings inside it?
RazorBlade - using the Html5 Tag API
#2 Introduction to the Fluid Html5 API with 130+ objects like Img, Table etc. 
Common Attributes (Id, Title, Class, Style) with SmartJoin

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 -->
RazorBlade Basic Html5 Tag API... <!-- unimportant stuff, hidden -->

Demo Simple Tags like h4 and div Instead... <!-- unimportant stuff, hidden -->

@* this will place an HR in the page - not very useful, but just for a first example *@
@Tag.H3("Example 1: This title was code-generated")

@* now let's create a bootstrap-style box *@
@Tag.Div("This div was coded").Class("alert alert-warning")

@Tag.Div(
  Tag.H4("Example2: This h4 title is inside the div"),
  "and this text in the div ",
  Tag.Em("follows the title")
).Class("alert alert-warning")

Example 3: Using Tag.Div
@(Tag.Div("This is the intro. ", 
    Tag.B("I hope you like it"), 
    Tag.I(" otherwise it's ok too"), 
    " 😉")
    .Id("wrapper")
    .Class("alert")
    .Class("alert-dark"))

Example 4: Tag contents can also use... <!-- unimportant stuff, hidden -->
@{
  var darkBox = Tag.Div()
    .Class("alert alert-dark")
    .Wrap(
      "Did you know, that you can add text...",
      Tag.Code("and tags"),
      Tag.Div(
        "as well as more ", 
        Tag.B("tags"),
        " and strings inside it?"
      )
        .Class("alert")
        .Class("alert-danger")
    );

}
@darkBox

<!-- unimportant stuff, hidden -->