Why can't Visual Studio collapse Javascript functions that include Razor syntax?

To expand on my comment.

You generally do not want to define functions in your Razor views. Instead, define them and import them from an external JavaScript file. If you need info from C# in JavaScript, you could create a global config object in JavaScript in a Razor partial, then render that partial.

function_lib.js

function createTeachersTab() {
    ...
        read: {
            url: config.teachers.newTabUrl
        }
    ...
}

Views/Shared/_JavaScriptConfig.cshtml

This would be rendered as a Partial in the <head> of the HTML document.

<script type="text/javascript">
    var config = {
        teachers: {
            newTabURL: '@Url.Action("Teachers", "Users")'
        }
    };
</script>

Then anywhere else in your JavaScript, you can reference these settings via the global config JavaScript variable.

config.teachers.newTabUrl

Edit: I also completely recognize that this does not solve the code collapsing problem in Visual Studio, which appears to be a parsing bug on their end. The real solution is "Don't define JavaScript functions in Razor views" as this is considered bad practice.


Also you can highlight the block and press ctrl + m, ctrl + h to collapse the block

Tags:

Javascript

Razor

Visual Studio 2013

Recent Posts