如何将 c# 变量传递给 javascript 函数

Question

我的变量包含一些 text.Basically 我正在尝试使用 c# 在 html 中执行 toggle(hide/show)。我想将此变量传递给 javascript 函数即执行隐藏和显示。

这是我的代码：

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);
            }
        }

点击折叠时，应该会显示变量的内容res.Where我做错了吗？

提前致谢

Answer 1

您有多个问题：

字符串中的“引号”与 href="quotes" 混淆了
你的JavaScript函数不正确
一般方法不常见/非常容易出错
吹毛求疵：不要使用 += 和 null

首先，那些引语

在您最喜欢的文本编辑器中查看您的文件 report2.html，您可能会看到：

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

Whosebug 的代码着色在这里有所帮助 - 请注意 display:none; 是黑色的。这是因为它基本上只看到 href="javascript:toggle2('<div style="

一个简单的解决方法是对 res 字符串中的引号进行两次转义：

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

..但是赞。这种东西真的不推荐除非你不得不!

二、函数

我（和许多其他人！）真的不喜欢 JavaScript 在这样的字符串中 - 它 促进错误的代码格式 ，首先。让我们撤消它并使其漂亮：

function toggle2(showDetails) {

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

}

那就更好了！因此，首先，showDetails 不是元素的 ID - 它是完整的内容字符串。改为传递 ID：

function toggle2(elementID) {

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

}

您可以使用这种方式，例如：

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

代替。这里的好处是它不需要处理 res 中的那些引号。

空和 +=

一开始你就得到了这个：

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

只使用 string res=".."; 更安全，因为向任何内容添加 null 都是不好的做法。有些编程语言会让你直接崩溃。

如何将 c# 变量传递给 javascript 函数

How to pass c# variable to javascript function

html

javascript

c#

frontend

您有多个问题：

首先，那些引语

二、函数

空和 +=