为什么 @ID 变量在同一个 <text></text> 元素中呈现不同

Why is @ID variable being rendered differently inside the same <text></text> element

我正在尝试为我的数据模型中的每一行自动生成一些 javascript,这需要将每一行的 ID 值插入到 javascript 中。

这是 HTML 页面上脚本元素中的代码:

    <script>
        $(function () {
@foreach (var item in Model) {
    var ID = item.QuestionID;
    <text>$('#toggle-off@ID-label').click(function() { $('#Question-Answer-@ID').show(); })</text>
}
        });
    </script>

输出为:

    <script>
        $(function () {
    $('#toggle-off@ID-label').click(function() { $('#Question-Answer-1').show(); })
    $('#toggle-off@ID-label').click(function() { $('#Question-Answer-2').show(); })
    $('#toggle-off@ID-label').click(function() { $('#Question-Answer-3').show(); })
...

当我期望它是:

    <script>
        $(function () {
    $('#toggle-off1-label').click(function() { $('#Question-Answer-1').show(); })
    $('#toggle-off2-label').click(function() { $('#Question-Answer-2').show(); })
    $('#toggle-off3-label').click(function() { $('#Question-Answer-3').show(); })
...

Razor 引擎似乎将 @ID 视为字符串的一部分,前提是它前面有字母数字字符。如果在它正常工作之前添加一个连字符:#toggle-off-@ID-label。您可以用括号将 ID 括起来以获得预期的输出:

  <script>
        $(function () {
            @foreach (var item in Model) {
                var ID = item.QuestionID;
                <text>$('#toggle-off@(ID)-label').click(function() { $('#Question-Answer-@ID').show(); })</text>
            }
        });
  </script>

Razor 标记解析器不是那么聪明,它认为 off@ID 是一个单一的标记,因此不是它应该替换的东西。

你应该可以通过这样的方式绕过它:

    <script>
        $(function () {
@foreach (var item in Model) {
    var ID = item.QuestionID;
    var toggle = string.format("#toggle-off{0}-label", ID);
    <text>$('@toggle').click(function() { $('#Question-Answer-@ID').show(); })</text>
}
        });
    </script>