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.