DotHTML markup overview
The pages in DotVVM are defined in files with .dothtml
extension.
The syntax used in DotVVM is called DotHTML. It is a standard HTML syntax with three flavors: directives, binding expressions, and DotVVM controls.
There are also special kinds of files with the .dotmaster
or .dotcontrol
extensions (master pages and markup controls). The syntax used in these files is the same as in .dothtml
files.
Directives
Directives are placed at the top of the file. They are used to specify various page-related information.
There is one required directive which must be present in each .dothtml
file - the @viewModel
directive:
@viewModel Namespace.ClassName, Assembly
Binding expressions
Binding expressions allow to bind properties declared in the viewmodel to the specified place in UI, or to invoke commands.
<p>Hi, my name is {{value: UserName}}!</p>
<p><img src="{value: ProfileImageUrl}" alt="Profile Image"/></p>
If the binding expression is used inside element, as a plain text, you need to enclose it in double curly braces: {{...}}
.
If the binding expression is passed into an attribute, only one curly braces are required: attribute="{...}"
. You can use double curly braces if you want.
You cannot combine text and binding in the same attribute - the following construct is not allowed:
<!-- do not combine binding with text in attributes -->
<element attribute="{value: this_is_not_allowed}_this-is-not-allowed" />
DotVVM controls
DotVVM controls appear in the markup as HTML elements with a namespace prefix.
These prefixes are not registered using the xmlns attributes like in XML-like languages. Instead, DotVVM looks in its configuration class (DotvvmStartup.cs
) for registered namespaces, and looks for the controls in these namespaces.
Each DotVVM control can specify properties using attributes or child elements:
<dot:Repeater DataSource="..." style="display: none">
<ItemTemplate>
some content...
</ItemTemplate>
</dot:Repeater>
The
DataSource
property of the Repeater control is specified as an attribute.The
ItemTemplate
property is specified as a child element. Some controls specify a default content property, which means that the element with the property name (<ItemTemplate>
in our case) can be omitted. The following syntax is valid forRepeater
becauseItemTemplate
is the default content property:
<dot:Repeater DataSource="..." style="display: none">
the ItemTemplate element can be omitted
</dot:Repeater>
Whether the property is used as an attribute or as a child element, is defined by the developer of the control.
It is possible to apply any other HTML attribute to most controls. Notice the style
attribute applied to the
Repeater
control in our example. The most common use case for this is to add a class
attribute to DotVVM controls.
The DotVVM for Visual Studio extension supports IntelliSense which will help you discover DotVVM controls and their properties.