将JavaScript与数据库表中的值相结合

Combining JavaScript with Values from Database Table

本文关键字：相结合 JavaScript 数据库更新时间：2023-09-26

我使用的是MVC和实体框架。我的HTML:中有两个小表格

<div class="col-md-4">
        <table class="table orioles-table" style="background-color:white; opacity: 0.9">
            <tr>
                <th style="text-align:center;">
                    <img class="buck-picture" src="/*pic*/" />
                    <br />
                    Baltimore Orioles
                    <br />
                    @Html.ActionLink("Add Win", "Edit", "Teams", new { id = 2 }, null)
                </th>
            </tr>
            <tr>
                @foreach (var item in Model.Where(x => x.TeamName == "Baltimore Orioles"))
                {
                    <td id="orioles-wins" class="text-center">
                        @Html.DisplayFor(modelItem => item.SeriesWins) Series Wins
                    </td>
                }
            </tr>
        </table>
    </div>
<div class="col-md-4">
        <table class="table redSox-table" style="background-color: white; opacity: 0.9">
            <tr>
                <th style="text-align: center;">
                    <img class="picture" src="/*pic*/" />
                    <br />
                    Boston Red Sox
                    <br />
                    @Html.ActionLink("Add Win", "Edit", "Teams", new { id = 1 }, null)
                </th>
            <tr>
                @foreach (var item in Model.Where(x => x.TeamName == "Boston Red Sox"))
                {
                    <td id="redsox-wins" class="text-center">
                        @Html.DisplayFor(modelItem => item.SeriesWins) Series Wins
                    </td>
                }
            </tr>
        </table>
    </div>

现在，我的JS技能非常有限。。。但这是我的问题。。如何将数据库中表中的值转换为JavaScript，以便执行条件语句？例如，如果红袜队的系列赛胜利比黄莺队多。。。使文本变大变红（这只是我希望JS做什么的一个例子）。我该怎么用JS写呢？

我再次为你的草率/困惑道歉，但如果你有问题，我会尽力回答。

感谢您的帮助。

更新：

<table class="table orioles-table" style="background-color:white; opacity: 0.9">
            <tr>
                <th style="text-align:center;">
                    <img class="buck-picture" src="~/Images/buck-showalter_pointing-sidebar.gif" />
                    <br />
                    Baltimore Orioles
                    <br />
                    @Html.ActionLink("Add Win", "Edit", "Teams", new { id = 2 }, null)
                </th>
            </tr>
            <tr>
                @foreach (var item in Model.Where(x => x.TeamName == "Baltimore Orioles"))
                {
                    <td class="text-center">
                        <span id="redsoxLabel">
                           @* @ViewBag.RedSox*@ 1
                        </span>
                    </td>
                }
            </tr>
</table>
<table class="table redSox-table" style="background-color: white; opacity: 0.9">
            <tr>
                <th style="text-align: center;">
                    <img class="picture" src="~/Images/cartoonMe.PNG" />
                    <br />
                    Boston Red Sox
                    <br />
                    @Html.ActionLink("Add Win", "Edit", "Teams", new { id = 1 }, null)
                </th>
            <tr>
                @foreach (var item in Model.Where(x => x.TeamName == "Boston Red Sox"))
        {
                    <td class="text-center">
                        <span id="oriolesLabel">
                            @*@ViewBag.Orioles*@ 5
                        </span>
                    </td>
                }
            </tr>
</table>

CSS：

.big-red-text{
    color: red;
    font-size: 50px;
}

JS:

$(document).ready(function () {
    var Orioles = document.getElementById("redsoxLabel");
    var RedSox = document.getElementById("oriolesLabel");
    if (Orioles.innerText > RedSox.innerText) {
        document.getElementById("redSoxLabel").className = "big-red-text";
    }
    if (RedSox.innerText > Orioles.innerText) {
        document.getElementById("oriolesLabel").className = "big-red-text";
    }
})

您可以让javascript引用您的模型，如下所示：

var property = "@Model.Property";

然而，使用剃须刀，您也可以根据您的型号和条件应用样式（即大红色文本）。您不一定要依赖javascript。例如，当使用您的模型时，您可以设置变量来存储redsox胜利和orioles胜利。。。然后根据这些变量的条件设置类。

{
<span class="@(redSoxWins > oriolesWins) ? "big-red-text" : "")"> 
}

但是，如果您更喜欢单独使用javascript访问值。。。您可以使用选择器访问这些值。

  var redsoxWins = document.getElementById("redsox-wins");
  var oriolesWins = document.getElementById("orioles-wins");
  if(redsoxWins>oriolesWins){
     document.getElementById("redSoxLabel").className = "big-red-text";
  }