Razor bug: Javascript inside of a @section

Consider the following block of code in a Razor view:

@section HeaderContent {
	<script type="text/javascript">
		$(function () {
			for (var x = 0; x <= 5; x++) {
				// blah
			}
			$(".rate div").click(function () {
				// blah
			});
		});
	</script>
}

The <= causes the last closing brace inside of the script block to close the section. Change it to a just =, it's fine. Change it to <, and the block doesn't close at all.

Re: Razor bug: Javascript inside of a @section

I copied your code in a page of one of my projects...and it works! try to insert it into a fresh new project,...you will see that it works. Probably there is some other error in the page that causes this behaviour

Re: Razor bug: Javascript inside of a @section

That may be true (I didn't supply the layout page, obviously), but that doesn't make it less broken.

Re: Razor bug: Javascript inside of a @section

It keeps getting more weird. If I add another line at the end of the above function, like this:

MyNamespace.MyFunction(i, id[0], id[1]);

I actually need another closing brace for the section, which ends up rendering a brace in the markup, which is also not desirable. Looks like I'm not the only one to see this:

http://stackoverflow.com/questions/9366169/mvc4-razor-confused-about-braces

Re: Razor bug: Javascript inside of a @section

please prepare a project with just 2 pages the Layout page and the page using the section...with no other code ...just the one needed to cause the issue to appear and send it to me. You can use the contact form of my blog.

Re: Razor bug: Javascript inside of a @section

Are you with Microsoft?

Re: Razor bug: Javascript inside of a @section

Jeff
Are you with Microsoft?

However, this is the minimum to do before submitting a bug report to Microsoft, I read the discussion on StackOverflow...but strangely this proble never happened to me. So I "suspect" it just takes place if there is some "pervious small error". That is there is something that Razor "tolerate" but that eventually may cause problems in some circumstances.

Re: Razor bug: Javascript inside of a @section

I worked for Microsoft, and I have a repro solution. I asked a friend on the MVC team where to submit to, and he suggested posting it here and on SO.

Re: Razor bug: Javascript inside of a @section

Does you repro solution....is very simply and just contains the section definition in the Layoiut page and the script causing the problem?

Or does your solution contains also other stuffs?

Re: Razor bug: Javascript inside of a @section

Similar error occurred when I converted an MVC3 project to MVC4 Developer preview.

It was also a javascript block inside an @section. The opening brace of the @section got closed by a closing brace inside the javascript block inside the @section.

Must be a bug in Razor2 since it was working fine in MVC3.

The work around I implemented was to move the script from the @section to the main section.

Re: Razor bug: Javascript inside of a @section

Jeff
Jeff

Yes, That is a bug.

Re: Razor bug: Javascript inside of a @section

Jeff

Consider the following block of code in a Razor view:
@section HeaderContent {
	<script type="text/javascript">
		$(function () {
			for (var x = 0; x <= 5; x++) {
				// blah
			}
			$(".rate div").click(function () {
				// blah
			});
		});
	</script>
}
The <= causes the last closing brace inside of the script block to close the section. Change it to a just =, it's fine. Change it to <, and the block doesn't close at all.

An ugly workaround of this may be to add > sign(note I added 2 > 1 &&), like,

@section HeaderContent {
        <script type="text/javascript">
                $(function () {
                    for (var x = 0; x <= 5 && 2 > 1 ; x++) {
                                // blah
                        }
                        $(".rate div").click(function () {
                                // blah
                        });
                });
        </script>
}

or rewrite the < sign as > sign, like,

@section HeaderContent {
        <script type="text/javascript">
                $(function () {
                    for (var x = 0; 5 >= x; x++) {
                        // blah
                    }
                        $(".rate div").click(function () {
                                // blah
                        });
                });
        </script>

Re: Razor bug: Javascript inside of a @section

I found a less annoying work around when I came across the same issue. Leave the script inside the section, just wrap it in a razor explicti <text> block like this:

@section HeaderContent {
  @if(true){
  <text>
        <script type="text/javascript">
                $(function () {
                        for (var x = 0; x <= 5; x++) {
                                // blah
                        }
                        $(".rate div").click(function () {
                                // blah
                        });
                });
        </script>
  </text>
  }
}

It is still ugly, but it doesn't require you to move the script out of the section, or alter the javascript itself.

Re: Razor bug: Javascript inside of a @section

They fixed it in the repo on CodePlex already after I filed a bug there. If you build latest, it'll work as expected.