I have read quite a few threads but I cannot figure out why this will not work. I am creating a SharePoint Web Part that will serve as a navigation bar. Everything works great until I try and reference a C# Variable in the JS Code.

Here is my C# from the VisualWebPart1UserControl.ascx.cs:

    public class myClass
    {

        public string theValue = "hi";


    }

Here is the HTML/JS from the VisualWebPart1UserControl.ascx Page:

    <script type="text/javascript">
function getMyValue() {

    var myVar = "<%= myClass.theValue %>";

    alert(myVar);
}

<li><a href="http://maindt" 
    onmouseover="getMyValue(), mopen('m1')"
    onmouseout="mclosetime()">MAINDT Home</a>
    <div id="m1" 
        onmouseover="mcancelclosetime()"
        onmouseout="mclosetime()">
    <a href="">Site 1</a>
    <a href="">Site 2</a>
    <a href="">Site 3</a>
    </div>
</li>

What happens is when I hover my mouse over the "MaindDT Home" drop down, I get the alert(myVar) which is good but the content is <%=myClass.theValue%> when I'm expecting it to display the value of theValue which is "Hi"

I have read quite a few threads but I cannot figure out why this will not work. I am creating a SharePoint Web Part that will serve as a navigation bar. Everything works great until I try and reference a C# Variable in the JS Code.

Here is my C# from the VisualWebPart1UserControl.ascx.cs:

    public class myClass
    {

        public string theValue = "hi";


    }

Here is the HTML/JS from the VisualWebPart1UserControl.ascx Page:

    <script type="text/javascript">
function getMyValue() {

    var myVar = "<%= myClass.theValue %>";

    alert(myVar);
}

<li><a href="http://maindt" 
    onmouseover="getMyValue(), mopen('m1')"
    onmouseout="mclosetime()">MAINDT Home</a>
    <div id="m1" 
        onmouseover="mcancelclosetime()"
        onmouseout="mclosetime()">
    <a href="">Site 1</a>
    <a href="">Site 2</a>
    <a href="">Site 3</a>
    </div>
</li>

What happens is when I hover my mouse over the "MaindDT Home" drop down, I get the alert(myVar) which is good but the content is <%=myClass.theValue%> when I'm expecting it to display the value of theValue which is "Hi"

• c#
• javascript
• html
• function
• var

5 Answers 5

The thing is - if you try to store/access your variable in a separate js file - you simply can't; the aspx parser isn't running over js/css files.

Here's how I'd do it:

Your separate javascript file should look like this:

   // added a few parameters (id should be something like 'm1')
   function getMyValue(id, value)
   {
       alert(value); 
   }

And your ascx file should contain this:

<!-- add a reference to the js file -->
<script type="text/javascript" src="myJavascriptFile.js"></script>

<%
    // in order for this to work:
    // it requires a field/property of type myClass within your page or theValue should be a static  property/field of myClass 

    // create an instance of myClass (or get it another way...)
    var myClassInstance = new myClass();

    // create a simple reference to the value you want (not required - but makes it a bit more readable)
    var myValue = myClassInstance.theValue;

    // I'm injecting myValue as a parameter for the javascript function (this gets printed as a string - so make sure you encode it properly)
%>      
<li><a href="http://maindt" 
    onmouseover="getMyValue('m1', '<%: myValue %>'); mopen('m1');"
    onmouseout="mclosetime()">MAINDT Home</a>
    <div id="m1" 
        onmouseover="mcancelclosetime()"
        onmouseout="mclosetime()">
    <a href="">Site 1</a>
    <a href="">Site 2</a>
    <a href="">Site 3</a>
    </div>
</li>

A bit late, but I hope this helps!

Here example:

VisualWebPart1UserControl.ascx

 <script>
     function getMyValue() {
           var myVar = <%=new JavaScriptSerializer().Serialize(this.theValue) %>';
           alert(myVar); 
     }
 </script>
 <li><a href="http://maindt" 
        onmouseover="getMyValue('m1'), mopen('m1')"
        onmouseout="mclosetime()">MAINDT Home</a>
        <div id="m1" 
            onmouseover="mcancelclosetime()"
            onmouseout="mclosetime()">
               <a href="">Site 1</a>
               <a href="">Site 2</a>
               <a href="">Site 3</a>
        </div>
 </li>

Note, JavaScriptSerializer is used to correctly escape data to javascript. this also allow safely to pass nulls, numbers booleans, string with (". ', \n) symbols or objects. As alternative, you can use other json serializer.

If your data do not require escaping, just you can write just '<%=this.theValue %>'

VisualWebPart1UserControl.ascx.cs:

public class VisualWebPart1UserControl: WebControl
{
    public string theValue = "hi"; 
}

<%= and <#= expression work in *.ascx and *.aspx files - because they generated dynamically. .js, .html, .css files are static, as result expressions will not work. As expression you can written on C#, where 'this' - instance of VisualWebPart1UserControl class. Visual Studio intellisense will guide you.

Your getMyValue() should be inlined with the asp/aspx page. And you have to make myClass.theValue static to access it directly.

I prefer using HttpUtility.JavaScriptStringEncode

Make sure your javascript resides inline in the ascx file.

In the VisualWebPart1UserControl.ascx.cs right under the class declaration you need to declare a variable like so:

protected MyClassInstance = new myClass();

This creates an instance of your class that, thanks to the accessor keyword "protected" can be read/accessed by your ascx page.