Home

Javascript inclusion

Vici MVC encourages separation of code and markup, so the same is true for Javascript. Javascript code is actually code, and not markup, so it doesn't really belong in the HTML templates. Vici MVC lets you dynamically embed Javascript in the rendered view. This can be done from controllers, controls and view components.

You can embed javascript from strings, files or embedded resources.

The following methods are available on the View object:

  • RegisterJavascript(string key, bool library, string javascript)
  • RegisterJavascriptFromResource(bool library, Assembly assembly, string resourceName)
  • RegisterJavascriptInclude(string key, bool library, string url)
  • RegisterJavascriptIncludeFromResource(bool library, Assembly assembly, string resourceName)
  • RegisterStartupJavascript(string key, string javascript);

All these methods will either insert the javascript inside a <script> tag within the <head> section of the rendered HTML, or they will generate a script include tag. Note that the url parameter for RegisterJavascriptInclude() should be rooted (it should start with "~/")

When inserting javascript from a string literal, a unique key is required. When you add javascript with the same key more than once, only the first one will have effect. This is useful if you insert javascript from a custom control. If more than one control of the same type is rendered, the javascript will only be included once.

The library flag tells Vici MVC that the javascript code is used by other pieces of javascript. What actually happens is that javascript registered with the library flag set to true will always be included first, before all javascript where the library flag is false.

Rendering javascript from embedded resources requires an assembly reference and a resource key. The resource key is generated by the compiler. The resource key is usually in the form "Namespace.Path1.Path2.FileName.ext", where the namespace is the "default namespace" as specified in the project's properties page.

The RegisterStartupJavascript() method is a special case. It will insert javascript code at the end of the rendered HTML, just before the closing </body> tag. It can be used to execute Javascript code after the page has been rendered. Beware that this may cause problems: some browsers don't support modifying the DOM when the complete HTML code hasn't been loaded yet. A better alternative is to use the domready event, which is exposed by most Javascript frameworks like jQuery, Prototype and Mootools.

When to call RegisterJavascriptXXX() methods

The answer is: it doesn't matter. Javascript is always rendered together with the view, so calling any of the Javascript registration methods will have no immediate effect. The actual rendering happens after the HTML is completely generated.

If some javascript should be included in all controllers, you can create a global base controller class and create a [BeforeAction] method. That method will be called for every controller derived from it, so the javascript code will be included in all controllers:

public class BaseController : Controller
{
    [BeforeAction]
    private void RegisterJavascriptFramework()
    {
        View.RegisterJavascriptInclude("jQuery", true, "~/JavaScript/jquery-1.2.pack.js");
    }
}

public class Controller : BaseController
{
    public void Run()
    {
	    // ...
    }
}