CODEWITHSUNDEEP
javascriptc#htmlfrontend
Mahek
Mahek

Reputation: 562

How to pass c# variable to javascript function

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

Upvotes: 1

Views: 948

Answers (1)

Luke Briggs
Luke Briggs

Reputation: 3789

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.

Upvotes: 1

Related Questions