How can I use vb variable in javascript using asp.net web forms?

Question

So, this is how my program looks like

enter image description here

The VB coding behind this is

Imports WebApplication1.login
Public Class Main
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    Dim CleanRubric
    Dim XRubric
    Dim YRubric
    Dim Score = WebApplication1.login.Score
    CleanRubric = Rubric.Split(":")
    XRubric = Rubric(0)
    YRubric = Rubric(2)
    Label1.Text = "Hello! , Welcome: " & FullName & ", Here is your Report"
    Label2.Text = "Your Score: " & Score
    Label3.Text = "Notes: " & Notes
    Label4.Text = "Domain Notes: " & D_Notes
    Label5.Text = "X Rubric score is: " & XRubric
    Label6.Text = "Y Rubric score is: " & YRubric
    Label7.Text = "Does the teacher need to see you? " & UrgentChecker(Urgent)

End Sub
Function UrgentChecker(ByVal Urgent As Integer)
    If Urgent = 1 Then
        Return "Yes"
    ElseIf Urgent = 0 Then
        Return "No"
    Else
        Return "---Error--- : Please See Teacher"
    End If
End Function
End Class

Now, the html and javascript code is...

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Main.aspx.vb" Inherits="WebApplication1.Main" runat="server"%>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Results</title>
<link rel="stylesheet" type="text/css" href="theme2.css" />
<script type="text/javascript" src="http://cdn.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://cdn.amcharts.com/lib/3/gauge.js"></script>
<script type="text/javascript" src="http://cdn.amcharts.com/lib/3/themes/dark.js"></script>

<!-- amCharts javascript code -->
<script type="text/javascript">
    <!--var score = document.getElementById("<%=Label2.ClientID%>").innerHTML;-->
    AmCharts.makeChart("chartdiv",
        {
            "type": "gauge",
            "pathToImages": "amcharts/images/",
            "faceBorderAlpha": 2,
            "faceBorderWidth": 2,
            "marginBottom": 0,
            "marginTop": 40,
            "startDuration": 0,
            "color": "#E7E7E7",
            "fontSize": 9,
            "handDrawScatter": 0,
            "theme": "dark",
            "arrows": [
                {
                    "axis": "Not set",
                    "id": "GaugeArrow-1",
                    "nailAlpha": 0.44,
                    "nailBorderAlpha": 0.58,
                    "nailBorderThickness": 5,
                    "nailRadius": 30,
                    "radius": "98%",
                    "startWidth": 12,
                    "value": 2
                }
            ],
            "axes": [
                {
                    "axisThickness": 1,
                    "bottomText": "Score",
                    "bottomTextFontSize": 18,
                    "bottomTextYOffset": 25,
                    "endAngle": 112,
                    "endValue": 4,
                    "id": "GaugeAxis-1",
                    "topTextFontSize": -1,
                    "topTextYOffset": -4,
                    "valueInterval": 1,
                    "bands": [
                        {
                            "alpha": 0.7,
                            "color": "#00CC00",
                            "endValue": 1,
                            "id": "GaugeBand-1",
                            "startValue": 0
                        },
                        {
                            "alpha": 0.7,
                            "color": "#FF0000",
                            "endValue": 2,
                            "id": "GaugeBand-2",
                            "startValue": 1
                        },
                        {
                            "alpha": 0.7,
                            "color": "#0000FF",
                            "endValue": 3,
                            "id": "GaugeBand-3",
                            "startValue": 2
                        },
                        {
                            "alpha": 0.7,
                            "color": "#DAA520",
                            "endValue": 4,
                            "id": "GaugeBand-4",
                            "startValue": 3
                        }
                    ]
                }
            ],
            "allLabels": [],
            "balloon": {
                "offsetX": 12
            },
            "titles": []
        }
    );
</script>
</head>
<body>
<form id="form1" runat="server">
    <h1>
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </h1>

I want it to represent the value of the students score, I added

var score = document.getElementById("<%=Label2.ClientID%>").innerHTML; But my graph immediately disappeared like this

enter image description here

help :) (The student names are different in pictures that is fine, thats all database stuff)

PT_01 · Accepted Answer · 2015-04-05 14:21:02Z

1

var score = document.getElementById("Label2").innerText;

Edit:

ASP.NET

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    Page.ClientScript.RegisterStartupScript(Me.GetType(), Nothing, "test();", True)
End Sub

JavaScript

  <script type="text/javascript">
    var score;
    function test() {
        score = document.getElementById("Label2").innerText;
        AmCharts.makeChart("chartdiv",
    {
        "type": "gauge",
        "pathToImages": "amcharts/images/",
        "faceBorderAlpha": 2,
        "faceBorderWidth": 2,
        "marginBottom": 0,
        "marginTop": 40,
        "startDuration": 0,
        "color": "#E7E7E7",
        "fontSize": 9,
        "handDrawScatter": 0,
        "theme": "dark",
        "arrows": [
            {
                "axis": "Not set",
                "id": "GaugeArrow-1",
                "nailAlpha": 0.44,
                "nailBorderAlpha": 0.58,
                "nailBorderThickness": 5,
                "nailRadius": 30,
                "radius": "98%",
                "startWidth": 12,
                "value": 2
            }
        ],
        "axes": [
            {
                "axisThickness": 1,
                "bottomText": "Score",
                "bottomTextFontSize": 18,
                "bottomTextYOffset": 25,
                "endAngle": 112,
                "endValue": 4,
                "id": "GaugeAxis-1",
                "topTextFontSize": -1,
                "topTextYOffset": -4,
                "valueInterval": 1,
                "bands": [
                    {
                        "alpha": 0.7,
                        "color": "#00CC00",
                        "endValue": 1,
                        "id": "GaugeBand-1",
                        "startValue": 0
                    },
                    {
                        "alpha": 0.7,
                        "color": "#FF0000",
                        "endValue": 2,
                        "id": "GaugeBand-2",
                        "startValue": 1
                    },
                    {
                        "alpha": 0.7,
                        "color": "#0000FF",
                        "endValue": 3,
                        "id": "GaugeBand-3",
                        "startValue": 2
                    },
                    {
                        "alpha": 0.7,
                        "color": "#DAA520",
                        "endValue": 4,
                        "id": "GaugeBand-4",
                        "startValue": 3
                    }
                ]
            }
        ],
        "allLabels": [],
        "balloon": {
            "offsetX": 12
        },
        "titles": []
    }
);
    }
</script>

edited Apr 5, 2015 at 14:21

answered Apr 5, 2015 at 13:44

PT_01

1564 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Redder Lopez Over a year ago

Did not work, as soon as I added that line gyazo.com/81901528b58512b4ac08a05a6d487f73 Graph disappeared

PT_01 Over a year ago

Ok, make a function that contains the AmCharts.makeChart call, and call the function from Page Load event

Redder Lopez Over a year ago

What do you mean? , Can you give me example please, im new to all this.

Redder Lopez Over a year ago

The graph disappeared again

PT_01 Over a year ago

When The graph disappeared ? When you do what ?

Arindam Nayak · Accepted Answer · 2015-04-05 15:06:10Z

0

You need to create public property named Score, or change that score from Dim to Public , declare outside page_load and inside the class.

Then use that variable in aspx like this - var score = "<%=Score%>";.

Like following

Public Class Main
Inherits System.Web.UI.Page

Public Score = WebApplication1.login.Score

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    Dim CleanRubric
    Dim XRubric
    Dim YRubric

    CleanRubric = Rubric.Split(":")

edited Apr 5, 2015 at 15:06

answered Apr 5, 2015 at 14:14

Arindam Nayak

7,4924 gold badges36 silver badges51 bronze badges

4 Comments

Redder Lopez Over a year ago

Error: Public is not valid on a local variable declaration

Arindam Nayak Over a year ago

@RedderLopez, please read the instruction - declare outside page_load and inside the class.. See the updated answer..

Arindam Nayak Over a year ago

@RedderLopez, it is obvious that you are not debuging or looking at right thing to fix, instead of looking into graph, see if that value is set or not!

Arindam Nayak Over a year ago

@RedderLopez, Dim variables are not accessible in aspx , that is why I told to declare as Public and public has to be outsite of any event.

Joe Raio · Accepted Answer · 2015-04-05 14:16:24Z

0

var score = document.getElementById("<%=Label2.ClientID%>").innerHTML;

This code does work. You have to call it after the values have already been set. Have you tried moving your javascript to the bottom of the page?

answered Apr 5, 2015 at 14:16

Joe Raio

1,8051 gold badge13 silver badges17 bronze badges

1 Comment

Redder Lopez Over a year ago

Transferring my code to the bottom does not work, I just get a value of 0 gyazo.com/eadcb816a2bc8fa664e04637bf0c8387

Collectives™ on Stack Overflow

How can I use vb variable in javascript using asp.net web forms?

3 Answers 3

5 Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related