Should I add a double quote to c# variable for adding a css class in razor?

Question

I want to conditionally display css class.

I have a if statement like:

@if(a > 5)
{
  specialBackground = "background: green;";
}

Then in my html table, I have:

<table>
 <tr style=@specialBackground>
 </tr>
</table>

My problem is: Several days ago, Without adding a double quote to @specialBackground, I can see the row background color is green. <tr style=@specialBackground>.

But today, I need to add a double quote to @specialBackground, <tr style="@specialBackground">, then I can see row background color is green. I believe I did not change other code.

My question is:

How can I find the reason why sometimes without adding double quote works, but sometimes not.
Should I add a double quote in this case?
If I did not add the double quote to @specialBackground, I can put the breakpoint in if(a > 5). If I did not add the double quote to this variable, I only can put the breakpoint in specialBackground = "background: green;"; Why?

Thanks for helping me out. I debug for 3 hours, but no idea how to find the reason. I did not find the similar posts in Stackoverflow.

first of all, that's a weird way of doing it, and i think that's why you are getting weird results. try debug it and see what the result is, is it <tr style=""background: green;""> or <tr style="background: green;"> when you include double quote — Mindless
– Mindless, Commented Jul 19, 2017 at 0:53
can't you just do <table>@if(a > 5) {<tr style="background: green;"> </tr>}<tr style="background: red;"></tr> </table> nothing unexpected will come out. — Mindless
– Mindless, Commented Jul 19, 2017 at 0:53
You should include the double quotes. I have no idea why it would have worked without them. — juharr
– juharr, Commented Jul 19, 2017 at 1:05
it might be a double quote single quote problem, try using single quote specialBackground = 'background: green;'; and include that in <tr style="@specialBackground"> </tr> — Mindless
– Mindless, Commented Jul 19, 2017 at 1:06
@juharr Any official reference document to support what you said? Thanks. — FullStackDeveloper
– FullStackDeveloper, Commented Jul 19, 2017 at 1:07

Jon P · Accepted Answer · 2017-07-19 01:13:47Z

1

You should leave the double (or single if you prefer) quotes in your view

<table>
 <tr style="@specialBackground">
 </tr>
</table>

And handle the string normally in the C# file.

Quotes are optional for HTML attributes but you should use them for consistency as they are necessary when you have a space in your attribute, as you have.

Attributes are placed inside the start tag, and consist of a name and a value, separated by an = character. The attribute value can remain unquoted if it doesn’t contain spaces or any of " ' ` = < or >. Otherwise, it has to be quoted using either single or double quotes. The value, along with the = character, can be omitted altogether if the value is the empty string.

Taken from: https://mathiasbynens.be/notes/unquoted-attribute-values

edited Jul 19, 2017 at 1:13

answered Jul 19, 2017 at 1:06

Jon P

19.9k8 gold badges52 silver badges76 bronze badges

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

2 Comments

FullStackDeveloper Over a year ago

If I did: <tr style="@specialBackground">. Which actual is <tr style=""background: green;"">? If yes, why """" (two double quotes) can work for adding a css class to style?

Jon P Over a year ago

It doesn't work like that, in C# string specialBackground = "background: green"; the double quotes aren't part of the actual string. They define the start and end of the string. So the HTML rendered from <tr style="@specialBackground"> is <tr style="background: green;">. To include double quotes in a C# string you need to escape them, fore example string str = "you can \"quote\" me on this";

Collectives™ on Stack Overflow

Should I add a double quote to c# variable for adding a css class in razor?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related