Getting Started with Bellevue

All the following code is in the Ope.Bellevue.DemoWeb project in the downloads package.

To get started with Bellevue in a new Visual Studio Asp.Net MVC project, you need to first make the reference to "Ope.Bellevue.dll". Then, you need to add to your "Global.asax.cs" the registration of Bellevue view engine:

protected void Application_Start()
{
    RegisterRoutes(RouteTable.Routes);

    // Uncomment this line, if you are not using aspx pages / ascx controls at all.
    // ViewEngines.Engines.Clear();
    ViewEngines.Engines.Add(new Ope.Bellevue.BellevueViewEngine());
}

Now you are ready to add a Bellevue view. View is just a HTML-file with .htm or .html suffix. The example here is "/Views/Demo/Demo1_Intro_Bellevue.html", which has the following HTML in the upper part of body:

<div id="menucontainer">
    <h1>Info about <b>Product 1</b></h1>
</div>   

To change the "Product 1" text to ViewData["Name"] coming from the controller we would add the following Bellevue script in the head part of the html file:

<script type="text/bellevue">
    h1 b        {   text: data(Name); }
</script>

Let's go this through: The script tag is just like a normal script tag according to HTML standard. Instead of type "text/JavaScript", we are using type "text/bellevue". This is a marker for the Bellevue parser to take the contents and apply that script to the HTML document on server side. If the page is loaded without going through Bellevue view engine (e.g. directly from file system to browser), the browser will simply ignore a script where it does not recognize the type.

The syntax of the script is just like CSS: we have the selector "h1 b", which will select our target element and apply the declaration "text: data(Name)" to that element. Declaration "text" tells the system to replace the inner text with the value which in this case is function "data(Name)". This will return either ViewData["Name"] or ViewData.Model.Name.

The script can of course also be an include file like in "Demo2_Intro_Bellevue.html":

<script type="text/bellevue" src="Demo2_Intro_Bellevue.bvue"></script>

The include files must have the .bvue suffix, but the suffix can be left out from the src attribute. Include files are searched for like partial views, so they can also be in the Shared folder.

The selectors can be much more complex like in "Demo2_Intro_Bellevue.bvue".

#main table tr:nth-child(1) td:nth-child(2) {   text: data(Name);   } 

I am currently using the Fizzler CSS selector with HTML Agility Pack and the CSS parser is the one from BoneSoft here in code project. They all are great projects, but they have some limitations and bugs, so you do not get all the features of CSS Level 3 selectors. But a powerful set in any case.

Declarations

Just replacing text would not be that great, but of course there are also other declarations. This preview version has the following:

To get more details on how you can use these declarations, see the "Declarations.html" view. There are some examples.

Relative positioning

CSS selector will always match an individual element. By default most declarations target the inner nodes (or inner html) of the element that was matched by the selector. I.e. p { text: "foo" } will replace the html inside <p>any html</p> to be <p>foo</p>.

Sometimes this is not quite enough, but you can get more control by using standard suffixe of declaration names:

For more info and examples, see "Demo5_RelativePosition.html" in the Demo project.

Functions

We already used the "data()" function above, but there are of course others. Current implementation has the following set:

You can nest functions and much of them are the same as in StringTemplate. Most of the functions are probably obvious, but there is a reference in here - and it is also included in the Demo Project.

Debugger

If you have checked any of the examples in the demo project, you have no doubt noticed that at the bottom of each page there is the "Bellevue debugger". The debugger shows you possible warnings and errors, rule sets that are applied to elements and the contents of the model (limited implementation) and ViewData dictionary.

The debugger is now on by default, but if it bothers you, you can set it off by changing the Global.asax.cs:

var engine = new Ope.Bellevue.BellevueViewEngine();
engine.ShowDebugger = false;
ViewEngines.Engines.Add(engine);

This is of course just temporary implementation. In the final version, you should have much more control over the debugger, but at this stage you usually want to see the debug info.

OK, these are the basics, but you should really also check the Templates and Master pages in the Advanced features section.