如何在 JavaScript 文件中将 Razor 语法与 JavaScript 混合？答案

【问题标题】：How can I mix Razor syntax with JavaScript inside JavaScript file?如何在 JavaScript 文件中将 Razor 语法与 JavaScript 混合？
【发布时间】：2017-08-20 11:35:40
【问题描述】：

我需要在同一语句中使用 Razor 语法混合和匹配 JavaScript 和 C#。我可能使用 @: wrong 在 Razor 代码中编写 JavaScript，因为 Razor 代码块中的最后一个表达式会破坏块之后的所有 JavaScript。

var myVar = document.getElementById("myId");
var linkText = "someText";
var JSVar = X;  //X represents some number
@{
    int ID = JSVar;
    @:myVar.innerHTML = @Html.ActionLink(@:linkText, "Details", "Cards", new { Id = ID});
}

我也尝试将其作为没有代码块的单个表达式来完成，如下所示：

myVar.innerHTML = @Html.ActionLink(@:linkText, "Details", "Cards", new { Id = @:IdVar });

这也会破坏以下 JavaScript。

【问题讨论】：

X 的值是从哪里得到的？
X 与问题无关。它表示一个 JavaScript var 值（它是一个数字）。
X 在服务器端创建视图时甚至不存在。当在客户端单击 myId 时，您是否尝试将 X 值附加到 ULR？
@Win 忽略“X”。变量有效。以上只是我代码的摘录，唯一有问题的代码是 Razor 块。 JS 变量只是为了让读者了解我如何尝试混合 JS 和 Razor。

标签： razor asp.net-core

【解决方案1】：

根据这个问题，您似乎希望在客户端动态用 JSVar 的价值来收缩一个链接。

如果是这样，您可以将 JSVar 附加到 URL。例如，

<input id="txtValue" type="text" value="Stackoverflow" />
<a id="myId">Navigate to Page</a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#myId").click(function () {
            var JSVar = $("#txtValue").val();
            location.href = "@Url.Action("About", "Home")/id=" + JSVar;
        });
    })
</script>

【讨论】：

我没有意识到你可以像这样模拟一个 html 元素。但是，我对“location.href”的来源及其代表的含义感到有些困惑。
我也试过这个，因为我发布了这个问题：row.insertCell(0).innerHTML = '' + cardName + '';它会生成： cardName ，因此由于语法不正确而导致链接无用。我无法想象为什么那些引文会出现在那里。
您不能将 asp-* 放在 JavaScript 中。您需要从不同的角度接近，例如使用链接的点击事件。您需要了解 jQuery 的基本知识以及 DOM 的工作原理；如果没有 jQuery，您将在 ASP.Net Core 中使用非常基本的东西。
我对 DOM 和 jQuery 相当熟悉，但我不知道 jQuery 对 asp.net 核心有优势。在这个项目之前，我只使用 jQuery，但我想使用基本库和掌握 JS。
你可以试试row.insertCell(0).innerHTML = '<a href="@Url.Action("Details", "Cards", new {Id = cardId })">' + cardName + '</a>';。显然，cardId 必须是服务器端变量。

【解决方案2】：

我认为这是不可能的。我所做的（当我想不出更好的选择时）是将剃刀变量（如 href 或模型值）存储在隐藏字段或 div 中，然后我可以通过 javascript 将其拉出。

您到底想完成什么？可能有更优雅的方式来实现它？

【讨论】：

我正在尝试将表格单元格的 innerHTML 设置为指向我应用程序中其他位置的链接。我已经将“linkText”作为纯文本插入到 html 表中，但无法将其作为链接。