muonlab » 2011 » September

random .NET and web development musings

I’ve used two approaches to “embedding” the ascx views, one thats quite simple, and one thats a bit more complicated and needs quite a lot of explanation as to why I’m doing it that way.

The easiest way to do it is to embed the ascx file, and access it with a Custom VirtualPathProvider.

This approach however suffers several drawbacks.

The first problem comes at dev time. You have to rebuild every time you change the ascx. This might not be a problem for you, but in large projects it can add several seconds delay to every change you make, which for someone whos trying to be productive, can be very annoying.

The easiest solution to this is to modify the custom VirtualPathProvider above so that it is aware whether it is in dev or production mode. I do this with the debug attribute in the web config:

public bool AreInDevMode
{
	get
	{
		var section = ConfigurationManager.GetSection("system.web/compilation") as CompilationSection;
		return section.Debug;
	}
}

Then, when you’re in dev mode, check the file system before checking for the embedded resource. This will perhaps involve some path hackery, but generally I’m ok with this because the path conventions in my projects are consistent.

The second problem with this method is that the view is essentially embedded as a string, the text that makes up the view ascx. This means the view has to be compiled at runtime. This has two issues:

a) its slow, especially when you have many views
b) you dont get build time compilation error checking.

So how do we solve this?

To compile the views, you need the ASP.NET Precompilation tool.

This will create a separate assembly for each compiled view. This is messy, so we can merge them together using the ASP.NET Merge tool.

Getting better, but you still have two assemblies, your main project code and the one with the views in. ILMerge to the rescue. However, before we do that I want to sort out the compiled view types.

If you open a precompiled view dll in reflector, you’ll find its rather messy and things aren’t named very nicely. For example, say your project has the following views:

/Plugins/PluginA/View-A.ascx
/Plugins/PluginB/View.ascx

You’ll end up with the following types:

plugins_plugina_view_a_ascx
plugins_pluginb_view_ascx

So, what I wan’t to do is put them back into the correct namespace. Unfortunately, because certain characters that are allowed in file paths are not allowed in namespaces, these chars get converted to underscores and you therefore can’t work out the namespace you need from the compiled type name alone. (e.g. you dont know if “path_to_some_view_ascx” was originally “path/to/some/view.ascx” or “path/to-some.view.ascx“)

Therefore I iterate over the file system and look for any .ascx, .aspx and .master files, turn their paths into their corresponding type names. I then have a lookup table of the type name and its original path.

THEN I can use Mono.Cecil to alter the type names.

so for the file:

/Plugins/PluginA/View.ascx

I calculate its type name:

plugins_plugina_view_ascx

and the name(space) I want it to have:

Plugins.PluginA.View

Do this for all the views and then I can ILMerge my two assemblies into one, nicely organised final package 😀

So how do you then get MVC to render the view?

First you need to extend WebFormsViewEngine, and override:

protected override IView CreatePartialView(ControllerContext controllerContext, string partialPath) {
    return new WebFormView(partialPath, null);
}

protected override IView CreateView(ControllerContext controllerContext, string viewPath, string masterPath) {
    return new WebFormView(viewPath, masterPath);
}

So that it returns a custom View, which extends WebFormView and overrides Render:

public virtual void Render(ViewContext viewContext, TextWriter writer)

so that instead of creating the view using the BuildManager, it simply instantiates the type you worked out above.

If you followed any of that, well done!

In this series of posts I’m going to describe the techniques I use for supporting a plugin architecture in ASP.NET MVC.

What do I mean by plugin? Well, without going into the specific details of the system I’ve developed this for (it isnt important), a “plugin” is simply a bit of UI functionality I want to encapsulate into a package that I can reuse. These plugins typically include some codebehind, a view (ascx), some javascript and some css.

A typical plugin will look like this:

/plugins/exampleplugin/exampleplugin.cs
/plugins/exampleplugin/exampleplugin.css
/plugins/exampleplugin/exampleplugin.js
/plugins/exampleplugin/exampleplugin.ascx

When using a plugin, I want to just drop a dll in the bin (or reference it, whatever). I don’t want to have to manually add a script tag for the js, or a link for the css, or put the ascx in some views folder. I want everything to be included in a single file, and for everything to just work ™.

To achieve this I use several techniques:

  • Embed the css and javascript into the assembly as resources
  • Precompile the view into the assembly
  • Use a custom virtual path provider to make debug easier, and find the files at runtime.

These posts won’t go in to exact detail about how everything works and is wired together in my system (again, it isnt important and would only obscure the details). This isn’t a tutorial on how to build a plugin framework (that may be a future series of posts), but hopefully it will give you a few tips and tricks to try things out yourself.
There’s lots of bits I’ll gloss over, like optimisation :)

In this post I’ll cover embedding the css and js.

Embedding JS and CSS

Set the Build Action of the files (css, js) to “Embedded Resource” to embed them.

To get the files out of the assembly as string, you’ll need some code that looks like this:

static string GetResource(string key)
{
    var stream = this.GetType().Assembly.GetManifestResourceStream(key);
    using (var streamReader = new StreamReader(stream))
        return streamReader.ReadToEnd();
}

One thing to note is the naming rules that apply when you embed a file. Namespace sections that begin with a number get the number prefixed with an underscores, slashes get converted to dots and dashes to underscores. For example:

/assets/css/960-grid.css
becomes
.assets.css._960_grid.css

You’ll probably want some function that looks like this:

static string GetKey(string name)
{
    // folders beginning with a number have an _ prepended.
    name = Regex.Replace(name, @"/([0-9])", "/_$1");
    // turn / to . and - to _
    return name.Replace('/', '.').Replace('-', '_');
}

OK so that’s how we can get the css and js data out of the assembly, but then what to do with it?

Well, you’re probably going to have multiple plugins on a page, so you will have multiple css and js to include and you’ll want to bunch all this together. If you have some underlying plugin awareness mechanism, you could just pull the files you need:

var scripts = new StringBuilder();
var styles = new StringBuilder();
foreach (var plugin in page.Plugins)
{
    var key = plugin.GetType().FullName;
    key = GetKey(key);
    scripts.Append(GetResource(key + ".js"));
    styles.Append(GetResource(key + ".css"));
}

OR you could just get all the files in some “namespace”:

var scripts = new StringBuilder();
var styles = new StringBuilder();
var names = this.GetType().Assembly.GetManifestResourceNames();
foreach (var name in names)
{
    if(!name.StartsWith(".Plugins"))
        continue;
    
    if(name.EndsWith(".js"))
        scripts.Append(GetResource(name));
    else if(name.EndsWith(".css"))
        styles.Append(GetResource(name));
}

And there you go, you can then render these two strings into your page in a script and style tag :)

Some other ideas / Variations

If you don’t want to render the css and js directly into the page, you could use a script tag with a src pointing at a fake file. The fake file could be mapped to an IHttpHandler in the Web.config, or use an MVC route to a controller action.

For example, route: /assets/scripts/plugins.js to some code that does something similar to the above.