根据列值将类添加到元素中;使用WebMatrix sql数据库、Cshtml(Razor）和JavaScript

Add a class to an element depending on column value; Using WebMatrix sql database, Cshtml(Razor) and JavaScript

本文关键字：数据库 sql WebMatrix Cshtml JavaScript Razor 使用 添加 元素      更新时间：2023-09-26

我使用JavaScript创建了一个静态HTML问答应用程序（包含200个问题）。现在，为了使其动态，我使用WebMatrix 3。数据库表由6列组成，即：问题、选项A、选项B、选项C、选项D和正确选项。这是我的"cshtml"文件的部分代码。。。

@foreach(var row in data){
<ol type="1" class='questions'>
<div class="qnum" >
    <li><span id="qstn">@row.question:</span></li>        
    <ol id="q1" >
        <li id="A"><span>@row.choiceA</span></li>
        <li id="B"><span>@row.choiceB</span></li>
        <li id="C"><span>@row.choiceC</span></li>
        <li id="D"><span>@row.choiceD</span></li>
    </ol></div>
</ol>
if(@row.correctchoice == A){ 
<script>        
    $("li#A").addClass("true");
</script>
}
if(@row.correctchoice == B){ 
<script>        
    $("li#B").addClass("true");
</script>
}
if(@row.correctchoice == C){ 
<script>        
    $("li#C").addClass("true");
</script>
}
if(@row.correctchoice == D){ 
<script>        
    $("li#D").addClass("true");
</script>
}
}

现在为了测试，我在数据库中只有4个问题，分别有正确的选择A、B、C、D。但上面的代码为我做到了这一点：对于第一个问题，"true"类被添加到所有列表项中。第二，增加到第二、第三和第四项。第三，它被添加到第三和第四个列表项中。仅针对第四至第四项。。。因此，不幸的是，以上代码仅适用于第4个问题。。。。。

我找到了解决方案。我将代码更新为..

@{
    if(@row.correctchoice == A){
<li class="true"><span>@row.choiceA</span></li>
    } else{ <li><span>@row.choiceA</span></li> }
    if(@row.correctchoice == B){
<li class="true"><span>@row.choiceB</span></li>
    } else{ <li><span>@row.choiceB</span></li> }
    if(@row.correctchoice == C){
<li class="true"><span>@row.choiceC</span></li>
    } else{ <li><span>@row.choiceC</span></li> }
    if(@row.correctchoice == D){
<li class="true"><span>@row.choiceD</span></li>
    } else{ <li><span>@row.choiceD</span></li> }
}

所以我们最好不要直接将JavaScript和数据库的动态内容联系起来。

相关文章：