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 output

<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 () {

Yes, when I generate the jQuery by using Razor I get 1 error on the line directly before ` $('#balconyview').on('click', function () {` — Eric Bishard
– Eric Bishard, Commented Dec 18, 2014 at 7:15

Leo · Accepted Answer · 2014-12-18 07:21:14Z

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

edited Dec 18, 2014 at 7:21

answered Dec 18, 2014 at 7:14

Leo

14.9k2 gold badges44 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Eric Bishard Over a year ago

Ahh, Let me try to fix this and see if I can get that resolved.

Eric Bishard Over a year ago

Dangit. I wasn't closing my elses.. Right?

Eric Bishard Over a year ago

It's so late and I have been working for 10 hours. One curly brace was overlooked. lol I appreciate the second pair of eyes, even with the error in the console pinpointing it I just wasn't seeing it. I appreciate the help!

Eric Bishard Over a year ago

Sorry I made you dizzy? That is why I provided the HTML output. But I'm grateful for the help! These are the problems that grid you to a halt at 2am in the morning.. THanks again!

Leo Over a year ago

@EricB it's alright mate. It's not your fault. I was a bit overloaded here. Cheers

Collectives™ on Stack Overflow

Generating JQuery from C# (MVC 5 - Razor)

1 Answer 1

Solution

Update

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Solution

Update

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related