How do I do inline Razor code within some HTML?

Question

What I want to do:

<div class='duck@if (this.Model.quacker) { -noisy }'>quack</div>

ie. either

<div class='duck'>quack</div>

or

<div class='duck-noisy'>quack</div>

However I can't quite get the syntax right. I tried @:-noisy but that generates errors such as

Make sure you have a matching "}" character for all the "{" characters within this block

I tried also @:-noisy@ but the same error. What should I do?

Answer 1

The <text> element will transition to HTML again. Like this:

<div class='duck@if (this.Model.quacker) { <text>-noisy</text> }'>quack</div>

Answer 2

should be like this

<div @if(this.Model.quacker) 
{
@:class='duck-noisy' 
}else{
@:class='duck'
}>quack</div>