How can I put whitespace in the javascript string when I make a dynamic class name?

Question

I'am using Javascript in ASP.NET MVC. I need to make class name dynamically which includes whitespace, but it doesn't work.

The result becomes

<script class="carousel-item" active="">

rather than

<script class="carousel-item active">

Below is the code block.

@for (var i = 0; i < Model.Banners.Count; i++)
{
                    var className = "carousel-item";
                    if (i == 0)
                    {
                        className += " active";
                    }

                    var srcName = "";
                    if (Model.Banners[i].Image != null)
                    {
                        srcName = "data:image;base64," + @System.Convert.ToBase64String(Model.Banners[i].Image);
                    }

                    <div class=@className>
                        <img class="d-block img-fluid" src=@srcName/>
                    </div>
}

Answer 1

You're missing quotes around @className in <div class=@className> , try <div class="@className"> instead.

You should also add quotes around @srcName too in the img tag

<div class="@className">
    <img class="d-block img-fluid" src="@srcName"/>
</div>

Explanation

Without the quotes <div class="@className"> will render

<div class=carousel-item active>

Which gets interpreted as

<div class="carousel-item" active="">

Answer 2

Actually you are missing the quotes("") for html attribute, the correct html syntax is attr1="value1, value2", and you are making it as attr1=value1 value2.

Try:

<div class="@className">
    <img class="d-block img-fluid" src="@srcName"/>
</div>

Or:

var className = "\"carousel-item";
if (i == 0)
{
    className += " active";
}
className += "\"";