sides of march (Brian DeMarzo)

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.

	
		This content is shown when the user is logged in.
	
	
		This content is shown when the user is NOT logged in.
	

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).

ComputerSims Baseball: $!{ViewData["PageTitle"]}

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

An unexpected error has occurred

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:

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.

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.