JavaScript ASP.NET隐藏字段从后端代码获取值

Question

我正在尝试将我的代码集成到Google Chart API中。我希望能够从后端代码手动设置Google图表的标题和轴列名称。我尝试了以下代码，但没有成功。是否有任何建议？

ASPX文件

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1", { "packages": ["corechart"] });
        function drawProgrammingChart() {
            var data = new google.visualization.DataTable(operationdetails, 0.5);
            var chart = new google.visualization.LineChart(document.getElementById("divprog"));
            **var xAxis = document.getElementById("txtXAxisName");**
            **console.log(xAxis);**
            var yAxis = document.getElementById("txtYAxisName");
            chart.draw(data, {
                title: "Visualization Satisfaction", hAxis: { title: "Programming method" }, vAxis: { title: "Units" }
            });
        }
        google.setOnLoadCallback(drawProgrammingChart);
    </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <div id="divprog" style="width: 750px; height: 350px;">
        </div>
    <asp:HiddenField ID="txtXAxisName" runat="server" />
    <asp:HiddenField ID="txtYAxisName" runat="server" />
</asp:Content>

在代码后端，我想手动设置隐藏字段的值。

protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                DataTable dt = generateDataTable();
                **txtXAxisName.Value = "Days";**
                txtYAxisName.Value = "Duration";
                LoadChart(dt, "operationdetails");    
            }

        }
private void LoadChart(DataTable table, string jsName)
        {
            Page.ClientScript.RegisterStartupScript(
                this.GetType(),
                jsName, string.Format("var {0} = {1};", jsName, new Bortosky.Google.Visualization.GoogleDataTable(table).GetJson()), true);
        }

获取元素txtAxisName时，它返回null。

- NeoMatrix

Answer 1

要获取控件的渲染ID，您需要使用<%=txtYAxisName.ClientID%>，在您的代码中，它将是这样的：

var xAxis = document.getElementById("<%=txtXAxisName.ClientID%>");

但是要实际获取它的值，您需要使用.value属性。

var xAxis = document.getElementById("<%=txtXAxisName.ClientID%>").value;

但是如果你实际上不需要更改，也不需要在回传时使用这个隐藏字段，你可以直接编写代码：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1", { "packages": ["corechart"] });
        function drawProgrammingChart() {
            var data = new google.visualization.DataTable(operationdetails, 0.5);
            var chart = new google.visualization.LineChart(document.getElementById("divprog"));
            var xAxis = <asp:Literal runat="server" id="txtXAxisName" EnableViewState="False" />
            var yAxis = <asp:Literal runat="server" id="txtYAxisName" EnableViewState="False" />
            chart.draw(data, {
                title: "Visualization Satisfaction", hAxis: { title: "Programming method" }, vAxis: { title: "Units" }
            });
        }
        google.setOnLoadCallback(drawProgrammingChart);
    </script>
</asp:Content>

在代码后台只需

txtXAxisName.Text = "\"Days\";";
txtYAxisName.Text = "\"Duration\";";

实际上，直接在脚本内部呈现值并在页面上渲染。

- Aristos

Answer 2

var yAxis = document.getElementById('<%# txtYAxisName.ClientID %>');

- Ruben Rivero

---

最好能简单解释一下！ - gsamaras

Answer 3

您可以尝试以下操作：

var yAxis = document.getElementById('<%# txtYAxisName.ClientID %>');

- SpruceMoose

---

尝试过了，但XAxis仍然为空。var xAxis = document.getElementById('<%# txtXAxisName.ClientID %>'); console.log("XAxis:"+xAxis); - NeoMatrix

如果您查看渲染的页面源代码，您能看到客户端ID被输出了吗？如果没有，您看到的是什么？ - SpruceMoose

如果您使用数据绑定语法，如此答案中所示（<%# ...），则需要在代码后台调用Page.DataBind()。 - Joe

Answer 4

如Cal279所指出的，我查看了呈现页面的源代码并看到以下内容：

<input type="hidden" name="ctl00$MainContent$txtXAxisName" id="MainContent_txtXAxisName" value="Days" />

然后我尝试了下面的方法，它起作用了。感谢Cal279 :)

var xAxis = document.getElementById("MainContent_txtXAxisName");

- NeoMatrix