Pass value from code-behind to JavaScript

Question

Trying to pass value (abc) from code-behind to JavaScript but the page fails and doesn't load. Is there something wrong with the syntax? I've noticed that normally the <%...%> is highlighted yellow but this is not the case in my code.

<script src="../Scripts/jqModal.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $().ready(function() {    });

    $("a").click(function() {
    if (this.id == "optionalFeatures_Online") {
        var abc = "<%=Variable_codebehind %>";
    }
        });
</script>

Code Behind On_Load event:

    protected override void OnLoad(EventArgs e)
    {
        Variable_codebehind = "hello world"; 
    }

Error from logfile:

Web.HttpUnhandledException' was thrown. ---> System.Web.HttpException: The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

The syntax look all right. Have you declared the variable `Variable_codebehind` anywhere? It has to be a `protected` or `public` member in the page class, or it's not reachble from the markup. — Guffa, Oct 01 '12 at 14:15
First, there's no point in `$().ready(function() { });`. It need to wrap all you javascript to have any effect. Also you need to say what you want to wait to be ready... For example; `$(document).ready(function() { // Code here });` — smilly92, Oct 01 '12 at 14:15
You're screwed if there is a double quote in the `Variable_codebehind` contents. — Lucero, Oct 01 '12 at 14:17
What's the error. Please provide more context and what else you have tried to solve this issue. — Abhinav Gujjar, Oct 01 '12 at 14:17
Guff: I've declared the variable as: protected string Variable_codebehind; — Susan, Oct 01 '12 at 14:28
smiledge: sorry about that, I had code in there and pulled it out because it wasn't relevant to the question. — Susan, Oct 01 '12 at 14:30
I've noticed something -- normally in Visual Studio the <% %> are highlighted in yellow, but the code in the JavaScript function is not highlighted. Here is the error from the logfile: Web.HttpUnhandledException' was thrown. ---> System.Web.HttpException: The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>). — Susan, Oct 01 '12 at 16:55
Is the script block on a aspx/ascx? We'd need to see more of the code to tell if it is in the wrong place. — Mesh, Oct 02 '12 at 08:22
Is the script in the head tag? If so, you can fix the error by moving it to the body tag. According to [this](http://stackoverflow.com/questions/778952/the-controls-collection-cannot-be-modified-because-the-control-contains-code-bl), changing the <%= to <%# (databinding) or wrapping it in a placeholder tag should do the trick. — Carl Sharman, Oct 02 '12 at 09:57
The script is in the body tag. Not clear about the syntax you recommend: <%# (databinding) — Susan, Oct 02 '12 at 15:36
The databinding syntax would be 'var abc = "<%# Variable_codebehind %>";' instead of 'var abc = "<%=Variable_codebehind %>";'. Just change the '=' to a '#'. — Carl Sharman, Oct 04 '12 at 09:34

score 0 · Answer 1 · answered Oct 01 '12 at 14:16

0

first bind the value to a hidden control

then get the value from the hidden control

answered Oct 01 '12 at 14:16

Larry

2,172
2
14
20

score 0 · Answer 2 · answered Oct 01 '12 at 14:24

0

<script src="../Scripts/jqModal.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {    
        $("a").click(function() {
            if (this.id == "optionalFeatures_Online") {
                var abc = <%=Variable_codebehind %>;
            }
        });
    });
</script>

Code Behind On_Load event:

    protected override void OnLoad(EventArgs e)
    {
        Variable_codebehind = HttpUtility.JavaScriptStringEncode("hello world", true); 
    }

answered Oct 01 '12 at 14:24

Giscard Biamby

4,569
1
22
24

I'm getting red underline on JavaScriptStringEncode -- do I need a USING statement? – Susan Oct 01 '12 at 15:04
You can easily look this up: http://msdn.microsoft.com/en-us/library/dd991914(v=vs.100).aspx – Giscard Biamby Oct 01 '12 at 15:48

score 0 · Answer 3 · answered Oct 01 '12 at 14:49

You can use Page.RegisterStartupScript and pass some variables from Code-Behind. Place the script in a .js file and call it on OnLoad method from the code-behind:

OnLoad CodeBehind:

Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "MyScript", String.Format("MyScript({0});", codeBehindVar));

MyScript.js

function MyScript(myVar)
{
   var self = this;
   $("a").click(function() {
   if (this.id == "optionalFeatures_Online") {
      var abc = self.myVar;
   }
}

Pass value from code-behind to JavaScript

3 Answers3