Question

我尝试实现一个显示小方框的循环..以下第一个代码的结果如下：

second image

（代码）：

<div class="row">
    <div class="col-lg-3 col-xs-6">
    <!-- small box -->
    <!-- achtung hier soll man vielleicht die Adresse ändern -->

    @{for (int i = 0; i < Model.ListStations.Length; i++)
            {
                string urlTemp = Model.ListStations[i];
                string colorTemp = "small-box bg-" + Model.ListColors[i % Model.ListColors.Length];
                System.Diagnostics.Debug.WriteLine(colorTemp);
        <div class= "small-box bg-blue">
            <div class="inner">
                <h3>Station</h3>
                <p> Model.ListStations[i]</p>
            </div>
            <div class="icon">
                <i class="fa fa-heartbeat" aria-hidden="true"></i>
            </div>
            <a href= @urlTemp class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
        </div>;
            }
        }
    </div>
</div><!-- /.row -->

但是当我将"small-box bg-blue"更改为@colorTemp时，包含"small-box bg-blue"，"small-box bg-black"和"small-box bg-green"的列表，我明白这一点：

first image

我想我错过了（或没有）一个微妙的HTML特性，有人知道出了什么问题吗？编辑：生成的HTML代码为：

<div class="row">
    <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <!-- achtung hier soll man vielleicht die Adresse ändern -->
            <div class= &#39;small-box bg-blue&#39;>
                <div class="inner">
                    <h3>Station</h3>
                    <p> Model.ListStations[i]</p>
                </div>
                <div class="icon">
                    <i class="fa fa-heartbeat" aria-hidden="true"></i>
                </div>
                <a href= Station1 class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
            </div>            <div class= &#39;small-box bg-black&#39;>
                <div class="inner">
                    <h3>Station</h3>
                    <p> Model.ListStations[i]</p>
                </div>
                <div class="icon">
                    <i class="fa fa-heartbeat" aria-hidden="true"></i>
                </div>
                <a href= Station2 class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
            </div>            <div class= &#39;small-box bg-green&#39;>
                <div class="inner">
                    <h3>Station</h3>
                    <p> Model.ListStations[i]</p>
                </div>
                <div class="icon">
                    <i class="fa fa-heartbeat" aria-hidden="true"></i>
                </div>
                <a href= Station3 class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
            </div>
    </div>
</div>

Answer 1

与可能遇到此类问题的其他人分享，这是解决方案。

在生成的HTML中，有'而不是双引号。

为避免这种情况，您必须将此<div class= "small-box bg-blue">替换为<div class="@(colorTemp)">

.cshtml混音出错

1 个答案: