How to collapse javascript functions with <%= in Visual Studio 2012

Question

In Visual Studio 2012 when editing markup/aspx, you can apparently collapse javascript functions as long as they don't contain special server tags such as the shortcut for Response.Write <%= .

Examples:

Can collapse:

function foo() {
    var x = 0;
}

Can not collapse:

function bar() {
    var x = $find("<%= txtWhatever.ClientID %>");
}

I've noticed as soon as you add the opening tag <%= , the collapse option ( - ) to the left of the word function disappears, so I know that's the problem.

It appears to break the collapsing of the entire function regardless of size/contents.

I've tried the Web Essentials plugin as well as the Advanced Javascript outlining plugin, but neither seems to work for functions with this particular content either.

Is there any way to make functions containing these types of tags collapsible?

Thanks-

Answer 1

Only a workaround:

Wrap each function in its own script tag.

A bug has apparently been opened with the JS team about this.

Answer 2

I use the "Three Script" pattern:

Script 1

---

Page level variables.

Script 2

---

'Getter/Setter' functions that return references to server controls or get/set values.

For example:

function GetTxtUserNameVal() {
    var rtn = $('#<%= txtUsername.ClientID %>').val();
    return rtn;
}

function SetTxtUserNameVal(arg) {
    $('#<%= txtUsername.ClientID %>').val(arg);
}

function GetUserDetailsGrid() {
    return $find('<%= gridUserDetails.ClientID %>');
}

Script 3

---

Functions:

In these, I use the getter/setter functions above instead of server tags.

---

Now I can collapse the scripts and also can collapse individually all the functions in the Functions script.