Returns razor-processed Javascript as a ViewResult from a controller

Question

I have successfully created the mvc / razor web application that returns css files that have been parsed by a razor. Every time I have a background image, I have a razor fragment that writes the URL prefix to the image file name. CSS now looks like this:

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

Css files now work fine, and I switched to trying to get javascript.js files to work the same, but they don’t play the ball.

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

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

It seems that Razor thinks this is the code that he should compile and gives an 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 to get a razor to work with .js files in the same way as for .css?

Here's how I registered the razor file handlers:

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

The build provider is registered with PreApplicationStart using the Haacked outlines method in its blog post .

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

UPDATE 2 days on

While I was working on what I wanted to work on, I would not recommend this method to others. Using Razor to parse css / javascript is erroneous without using <text> <text /> - this is the razor simplicity using @ampersand, which messed it up. Consider the CSS3 @ font-face font. Razor gets to @ and thinks he should use it as a function. The same thing can happen with javascript, and it happened with jQuery 1.5.1.

Instead, I will probably go back to aspx webforms for dynamic css / javascript where there is less chance of <%%> code blocks appearing.

Answer 1

I could not understand why CSS worked while JS did not support it, especially after the code + JScript code with copy was copied to the CSS file.

I used the find / replace dialog in visual studio in the System.Web.WebPages.Razor source to search for the string ".js" in the project. Nothing was useful there, so I went to the System.Web.WebPages project. He found a match in System.Web.WebPages.Util, which is a static class with several helper methods.

One of these methods is "EnsureValidPageType", inside which there is a try / catch block. Inside the catch block there 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. Jj has a special built-in handler.

I searched Google a bit, could not find anything, and then looked in the web.config file, which is in \ Windows \ Microsoft.NET \ Framework64 {version} \ Config.

It has a buildProvider mapping for the .js to extension

 System.Web.Compilation.ForceCopyBuildProvider 

After removing this buildprovider on the web.config website, the .js files compile and work as they should!

I'm still not too sure what ForceCopyBuildProvider does or does, but I wonder if this is for a visual studio. Different extensions have different registered Copy / Ignore assembly providers.

Apologize again for answering my own question, but I hope a comprehensive answer (waffley) can help others.

Answer 2

You can try using a special <text> node to tell the Razor parser to process the content literally:

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

Answer 3

The Razor parser by default uses HtmlMarkupParser to process the layout components of your template. There are currently no alternative parsers that support other markup languages ​​(which you will need to handle JavaScript javascript like). If you created a new markup parser, I would suggest that it would be rather difficult to separate the code and markup (i.e. C # and Javascript).

What you can do is use the <text></text> wrap elements to force the parser switches into layout mode when this part of the template is reached, for example.

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

This is not very, but it should do the trick.