Reference C# Variable in JavaScript

Question

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"

Andreas Prechtl · Accepted Answer · 2013-07-04 22:40:40Z

3

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!

edited Jul 4, 2013 at 22:40

answered Jul 4, 2013 at 21:01

Andreas Prechtl

1194 bronze badges

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

11 Comments

mwilson Over a year ago

Thanks! This is very helpful. I'm encountering an error and it seems to be with the line of code onmouseover="getMyValue('m1', <%: myValue %>); mopen('m1');". The error is c:\Program Files\Common Files\microsoft shared\Web Server Extensions\14\TEMPLATE\CONTROLTEMPLATES\SPListWebPart\VisualWebPart1\VisualWebPart1UserControl.ascx(27): error CS1525: Invalid expression term ':'

mwilson Over a year ago

When I change it to onmouseover="getMyValue('m1', <%= myValue %>); mopen('m1');" I get the error: c:\Program Files\Common Files\microsoft shared\Web Server Extensions\14\TEMPLATE\CONTROLTEMPLATES\SPListWebPart\VisualWebPart1\VisualWebPart1UserControl.ascx(21): error CS0246: The type or namespace name 'var' could not be found (are you missing a using directive or an assembly reference?)

Andreas Prechtl Over a year ago

Oh, if <%: myValue %> is not working try <%= Server.HtmlEncode(myValue) %>, it practically does the same - but the earlier is only available for asp.net >= 4.0

Andreas Prechtl Over a year ago

Having said that, which version of asp.net are you currently using?

Andreas Prechtl Over a year ago

let us continue this discussion in chat

|

vitrilo · Accepted Answer · 2013-07-05 04:39:48Z

2

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.

edited Jul 5, 2013 at 4:39

answered Jul 4, 2013 at 20:10

vitrilo

1,51516 silver badges20 bronze badges

7 Comments

mwilson Over a year ago

I see what you're getting at...I keep running into this error though.c:\Program Files\Common Files\microsoft shared\Web Server Extensions\14\TEMPLATE\CONTROLTEMPLATES\SPListWebPart\VisualWebPart1\VisualWebPart1UserControl.ascx(21): error CS0103: The name 'myClass' does not exist in the current context

mwilson Over a year ago

and then I use this.theValue.......c:\Program Files\Common Files\microsoft shared\Web Server Extensions\14\TEMPLATE\CONTROLTEMPLATES\SPListWebPart\VisualWebPart1\VisualWebPart1UserControl.ascx(21): error CS0117: 'ASP._controltemplates_splistwebpart_visualwebpart1_visualwebpart1usercontrol_ascx' does not contain a definition for 'theValue'

Brian Ogden Over a year ago

ASP.NET complies your user control in a temporary directory. User controls notoriously have a bit of "catch up" to play with changes, a couple F5's will flush the temporary of the old complied class with your latest changes. Just something you have to do once in a while developing user controls.

mwilson Over a year ago

I've done quite a few F5's but still consistently get the error. Any other ideas?

Andreas Prechtl Over a year ago

What'll happen if you just add theValue by using <% string theValue = "hi"; %> within the ascx file? Can you access it then?

|

Dan Le · Accepted Answer · 2013-07-04 19:39:35Z

1

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

answered Jul 4, 2013 at 19:39

Dan Le

3082 silver badges10 bronze badges

2 Comments

mwilson Over a year ago

If I just do var myVar = "Hi"; it works. So how do I reference the C# variable theValue?

Dan Le Over a year ago

If you are having a separate JS file, make your function like: function getMyValue(theValue) { var myVar = theValue; alert(myVar); } Then have it in the aspx file like: onmouseover="getMyValue('m1', '<%= myClass.theValue %>');

wtct · Accepted Answer · 2013-09-24 12:28:36Z

0

I prefer using HttpUtility.JavaScriptStringEncode

answered Sep 24, 2013 at 12:28

wtct

1771 silver badge3 bronze badges

2 Comments

Radim Köhler Over a year ago

Please, try to read this stackoverflow.com/help/deleted-answers, to get more understanding how to not answer. Namely: "Answers that do not fundamentally answer the question": barely more than a link to an external site

wtct Over a year ago

My answer is the direction to solution.

Brian Ogden · Accepted Answer · 2013-07-04 20:16:42Z

-1

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.

answered Jul 4, 2013 at 20:16

Brian Ogden

19.3k11 gold badges107 silver badges186 bronze badges

Collectives™ on Stack Overflow

Reference C# Variable in JavaScript

5 Answers 5

11 Comments

7 Comments

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

11 Comments

7 Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related