The Brand New Menu.IncludeStyleBlock Property

• Posted by Shay Friedman on March 22, 2010
• 14 comments

Along with the popular new features of ASP.NET 4, some uncommon features have been added as well. One of them is the Menu control which has gone through some changes, good ones.

One of the changes to the control is the new IncludeStyleBlock property. This is a boolean value which indicates whether the control adds its CSS to the page. “Oh well…” you might say, but stop and rethink it – until now, when you used the Menu control you always had the CSS added to the page, whether you liked it or not. For example, the following is a CSS block which is added to the page when a menu with a simple format exists within it:

<style type="text/css">

/* <![CDATA[ */

#Menu1 { background-color:#FFFBD6; }

#Menu1 img.icon { border-style:none;vertical-align:middle; }

#Menu1 img.separator { border-style:none;display:block; }

#Menu1 ul { list-style:none;margin:0;padding:0;width:auto; }

#Menu1 ul.dynamic { background-color:#FFFBD6;z-index:1;margin-left:2px; }

#Menu1 a { color:#990000;font-family:Verdana;font-size:0.8em;text-decoration:none;white-space:nowrap;display:block; }

#Menu1 a.static { padding:2px 5px 2px 5px;text-decoration:none; }

#Menu1 a.popout { background-image:url("/WebResource.axd?d=HGk9oAfq1wga-jOpKNLje9tJtu3SgIdPSvUFv2UWscw1&t=634045276053254044");background-repeat:no-repeat;background-position:right center;padding-right:14px; }

#Menu1 a.dynamic { padding:2px 5px 2px 5px;text-decoration:none; }

#Menu1 a.static.selected { background-color:#FFCC66;text-decoration:none; }

#Menu1 a.dynamic.selected { background-color:#FFCC66;text-decoration:none; }

#Menu1 a.static.highlighted { color:White;background-color:#990000; }

#Menu1 a.dynamic.highlighted { color:White;background-color:#990000; }

/* ]]> */

</style>

This sucks. It isn’t cached by the browser, it increases your page size and it might become even bigger if you have some more complex styles. If this irritates you as it irritates me, the IncludeStyleBlock property is for you. Just set it to false and the above CSS disappears from the page.

However… by setting the IncludeStyleBlock property to false you remove the style completely and we don’t want that.
There are two possible solutions to this issue:

• Copy the generated CSS to a CSS file (before you set the IncludeStyleBlock to false) and add a link to the file on the page - <link href="Styles/style.css" rel="stylesheet" type="text/css" />
• Create a custom CSS class for the menu and set its name to the menu’s CssClass property.

In conclusion, the IncludeStyleBlock is a really nice enhancement to the handy Menu control. Notice that this is not the only change to the Menu control in ASP.NET 4, it also uses UL and LI elements instead of tables!
To read more about the changes in the Menu control in ASP.NET 4, look here.

And I say – hallelujah!

All the best,
Shay.