I'm Mike Pope. I live in the Seattle area. I've been a technical writer and editor
for over 30 years. I'm interested in software, language, music, movies, books, motorcycles,
travel, and ... well, lots of stuff.

At first glance, you might thing that in WebMatrix Razor (.cshtml, .vbhtml files) you have to put all your code into the page. For example, if you sift through pages created by the Starter Site template or look at tutorials (example), you'll see the code -- including data-access code -- all in one page.

Not so. WebMatrix websites are dynamically compiled. As such, you can work with them as with ASP.NET web sites -- specifically as with Visual Studio Web site projects. In particular, you can use shared code folders, which includes the Bin and App_Code folders. You can drop assemblies (.dll files) into the Bin folder, and they're automatically part of the site. Likewise you can put source-code files into the App_Code folder, and they'll likewise automatically be part of your site. This makes it quite possible (easy, even) to componentize code for your pages.

Here's a simple example. I've been messing around with creating a new blog from scratch using .cshtml pages.[1] I'm told that for SEO, the URL of an individual entry should include keywords that are separated (only) by hyphens, like this:

http://mysite/blog/an-example-blog-entry

You see this on popular blog engines (example, example). My thinking here is that I can take the blog entry title, whatever it might be, and use that as the basis for an ID.

Since I'm a verbose sort of coder (one thing at a time), this takes me about 20 lines of code.[2] It's not a huge amount of code, but it ups the level of noise in any page that uses it. And anyway, there will be another 3 or 4 (or 12 or 15) similar little utility tasks that I'll need to accomplish before I'm done with the page. I would like the code in the page to be, as much as possible, only about manipulating the UI. So I want to componentize this task out.

As it happens, I have the Facebook helper installed (via the package manager), and I noticed that it has put code into the App_Code folder. The Facebook helper defines a Facebook.cshtml file that contains an @functions section with utility functions and various @helper sections that contain bits of markup.

For my first attempt at componentization, I therefore created a file named BlogUtility.cshtml and added the following to it:

In other words, I took utility code that I would have put in the page, wrapped it instead into a method named GetBlogIDFromTitle, and then in turned wrapped the method in an @functions section.

Update It occurs to me that I should remove any HTML in the title before creating an ID out of it. Whatever. That's not relevant to the topic here, although it adds weight to the idea of componentizing code, since that's probably another little (separate) utility function.

I was then able to use this code in any page in the site. Here's what it looks like in my BlogEntry.cshtml page:

The file name (BlogUtility.cshtml) becomes the name of the class to invoke (BlogUtility), and the class is in turn in whatever namespace is being generated for the site as a whole. The method is static because it simplifies usage and because it can be.

The BlogUtility.cshtml file doesn’t contain any @helper sections because I haven't needed any of those yet. But it could; we'll see.

Next up, I want to see about componentizing the data-access tasks in the blog. More on that when I get around to working on it.