passing variable values from c# to javascript

First of all, sorry for bringing a question that has been answered so many times, but I have tried most of the procedures mentioned and still can't get it working.

I have an ASP.NET app (server-side), and I would like to visualize some results by using WebGL (JavaScript, client-side). I am able to create the canvas in aspx file and to draw a 3D object (a cube) by writing ALL the necessary JS code in a jscript file (As long as I know what I want to draw in advance, and writing all that in Jscript). However, my intention is to write a different object depending on my server-side code. When I click a visualize button, a postback is triggered. In the server some code is executed, and some coordinates are returned in an array, defined global in the aspx.cs file. I would need to pass that array of node coordinates from the server to the JS file in order to draw actually the object I want.

Here is basically what I have tried:

The easiest way I have found to pass a variable is to declare a property public in aspx.cs (c# code) and then in JS writing: var clientVariable = '<%=ServerVariable%>';

I have tried this not with an array, but just with a string variable and if writing: alert(clientVariable); I see "<%=ServerVariable%>" in the window, NOT the actual value. I don´t know if I need any additional library or what. If I can't even get this easy example working, I don't know how I would even do it with a double array. I´m using MCVS08, ASP.NET 3.5 with HTML5.

Apart from that, I have tried to convert the array not with JSON, but with: Page.ClientScript.RegisterArrayDeclaration();
I've used ClientScript.RegisterStartupScript(GetType(), "alert", "test2('" + A + "');", true);
I've tried to use a hidden block to store the session value, etc.

So basically, summing Up, I would like to have:

server-side: after executing a function of the code behind in the server, when rendering the page again I will have a global variable in aspx.cs which is a double[,] coordinates, containing the coordinates of nodes that will define the 3D object.
aspx: in html (not asp.net) I have a canvas tag in which I intend to have the visualization. The script that will render the image client-side is stored in a JScript file. In this file, inside a function I have a variable var vertices = []; which I need to feed with the values I got from the server in coordinates array. I don't know how to achieve this the best way. Would you recommend to use AJAX?

Any suggestion/comment would be very appreciated. As the dummy example with a simple string is not working (forgetting about canvas, webGL and all that stuff), may I need anything else or am I misunderstanding how to do it properly?

When I need to pass variables into JavaScript I usually I prefer var clientVariable = '<%=ServerVariable%>'; solution. This method is sufficient for small number of scalar variables. If you need to pass a complex object or a array, consider to use JavaScriptSerizlizer.

The behavior you are having it might happen for number of reasons. One of them might occur, if you have included a scriptlet into .js file, and not into .aspx file.

Here is how I would do this:

webgl-draw-file.js:

window.WebGlDraw = function(points /* point array */)
{
  // Draw points here
}

Page1.aspx.cs:

public string GetSerializedServerVariable()
{
    new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(ServerVariable);    
}

Page1.aspx:

<html>
<header>
    <script src="webgl-draw-file.js"/>
    <script type=text/javascript>
        window.WebGlDraw(<%=this.GetSerializedServerVariable()%>);
    </script>
</header>
<body>
...
</body>
</html>

To understand a better what values are passed to the JS function, take a look at a page source using your browser. You should see a JSON representation of your array instead of <%=Page.GetSerializedServerVariable()%> scriptlet.

It should look something like this:

<html>
<header>
    <script src="webgl-draw-file.js"/>
    <script type=text/javascript>
        window.WebGlDraw([{x:1, y:2}, {x:1, y:2}, {x:1, y:2}, {x:1, y:2}]);
    </script>
</header>
<body>
...
</body>
</html>

can u serialize the data like this:

<% var serializer = new System.Web.Script.Serialization.JavaScriptSerializer(); %>
var doublearr = <%= serializer.Serialize(ServerVariable) %>;

来源：https://stackoverflow.com/questions/20849272/passing-variable-values-from-c-sharp-to-javascript

标签

javascript

ASP.NET

arrays

parameter-passing