2

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?

laser
  • 1,388
  • 13
  • 14
EPApro
  • 63
  • 2
  • 8

2 Answers2

3

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>
Valera Kolupaev
  • 2,285
  • 14
  • 14
  • Thank u for ur response. To start with, I still do not understand why if using `var clientVariable = '<%=ServerVariable%>';` I do not get the value but I get that string printed as I said. I included the script src="JSfile" to the aspx file, could it be just because I have it in a JS file separated from aspx page? Moreover, I will try your solution but what seems to me is that it is not serializing the data properly (my application, dont know if still I'm missing smthg. Nm I'll tell u after trying ur code, thnx ;) – EPApro Dec 31 '13 at 01:37
  • ur code gives me this error: 'System.Web.UI.Page' does not contain a definition of 'GetSerializedServerVariable'. This is the typical error when it is missing a library or some #include, do u think we r missing smthg? – EPApro Dec 31 '13 at 01:48
  • Ooops, fixed compile error. Page.GetSerializedServerVariable() => this.GetSerializedServerVariable() – Valera Kolupaev Dec 31 '13 at 05:20
  • Yes, you are not getting that value serialized, because it is in separate JS file. Those scriplets work only inside .aspx/ascx files. – Valera Kolupaev Dec 31 '13 at 05:21
  • 1
    Thank you, I can see that all the problem was trying to use those scriptlets in a separate JS file so that the aspx file was "cleaner". I did not tried the array yet but now I actually get the value of a string variable, whereas before I coudn't. Again, thank u very much! – EPApro Jan 01 '14 at 17:09
0

can u serialize the data like this:

<% var serializer = new System.Web.Script.Serialization.JavaScriptSerializer(); %>
var doublearr = <%= serializer.Serialize(ServerVariable) %>;
Gun2sh
  • 870
  • 12
  • 22
  • So the variable serializer is defined in the Jscript or in the aspx.cs? I guess it is in the code behind but just to make clear where should each one be placed – EPApro Dec 31 '13 at 00:52