JavaScriptをデータベーステーブルの値と組み合わせる

Question

名前が間違っている可能性がありますが、それ以外にどのように言いたいのか分かりません。私の問題を説明しようとすると、私と一緒に裸にしてください。

私はMVCとエンティティフレームワークを使用しています。私はそのようはJavaScriptに私のデータベースに私のテーブルから値を取得するにはどうすればよい...

<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のスキルは非常に限られている...しかし、ここに私の質問は以下のとおりです。私は私のHTMLでの2つの小さなテーブルを持っています条件文を実行できますか？ Ex。だから、もし赤いソックスがオーリオスよりも多くのシリーズ勝利を持っていたら...テキストを大きく、赤色にしてください（私がJSにしたいものの一例）。私はJSでそれをどのように書きますか？

また、私は混乱/混乱をお詫びしますが、ご質問がある場合は、私はそれらに答えるために最善を尽くします。

何か助けていただければ幸いです。

UPDATE：

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