ASP.NET MVC 4 - Razor Within Javascript Function Within @Section Causes Scope Error

Question

The problem is that placing a C# variable within a JS function within a @Section produces incorrect javascript (in MVC 4 only).

In a JS function in MVC 3, everything executes as expected.

@section test {

<script type="text/javascript">
    $(function () {
        alert(@DateTime.Now);
    });
</script>
}

Take this exact same code and place it in an MVC4 app and you will get malformed JS.

The HTML on the page will actually render the following:

<script type="text/javascript">
    $(function () {
        alert(12/27/2011 11:04:04 AM);

and the html will emit

); }

Note the closing script tag is not produced.

It appears the closing curly brace in the JS function is confused the be the closing curly brace in Razor.

Note that I am also declaring a RenderSection("test",false") in my _Layout.cshtml file.

wow, this post made me found out about mvc4...

Shawn Mclean
– Shawn Mclean

2011-12-27 19:19:59 +00:00
Commented Dec 27, 2011 at 19:19 — Shawn Mclean
– Shawn Mclean, Commented Dec 27, 2011 at 19:19

Lski · Accepted Answer · 2012-01-22 12:40:19Z

4

Slightly old reply, but I was experiencing the same issue, soI have submitted a feedback report on Microsoft.Connect hopefully it should get sorted before full release.

https://connect.microsoft.com/VisualStudio/feedback/details/720079/mvc-4-javascript-in-section-issue

answered Jan 22, 2012 at 12:40

Lski

1309 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Scott Coates Over a year ago

Thanks for submitting this to Microsoft Connect.

dnlgmzddr · Accepted Answer · 2012-03-26 20:06:43Z

4

I know have been a wile since the question was asked, but you can also try something like this.

@section test {
    <script type="text/javascript">
        $(function () {
            alert(@(DateTime.Now));
        });
    </script>
}

Note the "()" after the @.

Hope this help.

answered Mar 26, 2012 at 20:06

dnlgmzddr

6481 gold badge7 silver badges25 bronze badges

Comments

David Barrows · Accepted Answer · 2012-09-07 09:43:53Z

3

Sorry, I just couldn't help but chime in here... I don't see how the syntax in the initial question would actually work. When I try it in MVC3, in VS2010, it puts a green squiggly line under the "DateTime", and when you hover over that, it says "Conditional compilation is turned off". But if I surround it in quotes, it does work, as in:

@section test {

<script type="text/javascript">
    $(function () {
        alert("@DateTime.Now");
    });
</script>
}

And then when I run it (F5) it displays the JavaScript alert as expected, and when I view source it renders:

<script type="text/javascript">
    $(function () {
        alert("07/09/2012 10:41:26");
    });
</script>

answered Sep 7, 2012 at 9:43

David Barrows

7788 silver badges20 bronze badges

Comments

Scott Coates · Accepted Answer · 2011-12-28 02:35:46Z

2

What I ended up doing for now was emitting the closing JS func in @Html.Raw().

Since this is so easy to recreate, I'm going to submit this as a bug to Microsoft.

@section test {
    <script type="text/javascript">
        $(function () {
            alert(@DateTime.Now);
        @(Html.Raw("});"))
    </script>
}

answered Dec 28, 2011 at 2:35

Scott Coates

2,5325 gold badges31 silver badges40 bronze badges

Comments

Erik Funkenbusch · Accepted Answer · 2011-12-27 21:04:03Z

1

I've seen problems like this. Wrap your alert statement in <text></text> tags

answered Dec 27, 2011 at 21:04

Erik Funkenbusch

93.7k29 gold badges201 silver badges292 bronze badges

1 Comment

Scott Coates Over a year ago

This was my initial thought. I tried it as well as the @: syntax but neither solve the scope issue.

Jason · Accepted Answer · 2012-03-27 20:23:34Z

0

Definitely a bug. I prefer this workaround over the one you posted. For some reason, other razor elements seem to interpret the brackets correctly, so I simply wrap the script content in another set of braces.

@section test {
if (true) {
<script type="text/javascript">
    $(function () {
        alert(@DateTime.Now);
    });
</script>
}
}

answered Mar 27, 2012 at 20:23

Jason

9157 silver badges18 bronze badges

Collectives™ on Stack Overflow

ASP.NET MVC 4 - Razor Within Javascript Function Within @Section Causes Scope Error

6 Answers 6

1 Comment

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related