如何在MVC Razor视图中通过JavaScript调用模型生成二维码

首先，你之前的尝试都存在语法错误，导致JS代码无法正确执行，所以二维码无法显示。先逐个指出问题，再给出正确实现：

错误分析 #

• 选项1：var guid = "..."+@Html.Raw(Model.CurrentSessionId)) 多了一个闭合括号；new QRCode(..., (guid); 多了一个左括号，属于语法错误
• 选项2：拼接字符串时，@Html.Raw(Model.CurrentSessionId) 没有被引号包裹，JS会把它当成变量而非字符串；同时缺少闭合引号和函数括号
• 选项3：var guid = @Html.Raw(Model.CurrentSessionId) 没有引号，JS解析时会报错；模板字符串末尾缺少闭合的反引号和QRCode构造函数的闭合括号

正确实现方案 #

方案1：直接拼接带引号的Model值 #

<script src="~/js/qrcode.js"></script>
<script type="text/javascript">
    // 给Model值加上引号，确保JS识别为字符串类型
    var fullUrl = "https://mywebpage.net/GameSession/GameStartPlayer/" + "@Html.Raw(Model.CurrentSessionId)";
    new QRCode(document.getElementById("qrcode"), fullUrl);
</script>

方案2：在Razor中直接拼接完整URL #

<script src="~/js/qrcode.js"></script>
<script type="text/javascript">
    // 直接通过Razor拼接好完整URL，再传递给JS
    var fullUrl = "@Html.Raw($"https://mywebpage.net/GameSession/GameStartPlayer/{Model.CurrentSessionId}")";
    new QRCode(document.getElementById("qrcode"), fullUrl);
</script>

方案3：使用ES6模板字符串 #

<script src="~/js/qrcode.js"></script>
<script type="text/javascript">
    // 给Model值添加引号，模板字符串要闭合反引号
    var guid = "@Html.Raw(Model.CurrentSessionId)";
    new QRCode(document.getElementById("qrcode"), `https://mywebpage.net/GameSession/GameStartPlayer/${guid}`);
</script>

无断点时的验证方法 #

因为无法在Razor视图断点调试，你可以通过查看页面HTML源码（浏览器按F12打开开发者工具 -> 切换到「元素」面板）检查生成的JS代码：

• 确认拼接后的URL是完整的字符串格式，例如："https://mywebpage.net/GameSession/GameStartPlayer/xxxx-xxxx-xxxx"
• 检查是否存在未闭合的引号、括号等语法问题

内容的提问来源于stack exchange，提问作者Yumaisch