Cobalt Beta - jQuery Style View Templating!

In a recent blog post I shared a preview of the Cobalt project I've been working on. Today, the source code has been uploaded to git-hub and the first beta binaries are being released!

If you've seen any of my previous blog posts then you realize I'm not much of a fan of the current way to populate templates in ASP.NET MVC. I've tried a handful of different ways to improve the experience but so far nothing really felt like an improvement.

Cobalt uses CSS selectors to find and update content, much like the way that jQuery works. Cobalt works with ASP.NET MVC (and WebForms) so you can include it in an already existing project and use it right away!

So what does Cobalt look like? Here is an example of an MVC View...

<%@ Page Language="C#" 
    Inherits="System.Web.Mvc.ViewPage<IEnumerable<ProductDetail>>" %>
<%  
    this.Ready(() => {

        //select by tag names
        this.Find("form")
            .Attribute(new {
                action = this.Url.Action("CheckOut")
            });

        //find and set values for elements
        string current = this.Find("h3").Text();
        this.Find("#title").Text(current.ToUpper());

        //select classes and certain pseudo selectors
        this.Find(".list :even").AddClass("alt-item");

        //create new elements on the fly
        var link = this.Create("<a/>")
            .Text("Read About Us")
            .Attribute("href", this.Url.Action("AboutUs"));
        this.Find("p").Append(link);

        //create custom elements (like CustomControls)
        Stylesheet sheet = new Stylesheet("~/site.css");
        sheet.AddToPage();

    });

%>

<html>
    <head>
        <title>Sample</title>
    </head>
    <body>
        <form method="post" >
            <h3>Temp Title</h3>
            <p>The description goes here</p>
            <ul class="list" >
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Item 4</li>
                <li>Item 5</li>
            </ul>
        </form>
    </body>
</html>

You can see that much like jQuery we have to queue up the work we need to execute once the document is ready.

I have a lot of documentation to write and a lot of screencasts to record, but for now, here are a list of the more important details.

The Important Stuff!

You must call CobaltManagement.Initialize() in your Global.asax file in the Init method (just override it and call it).
Cobalt uses HtmlAgilityPack to handle parsing of html content. I'm not happy with the framework so it will be one of the first things to be phased out, but for now you need to make sure to download it if you get the source code instead of the binaries.
You must use this.Ready from your pages and controls to wrap your commands. Otherwise your commands will run before the document is ready and fail.
Cobalt is aware of context, so if you use this.Find within a UserControl then you're only going to select elements within that control. If you need to access the Page level from a UserControl then you can call this.Page.Find to change the scope of the command.

Cobalt supports a decent amount of selectors. Below is a list of currently available options.

Combinators: ' ', >, +
Shortcut Attributes: #elementId, .cssClass, $elementName
Attribute Matching (ex. [@name='value']): equals (=), starts with (|=), ends with ($=), contains (~=)
Pseudo: first, last, even, odd, nth(#), lt(#), lte(#), gt(#), gte(#), text, password, button, checkbox, radio, submit, file

Keep in mind this is very much beta code - I was literally working on changes today. If you're feeling brave then download the source and dig right in!

May 31, 2010