使用 MVC/Razor 传递 C# 变量以用于 Dygraph

Posted 2023-04-12

【中文标题】使用 MVC/Razor 传递 C# 变量以用于 Dygraph

【英文标题】：Passing C# variable using MVC/Razor for use with Dygraph

【发布时间】：2014-09-08 19:38:13

【问题描述】：

所以这是我的问题，我相信这很简单。我对 Web 开发比较陌生，遇到了一个我无法弄清楚的小问题。

我在 MVC 视图中有这段代码。 . .

@
var data = "";
var count = 1;
foreach (var item in ViewModel.Data)

    data += count.ToString() + "," + item.Reading.ToString() + "\n";
    count++;

我想将这个“数据”变量传递给一个非常小的脚本，以便使用 Dygraph 创建一个图形。这是我目前拥有的，并且相信应该可以，但它没有。

<script type="text/javascript">
g = new Dygraph(document.getElementById("readingGraph"), @data, labels: ["Sample Number", "Reading"] );
</script>

我知道脚本本身会起作用。如果我将一些 CSV 值硬编码到 @data 所在的字符串中，则会弹出图表并且一切都很好。有了@data，图表不会加载，脚本根本不会运行（我在其中放置了一个 alert('hi') 以查看它是否会弹出，但没有）。

此外，我知道字符串正在正确“构建”，因为我在 Visual Studio 中设置了断点并进行了检查。

任何帮助都是好人。提前致谢。

【问题讨论】：

您可能只需要在它周围加上引号：“@data”。如果你不这样做，那么你传递的是一个逗号分隔的字符串，因此传递了多个 js 参数。

是的，先生，我尝试在@data 周围加上引号。有没有办法“告诉” js 它应该是一个长字符串？ IE：在 C# 中 @"blabla"。

我上面提到的方式。 @data 只会被值“替换”。对于 js '@data' 也可以。为了获得更好的主意，请将 var 设置为该值，然后 console.log 或其他任何内容：var data = "@data";。另外，我认为换行符可能会给您带来问题。我不熟悉 Dygraph。也许您传递的数据格式是问题的一部分？根据文档，第二个参数应该是一个文件 - 所以我认为你正在尝试做的事情是行不通的。

docs 表示文件路径或原始逗号分隔值。我最初也认为行尾，但链接的示例显示\n。我能看到的唯一区别是 @data 变量值没有用引号括起来 - 即 data += count.ToString() + "," ... -> data += "\"" + count.ToString() + ","... （或者更好的是，string.Format(...) :)）

【参考方案1】：

混合使用 javascript 和 Razor 要求您使用任何代码块围绕 Razor 调用

@ ... 或@if(condition)等

并将代码本身置于转义序列中

@: 或<text> 标签。

所以，知道了这一点，你可以做类似的事情

<script>
    var jsData = '';
    @
        <text>
            jsData = '@data';
        </text>
     

     g = new Dygraph(document.getElementById("readingGraph"), jsData, labels: ["Sample Number", "Reading"] );

</script>

退房 Mix Razor and Javascript code 和Using Razor within JavaScript

【参考方案2】：

我发现了问题。 JS 文字字符串不能跨越多行（这就是我通过 C# 创建的“数据”变量为其提供信息的方式）。

我必须在 C# 代码中添加一个“@”才能将其转换为字符串文字。 . .

foreach (var item in CompletePreview.BatteryData)

    data += count.ToString() + "," + item.Voltage + @"\n"; //note the new @ in front of "\n"
    count++;

必须更改脚本以将文字 '\n' 替换为可以在 JS 中分解的文字。

g = new Dygraph(document.getElementById("voltGraph"), jsgraphData.replace('\n','\n'),  labels: ["Sample Number", "Voltage"] );
alert('graphs should follow');

感谢大家的帮助。非常感谢。

【讨论】：

顺便说一句，我知道代码不完全匹配，即从我正在使用的实际代码中剪切和粘贴，而不是通用变量名称等。很抱歉我很懒，没有把它改成我的第一个例子。