Generating JQuery from C# (MVC 5 - Razor)

Question

I have generated some jQuery from C#/Razor. Before writing the code to generate the jQuery I wrote a static version of the jQuery that I needed to mimic with the code I would be generating from the Razor (C#) syntax.

Mission accomplished. After writing the Razor code using C# code blacks I was able to generate a block of jQuery that was verbatim exactly the same as the working static version of the jQuery.

PROBLEM: WHen I load the page the jQUery doesn't work, but when I view source. the jQuery is perfect???

Is there a reason that jQuery generated by Razor would not work even though the JS in generates is perfectly formatted jQuery?

I can provide code samples but the reality is that my HTML page that is generated is perfect. But only the jQuery in the block I generated from Razor is not working???

static 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>

Razor code that generates jQuery

@{
    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 Copied directly from pages final outpu 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>

It's perfect? is there a reason why code generated from C# would not work? Is it a server/Compile time thing? I have never tried to generate JavaScript from C#/Razor code before??

I do get an error on the HTML page right before the line $('#balconyview').on('click', function () {

Answer 1

There's no reason why javascript defined through razor should not work on a browser. The only reason is syntax errors which exactly your case...

First, You've got a low unclosed parenthesis and curly brackets

Then, You've got undefined tokens here...

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

$$ is not defined in the else block...it is rather defined in the if block and it goes out of scope as soon as it hits the else block

Solution

To fix the sytanx errors you have introduced, close the parenthesis and curly brackets and make the $$ variable accessible to the 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++;
} 

Update

Actually, I think I got a bit dizzy reading the code, the $$ variable is perfectly in scope....just close the else block