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

Question

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

任务完成。使用 C# 代码编写 Razor 代码后，我能够生成一个 jQuery block ，该 block 与 jQuery 的工作静态版本完全相同。

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

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

我可以提供代码示例，但实际情况是我生成的 HTML 页面是完美的。但只有我从 Razor 生成的 block 中的 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 block 中定义...它是在 if block 中定义的，并且超出了范围一旦到达 else block

解决方案

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

@{
    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 block