Declarations demo

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

Declaration Code Demo Notes
text
#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.
attr
#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.
html
#exHtml {
    html: "first<br />second<br />";
}
first
second
text-format
<div id="exTextFormatEmpty"></div>
<div id="exTextFormatWithValue">
    Time is {0:h:mm:ss}
</div>
...
#exTextFormatEmpty {
    text-format: data(date) 
        "Date is {0:d.M.yyyy}";
}
#exTextFormatWithValue {
    text-format: data(date);
}
Date is 26.9.2017
Time is 7:36:04
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...
text-replace
<td id="exTextReplace">
    The ID-number is #id here#.
</td>
...
#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...
checked
#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"
    class="oldClass">test
</td>
...
#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.
value
#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.
apply-template
-
- See other examples for how to use. E.g. StringTemplate comparison.
render-control
#exRenderControl {
    render-control-add: LogOnUserControl;
}

Placeholder ascx for logon-control. Current date: 9/26/2017 7:36:04 AM

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