将 C# 变量值传递给在代码隐藏类中生成的脚本中的 JavaScript 变量

Question

我正在尝试创建一个 Asp.net 应用程序，该应用程序显示SQL数据库中数据的Google图表。现在，我只是尝试将 C# int 变量的值传递给 JavaScript 变量。其余的我稍后会弄清楚。

我创建了 C# 变量： 公共 int timcs = 40;

我尝试创建 JavaScript 变量并将其显示在警报框中： var timjs = '<%=timcs %>'; 警报(TIMJS(;

生成的警报框只显示 <%=timcs %>。

如果我做 var timjs = <%=timcs %>;(没有引号(它根本不起作用。

我已经尝试了许多不同的方法，但它永远不会奏效。我做错了什么？所有代码都遵循。

谢谢。

using System;
using System.Web.UI;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;
using System.Text;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI.WebControls;

namespace TheBIGContest
{
public partial class _Default : System.Web.UI.Page
{
public int timsc = 40;
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
// Bind Gridview  
BindGvData();
// Bind Charts  
BindChart();
}
}
private void BindGvData()
{
gvData.DataSource = GetChartData();
gvData.DataBind();
}
private void BindChart()
{
DataTable dsChartData = new DataTable();
StringBuilder strScript = new StringBuilder();
try
{
dsChartData = GetChartData();
strScript.Append(@"<script type='text/javascript'>  
// Load the Visualization API and the corechart package.
google.charts.load('current', { 'packages': ['corechart'] });</script>
<script type='text/javascript'>
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
var timjs = '<%=timcs %>';
alert(timjs);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Person');
data.addColumn('number', 'Points');
data.addRows([ ['Tim', 10], ['Barb', 20], ['Lee Ann', 30] ]);");
//Set chart options
strScript.Append("var options = {'title':'Points to Date', chartArea: { left: 43, top: 50, width: '80 %', height: '80%' }, backgroundColor: 'fff', 'width': 610, 'height':450, 'vAxis': { minValue: 0, ticks: [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50]}, 'legend':'none'};");
// Instantiate and draw our chart, passing in some options.
strScript.Append("var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); chart.draw(data, options); }");
strScript.Append("</script>");
ltScripts.Text = strScript.ToString();
}
catch
{
}
finally
{
dsChartData.Dispose();
strScript.Clear();
}
}
/// <summary>  
/// fetch data from mdf file saved in app_data  
/// </summary>  
/// <returns>DataTable</returns>  
private DataTable GetChartData()
{
DataSet dsData = new DataSet();
try
{
SqlConnection sqlCon = new SqlConnection(ConfigurationManager.ConnectionStrings["connectionString"].ConnectionString);
SqlDataAdapter sqlCmd = new SqlDataAdapter("GetData", sqlCon);
sqlCmd.SelectCommand.CommandType = CommandType.StoredProcedure;
sqlCon.Open();
sqlCmd.Fill(dsData);
sqlCon.Close();
}
catch
{
throw;
}
return dsData.Tables[0];
}
}
}

Answer 1

在这种情况下，输出标记 <%= %> 无关紧要，因为您是从代码隐藏类而不是实际的 aspx 页生成的客户端代码。

更改为

var timjs = " + timcs + @";  ...

它会起作用的。

Answer 2

是因为您使用的是文字字符串，因此它不执行服务器端代码。我会先将变量附加到单独的 .不带文本 (@( 的追加方法。您可以考虑使用内插和文字字符串组合($@(，但您可能需要转义一些括号等。

private void BindChart()
{
DataTable dsChartData = new DataTable();
StringBuilder strScript = new StringBuilder();
try
{
dsChartData = GetChartData();
strScript.Append(@"<script type='text/javascript'>  
// Load the Visualization API and the corechart package.
google.charts.load('current', { 'packages': ['corechart'] });</script>
<script type='text/javascript'>
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart); ");
strScript.Append($"var timjs = {timsc};");
strScript.Append(@"
alert(timjs);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Person');
data.addColumn('number', 'Points');
data.addRows([ ['Tim', 10], ['Barb', 20], ['Lee Ann', 30] ]);");
//Set chart options
strScript.Append("var options = {'title':'Points to Date', chartArea: { left: 43, top: 50, width: '80 %', height: '80%' }, backgroundColor: 'fff', 'width': 610, 'height':450, 'vAxis': { minValue: 0, ticks: [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50]}, 'legend':'none'};");
// Instantiate and draw our chart, passing in some options.
strScript.Append("var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); chart.draw(data, options); }");
strScript.Append("</script>");
ltScripts.Text = strScript.ToString();
}
catch
{
}
finally
{
dsChartData.Dispose();
strScript.Clear();
}
}