将变量值从c#传递给javascript

时间:2013-12-30 23:23:34

标签: javascript asp.net arrays parameter-passing

首先,很抱歉提出一个已经回答了很多次的问题,但我已经尝试了大部分提到的程序,但仍然无法使其正常工作。

我有一个ASP.NET应用程序(服务器端),我想通过使用WebGL(JavaScript,客户端)可视化一些结果。我能够在aspx文件中创建画布并通过在jscript文件中编写所有必需的JS代码来绘制3D对象(一个多维数据集)(只要我知道我想要提前绘制的内容,并将所有内容写入的Jscript)。但是,我的目的是根据我的服务器端代码编写不同的对象。单击可视化按钮时,会触发回发。在服务器中执行一些代码,并在一个数组中返回一些坐标,在aspx.cs文件中定义为全局。我需要将该节点坐标数组从服务器传递到JS文件,以便实际绘制我想要的对象。

这基本上是我尝试过的:

  • 我发现传递变量的最简单方法是在aspx.cs(c#代码)中声明属性public然后在JS编写中: var clientVariable = '<%=ServerVariable%>';

我试过这个不是用数组,而只是用一个字符串变量,如果写:     alert(clientVariable); 我看到“&lt;%= ServerVariable%&gt;”在窗口中,而不是实际值。我不知道我是否需要任何额外的库或什么。如果我甚至不能让这个简单的例子工作,我不知道我怎么会用双数组做。我正在使用MCVS08,ASP.NET 3.5和HTML5。

  • 除此之外,我尝试过不使用JSON转换数组,但是:  Page.ClientScript.RegisterArrayDeclaration();

  • 我使用了ClientScript.RegisterStartupScript(GetType(), "alert", "test2('" + A + "');", true);

  • 我尝试使用隐藏块来存储会话值等。

所以基本上,总结起来,我想:

  • 服务器端:执行服务器后面的代码函数后,再次渲染页面时,我将在aspx.cs中有一个全局变量,它是一个双[,]坐标,包含坐标将定义3D对象的节点。

  • aspx:在html(不是asp.net)中我有一个canvas标签,我打算在其中进行可视化。将呈现图像客户端的脚本存储在JScript文件中。在这个文件中,在函数内部我有一个变量var vertices = [];我需要用坐标数组中从服务器获得的值来提供。我不知道如何实现这个最好的方法。你会建议使用AJAX吗?

任何建议/评论都将非常感谢。由于简单字符串的虚拟示例不起作用(忘记画布,webGL和所有这些东西),我可能还需要其他任何东西,或者我是否误解了如何正确地完成它?

2 个答案:

答案 0 :(得分:3)

当我需要将变量传递给JavaScript时,我通常更喜欢var clientVariable = '<%=ServerVariable%>';解决方案。该方法足以用于少量标量变量。如果需要传递复杂对象或数组,请考虑使用JavaScriptSerizlizer

您遇到的行为可能会因多种原因而发生。如果您将scriptlet包含在.js文件中,而不是.aspx文件中,则可能会出现其中一个。

我将如何做到这一点:

webgl的拉制-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>

要更好地了解传递给JS函数的值,请使用浏览器查看页面源。您应该看到数组的JSON表示而不是<%=Page.GetSerializedServerVariable()%> scriptlet。

看起来应该是这样的:

<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>

答案 1 :(得分:0)

可以像这样序列化数据:

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