Question

我正在使用MVC和实体框架。我的HTML中有2个小表：

<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中写这个？

再一次，我为邋iness /混乱道歉，但如果你有疑问，我会尽力回答。

感谢任何帮助。

更新：

<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";
    }
})

Answer 1

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

var property = "@Model.Property";

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

{
<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";
  }

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

1 个答案: