从 C# 生成 JQuery (MVC 5 - Razor)

Question

我已经从 C#/Razor 生成了一些 jQuery。在编写生成 jQuery 的代码之前，我编写了一个静态版本的 jQuery，我需要使用从 Razor (C#) 语法生成的代码来模仿它。

任务完成。在使用 C# code blacks 编写 Razor 代码后，我能够生成一个 jQuery 块，它与 jQuery 的工作静态版本一字不差。

问题：当我加载页面时 jQUery 不起作用，但是当我查看源代码时。 jQuery 是完美的？？？

即使生成的 JS 是完美格式的 jQuery，Razor 生成的 jQuery 也无法工作是否有原因？

我可以提供代码示例，但实际情况是我生成的 HTML 页面是完美的。但只有我从 Razor 生成的块中的 jQuery 不起作用？？？

静态 jQuery：

<script>
 $('#centerview').on('click', function () {
     var $$ = $(this)
     if (!$$.is('.imageChecked')) {
         $$.addClass('imageChecked');
         $('#2').prop('checked', true);
     } else {
         $$.removeClass('imageChecked');
         $('#2').prop('checked', false);
     }
 });
 $('#balconyview').on('click', function () {
     var $$ = $(this)
     if (!$$.is('.imageChecked')) {
         $$.addClass('imageChecked');
         $('#3').prop('checked', true);
     } else {
         $$.removeClass('imageChecked');
         $('#3').prop('checked', false);
     }
 });
</script>

生成 jQuery 的 Razor 代码

@{
    var jqCounter = 1;
}
@foreach (var img in Model.Render.Images)
{
    var imgName = img.Name.Replace(" ", string.Empty);
    @:$('#@imgName').on('click', function () {
        @:var $$ = $(this)
        @:if (!$$.is('.imageChecked')) {
            @:$$.addClass('imageChecked');
            @:$('#@jqCounter').prop('checked', true);
        @:} else {
            @:$$.removeClass('imageChecked');
            @:$('#@jqCounter').prop('checked', false);
    @:});
    jqCounter++;
}

HTML 直接从最终输出的页面复制t

<script>
    $('#straightonviewz').on('click', function () {
        var $$ = $(this)
        if (!$$.is('.imageChecked')) {
        $$.addClass('imageChecked');
        $('#1').prop('checked', true);
    } else {
        $$.removeClass('imageChecked');
        $('#1').prop('checked', false);
    });
    $('#centerview').on('click', function () {
        var $$ = $(this)
        if (!$$.is('.imageChecked')) {
        $$.addClass('imageChecked');
        $('#2').prop('checked', true);
    } else {
        $$.removeClass('imageChecked');
        $('#2').prop('checked', false);
    });
    $('#balconyview').on('click', function () {
        var $$ = $(this)
        if (!$$.is('.imageChecked')) {
        $$.addClass('imageChecked');
        $('#3').prop('checked', true);
    } else {
        $$.removeClass('imageChecked');
        $('#3').prop('checked', false);
    });
</script>

完美吗？从 C# 生成的代码不起作用是有原因的吗？它是服务器/编译时间的事情吗？我以前从未尝试过从 C#/Razor 代码生成 JavaScript？？

我在 HTML 页面上的行前确实收到了错误 $('#balconyview').on('点击', function () {

Answer 1

通过 razor 定义的 javascript 没有理由不能在浏览器上运行。唯一的原因是语法错误，这正是你的情况......

首先，你有一个低括号和大括号

那么，这里有未定义的标记...

else {
    $$.removeClass('imageChecked');
    $('#1').prop('checked', false);
});

$$ 没有在else 块中定义...而是在if 块中定义，并且一旦到达else 块就会超出范围

解决方案

要修复您引入的 sytanx 错误，请关闭括号和大括号，并使 $$ 变量可被 else 块访问...

@{
    var jqCounter = 1;
}
@foreach (var img in Model.Render.Images)
{
    var imgName = img.Name.Replace(" ", string.Empty);
    @:$('#@imgName').on('click', function () {
        @:var $$ = $(this);
        @:if (!$$.is('.imageChecked')) {
            @:$$.addClass('imageChecked');
            @:$('#@jqCounter').prop('checked', true);
        @:} else {
            @:$$.removeClass('imageChecked');
            @:$('#@jqCounter').prop('checked', false);
    @:}});
    jqCounter++;
} 

更新

实际上，我想我读代码有点头晕，$$ 变量完全在范围内....只需关闭 else 块