Using MonoRail ViewComponents with the Spark view engine

brian — Mon, 02 Feb 2009 05:26:13 +0000

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.

Google AdSense ViewComponent for MonoRail

brian — Fri, 06 Jun 2008 02:05:21 +0000

Like many, I use Google AdSense to host ads on my web sites. Including the ad code typically requires you to paste a block a block of JavaScript onto the page. I don’t mind injecting the JavaScript, but I wanted to come up with a better way.

The solution I came up with was a quick MonoRail ViewComponent, AdUnit. It has a simple purpose: to render a block of code for an ad unit of a given size.

The first task was to create an enum which represented all the possible ad unit sizes, based on what’s offered by Google.


/// <summary>
/// A typical ad unit size, using standards defined by Google.
/// </summary>
public enum AdUnitSize
{
/// <summary>
/// 728x90
/// </summary>
Leaderboard = 1,
/// <summary>
/// 468x60
/// </summary>
Banner = 2,
/// <summary>
/// 234x60
/// </summary>
HalfBanner = 3,
/// <summary>
/// 125x125
/// </summary>
Button = 4,
/// <summary>
/// 120x600
/// </summary>
Skyscraper = 5,
/// <summary>
/// 160x600
/// </summary>
WideSkyscraper = 6,
/// <summary>
/// 180x150
/// </summary>
SmallRectangle = 7,
/// <summary>
/// 120x240
/// </summary>
VerticalBanner = 8,
/// <summary>
/// 200x200
/// </summary>
SmallSquare = 9,
/// <summary>
/// 250x250
/// </summary>
Square = 10,
/// <summary>
/// 300x250
/// </summary>
MediumRectangle = 11,
/// <summary>
/// 336x280
/// </summary>
LargeRectangle = 12
}

With that, I now can write the AdUnitComponent.


/// <summary>
/// Displays an ad unit of a given size.
/// </summary>
[ViewComponentDetails("AdUnit")]
public class AdUnitComponent : ViewComponent
{
private string _adUnitCode;
private bool _renderView;

/// <summary>
/// The HTML ID of the form element to set focus to.
/// </summary>
[ViewComponentParam(Required = true)]
public virtual AdUnitSize Size { get; set; }

/// <summary>
/// Initializes the view component.
/// </summary>
public override void Initialize()
{
_adUnitCode = WebConfigurationManager.AppSettings["AdUnit_" + this.Size.ToString()];
_renderView = !String.IsNullOrEmpty(_adUnitCode);
}

/// <summary>
/// Renders the view component, injecting HTML into the web page.
/// </summary>
public override void Render()
{
if (_renderView)
{
RenderText(_adUnitCode);
}
CancelView();
}
}

The most important code takes place in the Initialize method. It’s in that method where we retrieve the ad code from the web.config file. Simply add an entry to your section with the name AdUnit_AdUnitSize. An example follows.


<appSettings>
<!-- ad units -->
<add key="AdUnit_MediumRectangle" value="
<script type="text/javascript"><!--
google_ad_client = "pub-4509135091166921";
google_ad_slot = "2912665903";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
" />
<add key="AdUnit_WideSkyscraper" value="
<script type="text/javascript"><!--
google_ad_client = "pub-4509135091166921";
google_ad_slot = "3455950222";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
" />
</appSettings>

You don’t have to use Google AdSense code — you can actually use this ViewComponent to inject any HTML into a page.

Last thing — how do you call the AdUnitComponent from your view? If using NVelocity…


#component(AdUnit with "Size=WideSkyscraper")

That would render the text specified in the value field of the AdUnit_WideSkyscraper key in your configuration file’s appSettings.

sides of march » ViewComponent

Using MonoRail ViewComponents with the Spark view engine

Google AdSense ViewComponent for MonoRail