Generating JQuery from C# (MVC 5 - Razor)

本文关键字：Razor MVC JQuery from Generating | 更新日期: 2023-09-27 18:34:30

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

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

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

有没有理由让 Razor 生成的 jQuery 无法正常工作，即使生成的 JS 是完美格式化的 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('click'， function (( {

Generating JQuery from C# (MVC 5 - Razor)

通过 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块

相关文章：