Returning razor-parsed Javascript as a ViewResult

问题:

I've successfully created an mvc/razor web application that returns css files that have been parsed by razor. Each time there's a background-image I have a razor snippet that writes the URL prefix to the image file name. The CSS now looks like this:

body { background-image: url(@LookupUrl.Image("background.gif")); }

Css files now work fine and I've moved onto trying to get javascript .js files to function the same way but these aren't playing ball.

The code is identical to the css code and it successfully finds the .js file, but razor seems to parse it differently. Here's an example js file:

function testFunction() { alert('test function hit!'); }
testFunction();

Razor seems to think it's code that it should compile, and gives the error:

Compiler Error Message: JS1135: Variable 'alert' has not been declared

    > Source Error:
    > 
    > Line 1:  function testFunction() {
    > Line 2:      alert('test function
    > hit!'); Line 3:  } Line 4: 
    > testFunction();

After renaming the same file to .css it works fine.

Is there a way of getting razor to function with .js files in the same way as it does for .css?

Here's how I registered the file handlers for razor:

RazorCodeLanguage.Languages.Add("js", new CSharpRazorCodeLanguage());
RazorCodeLanguage.Languages.Add("css", new CSharpRazorCodeLanguage());

WebPageHttpHandler.RegisterExtension(".js");
WebPageHttpHandler.RegisterExtension(".css");

The build provider is registered in PreApplicationStart via the method Haacked outlines in his blog post.

Do I need to remove a handler that mvc adds for .js files?

UPDATE 2 days on

While I got working what I wanted to get working, I would not recommend this method to others. Using Razor to parse css/javascript is flawed without the use of <text><text/> - it's the simplicity of razor using the @ ampersand that messes it up. Consider the CSS3 @font-face. Razor hits the @ and thinks it should use it as a function. The same thing can happen with javascript, and happened with Jquery 1.5.1.

Instead, I'll probably go back to aspx webforms for dynamic css/javascript, where there's less chance of the <% %> code blocks appearing naturally.

回答1:

I couldn't understand why CSS worked while JS didn't, especially after the copy+pasted JS code worked inside the CSS file.

I used the find/replace dialogue within visual studio on the System.Web.WebPages.Razor source to search for the string '.js' within the project. There was nothing helpful there so I then went to the System.Web.WebPages project. It found a match in System.Web.WebPages.Util, which is a static class with a few helper methods.

One of those methods is 'EnsureValidPageType' and within there is a try/catch block. Inside the 'catch' block is a comment:

// If the path uses an extension registered with codedom, such as Foo.js,
// then an unfriendly compilation error might get thrown by the underlying compiler.
// Check if this is the case and throw a simpler error.

It made me believe .js has got some special built-in handler with it.

I googled for a bit, couldn't find anything, then looked in the web.config that's within \Windows\Microsoft.NET\Framework64{version}\Config.

In there is a buildProvider mapping for the extension .js to

System.Web.Compilation.ForceCopyBuildProvider

After removing this buildprovider in the website's web.config, .js files get compiled and work as they should!

I'm still not too sure what the ForceCopyBuildProvider does or is for but I wonder if it's for visual studio. Various extensions have different Copy/Ignore build providers registered.

Once again apologies for answering my own question but I hope the comprehensive(waffley) answer might help others out.

回答2:

You could try using the special <text> node to indicate to the Razor parser to treat the content literally:

<text>
    function testFunction() { alert('test function hit!'); }
    testFunction();
</text>

回答3:

The default Razor parser uses the HtmlMarkupParser to handle the markup components of your template. There isn't currently any alternative parsers that support other markup languages (which you would need to treat the javascript code language as). If you did create a new markup parser, I would imagine it would be quite difficult to separate the code and markup (i.e. the C# and the Javascript).

What you could do, is use the <text></text> wrapping elements to enforce the parser switches to markup mode when that section of the template is reached, e.g.

<text>function testFunction() { alert('test function hit!'); }</text>

It's not pretty, but it should do the trick.