Declarations demo

The following table shows the basic scenarios with the so-far supported declarations.

Declaration Code Demo Notes
#exSimpleText { 
    text: "Hello World"; 
Hello World
text (with encoding)
#exEncodedText {
    text: "Some HTML: <p>Hello World</p>" 
Some HTML: <p>Hello World</p> Text is automatically HTML-encoded.
#exAttrText input { 
    attr: value "Hello World"; 
attr (with encoding)
#exAttrEncodedText input {
    attr: value 
    'Text with "quotes &amp; ampersand"'; 
At the moment, only double quote is replaced, not "&" or "<". This may still change though.
#exHtml {
    html: "first<br />second<br />";
<div id="exTextFormatEmpty"></div>
<div id="exTextFormatWithValue">
    Time is {0:h:mm:ss}
#exTextFormatEmpty {
    text-format: data(date) 
        "Date is {0:d.M.yyyy}";
#exTextFormatWithValue {
    text-format: data(date);
Date is 9.12.2019
Time is 6:59:15
This is very preliminary - I am considering at least:
  • Support for attributes and non-encoded html
  • Adding Formatters like in StringTemplate
  • Several objects
  • printf format instead of .Net for easier porting on other platforms
  • specifying culture
But you get the idea...
<td id="exTextReplace">
    The ID-number is #id here#.
#exTextReplace {
    text-replace: "#id here#" 123;
The ID-number is 123. Again very preliminary...
  • Should this work with attributes and HTML?
  • How about several replaces on one text?
  • How about using Regex...
#exChecked input:nth-child(1),
#exChecked input:nth-child(2) {
    checked: true();
#exChecked input:nth-child(4),
#exChecked input:nth-child(5) {
    checked: false();
Originally unchecked:
Originally checked:
style and class
<td id="exStyle" 
    style="background-color: Gray"
#exStyle {
    style-add: "color: yellow";
    class-insert: "newClass";
test The style-add and style-insert will automatically add ";" if the attribute already has a value. Class-add and class-insert will add a space as a separator.
#exValue {
    value: "new value";
At the moment, this is just a shortcut to the value attribute. The idea is that perhaps in the future this would handle also textarea, select/option and even radio/checkbox scenarios in a nicer way, but I am still considering different approaches.
- See other examples for how to use. E.g. StringTemplate comparison.
#exRenderControl {
    render-control-add: LogOnUserControl;

Placeholder ascx for logon-control. Current date: 12/9/2019 6:59:15 AM

Can be a Bellevue partial view, but also an ascx like here (Shared/LogOnUserControl.ascx).