Razor Blade TutorialsTutorial Home › Razor.Blade
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.
Quick, Safe Construction
@Tag.Div() will created typed objects to generate Html5. The
Div can be any known Html5 tag, so
will all work.
👉 Here is the complete list
Wrap Text and Tags in the constructor
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"), ...)
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
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.
Set Common Attributes
Each tag object has many commands on it like
The result of these commands is always the original object, so you can chain these (fluid API). So you can write
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.
Set Tag-Specific Attributes
All known html5 objects are supported, and return specially typed objects. So you can write
Important: Some attributes are extra smart, like
Source. Read the special tutorial for that.
Demo Simple Tags like
Instead of trying to merge strings like
> followed by the content and closed by
you would instead write:
Here's what you get with an
@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 divand this text in the div follows the title
Example 3: Using
This is the intro. I hope you like it otherwise it's ok too 😉
Example 4: Tag contents can also use
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...
as well as more tags and strings inside it?
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.
<!-- 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.H4("Example2: This h4 title is inside the div"),
"and this text in the div ",
Tag.Em("follows the title")
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"),
Example 4: Tag contents can also use... <!-- unimportant stuff, hidden -->
var darkBox = Tag.Div()
"Did you know, that you can add text...",
"as well as more ",
" and strings inside it?"
<!-- unimportant stuff, hidden -->