James Broome

If you’ve been following this blog, or those of my colleagues Howard and Jon, it’s probably been obvious that we love the Spark view engine. We’ve been using it in anger for the last 6 months or so on our latest Asp.Net MVC project and between us we have nothing but praise for it.

I’ve talked before about how the use of Spark really helped us to work better as a team – with .Net developers writing .Net code, and our interface developers writing clean HTML and CSS. Integration of these two parts was simple, with a really terse syntax for adding server side variables and conditional and looping logic without disrupting the markup structure of the view.

When it comes to creating views for Html forms the MVC Contrib project provides a strongly typed, fluent syntax for writing out Html input elements for your view model in the MvcContrib.FluentHtml library. This removes a lot of the “magic strings” that are found in lot of the MVC examples, and the fluent syntax gives you a convention based approach for the naming of your elements.

Both these projects remove some of the concerns that were first voiced around MVC – that of “magic strings” and “tag soup” in the view markup. Combining the two together however, results in really slick, terse view code that is strongly typed, convention based and still looks like view markup.

It’s really easy to tell Asp.Net MVC to use Spark as a view engine – it can be done in one line of code:

protected void Application_Start(object sender, EventArgs e)
{
    ViewEngines.Engines.Add(new SparkViewFactory());
}

For more information on configuring Spark for your project check out the official documentation.

It’s equally as easy to use FluentHtml from within Spark. I followed this great post by Tim Scott which details exactly what you need to do. I copied the SparkViewModelPage<T> base class from that post and registered it as my base Spark page type in the same way:

ViewEngines.Engines.Clear();

var settings = new SparkSettings()
    .SetPageBaseType("MyProject.Web.Views.SparkModelViewPage");

ViewEngines.Engines.Add(new SparkViewFactory(settings));

That’s pretty much all you need to do. You can now access the FluentHtml API from within the view code easily from the helper exposed through the base class.

Here’s some example view code for an Html form for a Worker entity:

<viewdata model="MyProject.Web.Controllers.Organization.WorkersController.WorkerFormViewModel" />

<form method="post">

    !{Html.AntiForgeryToken()}
    !{this.Hidden(x => x.Worker.Id)}

    <fieldset>

            <div>
                !{this.TextBox(x => x.Worker.FirstName).Label("First Name")}
                !{this.ValidationMessage(x => x.Worker.FirstName)}
            </div>

            <div>
                !{this.TextBox(x => x.Worker.LastName).Label("Last Name")}
                !{this.ValidationMessage(x => x.Worker.LastName)}
            </div>

            <div>
                !{this.TextBox(x => x.Worker.BirthDate).Label("Birth Date")}
                !{this.ValidationMessage(x => x.Worker.BirthDate)}
            </div>

            !{this.SubmitButton("Save Worker")}
            !{Html.ActionLink<WorkersController>(c => c.Index(), "Cancel")}

    </fieldset>

</form>

Which results in the following Html code being rendered:

<form method="post">

    <input name="__RequestVerificationToken" type="hidden" value="AMQm309UsoQoStclFZgUGSaLVntiux2KO0ce+92aF3hTUurSSzFi7M6Sa6QsEowT" />
    <input id="Worker_Id" name="Worker.Id" type="hidden" value="0" />

    <fieldset>

            <div>
                <label for="Worker_FirstName" id="Worker_FirstName_Label">First Name</label>
                <input id="Worker_FirstName" name="Worker.FirstName" type="text" value="" />

            </div>

            <div>
                <label for="Worker_LastName" id="Worker_LastName_Label">Last Name</label>
                <input id="Worker_LastName" name="Worker.LastName" type="text" value="" />

            </div>

            <div>
                <label for="Worker_BirthDate" id="Worker_BirthDate_Label">Birth Date</label>
                <input id="Worker_BirthDate" name="Worker.BirthDate" type="text" value="" />

            </div>

            <input id="Save_Worker" name="Save_Worker" type="submit" value="Save Worker" />
            <a href="/Organization/Workers">Cancel</a>

    </fieldset>

</form>

Hopefully this shows very quickly how you can really get slick, terse, strongly typed convention based MVC views by using Spark and FluentHtml together.