Although I was able to find some documentation and samples (mostly through the unit tests) of how to use a ViewComponent with the Spark view engine, details were sketchy, so I’ll share some quick tips to those who are scratching their heads as I was.

Using a block ViewComponent

Support for block view components is pretty evident in Spark, as shown in the following example, which illustrates the use of the AuthenticatedContent view component.

<authenticatedcontent>
	<logged>
		This content is shown when the user is logged in.
	</logged>
	<notlogged>
		This content is shown when the user is NOT logged in.
	</notlogged>
</authenticatedcontent>

Using the CaptureFor ViewComponent

The CaptureFor component is one useful way to allow a sub-view to “inject” data into a layout. I use this all the time to allow a rescue page to change the page title when an error occurs.

On your layout page, you inject the page title as you normally would (so a controller can inject it via the property bag).

<title>ComputerSims Baseball: $!{ViewData["PageTitle"]}</title>

In the view, the CaptureFor component is called as an HTML tag.

<capturefor id="pageTitle">An unexpected error has occurred</capturefor>

Calling a ViewComponent with view and static data

This is one that perplexed me. I have a custom menu component (called MenuComponent) which accepts a name parameter. I tried calling it like this:

<menu name="mainmenu" />

Unfortunately, that threw an error: “The name ‘mainmenu’ does not exist in the current context“. Fortunately, Spark exceptions are easy to read (you can see the C# code it generates and thus find the error). Apparently, in the above example, “mainmenu” was expected to be a variable in the view page and was not being treated as static text. To use static text, you put single quotes inside the double quotes.

<menu name="'mainmenu" />

Problem solved. I can’t say it’s the preferred way based on my experience thus far (I’d prefer requiring ${mainmenu} for variable injection), but since I’m new to this, I won’t criticize much.