C# can't seem to use variable value in javascript string

Question

Not sure where I'm goign wrong here, so I'm trying to use two string in javascript, but visual studio is showing the strings as error.

The code:

@{
                            string animCat = string.Format("#animCat{0}", counter);
                            string animCatClone = string.Format("#animCatClone{0}", counter);
                        }
                        <script type="text/javascript">
                            if (!jQuery(@animCat)[0].beginElement) {
                                jQuery(".home-category-container .image-wrapper.clone, .home-category-container .image-wrapper.orig").css({ "filter": "blur(25px)" });
                            }

                            jQuery(document).ready(function () {
                                setTimeout(function () {
                                    if (jQuery(@animCat)[0].beginElement) {
                                        jQuery(@animCat + ", " + @animCatClone)[0].beginElement();
                                    }
                                    else {
                                        jQuery(".home-category-container .image-wrapper").css("filter", "blur(0px)");
                                    }
                                    jQuery(".home-category-container .image-wrapper.orig").css("visibility", "visible");
                                    jQuery(".home-category-container .image-wrapper.clone").remove();
                                }, 1000);
                            });
                        </script>

Image showing what I mean:

Not sure what I'm missing.

Also when I hover over the red squiggle line it says "Predefined type 'System.String' is not defined or imported".

Have also tried if (jQuery('#animCat' + @counter)[0].beginElement) {} but this doesn't work #animCat' + 1 etc is output Cheers

Probably, you are missing using for System, but it is usually automatically added in Views/Web.config file. You have another problem - no quotes around generated JS selectors. As result, you will have jQuery(#animCat0) which is invalid JS. It should be jQuery("@animCat") and in every place where you use animCat or animCatClone. — Yeldar Kurmangaliyev
– Yeldar Kurmangaliyev, Commented Aug 9, 2017 at 5:28
@Amit Hi thanks for help, it has red squiggle line under @using System; says the type or namespace 'system' could not be found(are you missing dada dadada) and Using directive is unnecessary — Web Dev Guy
– Web Dev Guy, Commented Aug 9, 2017 at 5:28
You needn't be using any using statements here. It should work just fine. This is probably a VS bug. See here: stackoverflow.com/questions/33215134/… — runofthemillgeek
– runofthemillgeek, Commented Aug 9, 2017 at 5:29
Agreed @Sangeeth Sudheer! Sometimes visual studio show odd behaviour. Please make sure you restart the visual studio and reload your solution before doing any debugging on your code. — Raheel Anwar
– Raheel Anwar, Commented Aug 9, 2017 at 5:32

Web Dev Guy · Accepted Answer · 2017-08-09 05:50:58Z

0

Ok so it's now working,

As Yeldar Kurmangaliyev suggested I needed the quotes, but single quotes not double '@animCat'

This is the code that works:

@{
                            string animCat = string.Format("#animCat{0}", counter);
                            string animCatClone = string.Format("#animCatClone{0}", counter);
                        }
                        <script type="text/javascript">
                            if (!jQuery('@animCat')[0].beginElement) {
                                jQuery(".home-category-container .image-wrapper.clone, .home-category-container .image-wrapper.orig").css({ "filter": "blur(25px)" });
                            }

                            jQuery(document).ready(function () {
                                setTimeout(function () {
                                    if (jQuery('@animCat')[0].beginElement) {
                                        jQuery('@animCat, @animCatClone')[0].beginElement();
                                    }
                                    else {
                                        jQuery(".home-category-container .image-wrapper").css("filter", "blur(0px)");
                                    }
                                    jQuery(".home-category-container .image-wrapper.orig").css("visibility", "visible");
                                    jQuery(".home-category-container .image-wrapper.clone").remove();
                                }, 1000);
                            });
                        </script>

This part of code still shows error red squiggle line:

string animCat = string.Format("#animCat{0}", counter);
string animCatClone = string.Format("#animCatClone{0}", counter);

But when I build the solution and test it works now :)

Cheers all for the help

edited Aug 9, 2017 at 5:50

answered Aug 9, 2017 at 5:40

Web Dev Guy

1,8393 gold badges25 silver badges50 bronze badges

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

3 Comments

Raheel Anwar Over a year ago

Nice Job! The red squiggle is just a visual studio thing and go away.. And one more thing please don't mix Razor syntax with javascript it is a very poor practice and will cause you more problems down the road. When you open a script tag forget about the C# just work with DOM. You will thank me later.

Web Dev Guy Over a year ago

@RaheelAnwar How would I avoid mixing the razor syntax with js

Raheel Anwar Over a year ago

Well just think in javascript for example in first if statement you can simply get a handle to #animCat in DOM but now one might say how to get the counter? Well pass the counter to the HTML element through data attribute by Razor like <p data-counter=@counter>My JS Element</p> and get the counter by Jquery. This is just one approach. And I believe you can think of many others ways. The point is razor is very good with rendering html, when application grows you need to separate and bundle JS files, then you wont be able to use .cshtml or razor syntax.

Collectives™ on Stack Overflow

C# can't seem to use variable value in javascript string

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related