How to pass c# variable to javascript function

Question

I have variable containing some text.Basically I am trying to do toggle(hide/show) in html using c#.I want to pass this variable to javascript function that is performing hide and show .

Here is my code:

static void Main(string[] args)
        {
            string res = null;
            string toggle = null;
            res += "<div style=\"display: none;\">This is the content that is dynamically being collapsed.</div>";
            toggle += "<html><head>";
            toggle += "<script type=\"text/javascript\"></script><script> function toggle2(showDetails) {var ele =document.getElementById(showDetails);if(ele.style.display == \"block\") {ele.style.display = \"none\";}else {ele.style.display = \"block\";}}</script>";
            toggle += "</head>";
            toggle += "<body>";
            toggle += "<a href=\"javascript:toggle2('"+res+"')\">collapse</a>";
            toggle += "</body>";
            toggle += "</html>";

            FileStream log = new FileStream(@"E:\report2.html", FileMode.Create);
            using (StreamWriter w = new StreamWriter(log, Encoding.UTF8))
            {
                w.WriteLine(toggle);
            }
        }

On clicking collapse,it should display the content of variable res.Where am I doing wrong?

Thanks in advance

First, you aren't trying to pass a variable to a JavaScript function, you are trying to write the value of the variable into the function signature. Second of all, you never actually insert the div into the DOM anywhere, and it doesn't have an id, so getElementById won't ever return anything. — Claies
– Claies, Commented Nov 27, 2016 at 6:18

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

You've got multiple issues:

The "quotes" inside your string are messing with the href="quotes"
Your JavaScript function is incorrect
The general approach is unusual/ very error-prone
Nitpicking: Don't use += and null

First, those quotes

Take a look at your file report2.html in your favourite text editor and you'll probably see this:

<a href="javascript:toggle2('<div style="display: none;">This is the content that is dynamically being collapsed.</div>')">

StackOverflow's code colouring helps here - notice that display:none; is black. This is because it's essentially seeing just href="javascript:toggle2('<div style="

A simple fix is to double-escape those quotes in your res string:

<div style=\\\"display: none;\\\">This is the content..

..but yikes. This kind of thing is really not recommended unless you have to!

Second, the function

I (and many others!) really dislike JavaScript inside a string like this - it promotes bad code formatting, for starters. Let's undo that and make it pretty:

function toggle2(showDetails) {

    var ele =document.getElementById(showDetails);
    
    if(ele.style.display == "block") {
        ele.style.display = "none";
    }else {
        ele.style.display = "block";
    }

}

That's better! So, firstly, showDetails is not an ID of an element - it's a full string of content. Pass an ID instead:

function toggle2(elementID) {

    var ele =document.getElementById(elementID);
    
    if(ele.style.display == "block") {
        ele.style.display = "none";
    }else {
        ele.style.display = "block";
    }

}

This way you can instead use, e.g:

toggle+="<div id='collapsibleDiv'>"+res+"</div>";
toggle+="<div onmousedown=\"toggle2('collapsibleDiv');\">Click me!</div>";

instead. A bonus here is that it doesn't need to deal with those quotes in res.

Null and +=

Right at the start you've got this:

string res=null;
res+="...";

It's safer to just use string res=".."; instead as adding a null to anything is bad practice. Some programming languages will straight crash on you.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 27, 2016 at 6:32

Luke Briggs

3,7891 gold badge18 silver badges26 bronze badges

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

2 Comments

Mahek Over a year ago

My actual need is to pass string res as an argument to javascript function and to perform hide/show, so is it possible?

Luke Briggs Over a year ago

@Mahek You can't hide/show just a string - you must have an element that you can reference (typically by id - I used the ID collapsibleDiv in the answer). Make it hidden by default if you need to with "<div id='collapsibleDiv' style='display:none;'>"+res+"</div>".

Collectives™ on Stack Overflow

How to pass c# variable to javascript function

1 Answer 1

You've got multiple issues:

First, those quotes

Second, the function

Null and +=

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

You've got multiple issues:

First, those quotes

Second, the function

Null and +=

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related