Combining JavaScript with Values from Database Table

Question

I am using MVC and entity framework. I have 2 small tables in my 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>

Now, my JS skills are very limited... but here are my questions.. How do I get the value from my table in my database into JavaScript so that I can perform a conditional statement? Ex. So if the red sox have more series wins than the orioles... make the text big and red (just an example of what I want the JS to do). How would I write that in JS?

Again, I apologize for the sloppiness / confusion, but if you have questions I will do my best to answer them.

Any help is appreciated.

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

scottjustin5000 · Accepted Answer · 2016-03-24 15:17:20Z

1

You can have javascript reference your models like so:

var property = "@Model.Property";

However, with razor you can also apply styles (i.e. big red text) based on your models and conditions. You don't necessarily have to rely on javascript. For example, when working with your model you could set variables to store redsox wins and orioles wins...and then set your class based the condition of those variables.

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

However, if you'd prefer accessing the values with javascript alone...you'd access the values using selectors.

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

answered Mar 24, 2016 at 15:17

scottjustin5000

1,35612 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Grizzly Over a year ago

so in my HTML I have to add the class big-red-text to what? what is redSoxLabel?

scottjustin5000 Over a year ago

redSoxLabel can be an identifier of whatever element you'd like toapply the class to (or whatever). So in the example above, suppose you had this:Html.DisplayFor(model => model.item.SeriesWins, new { id = "redSoxLabel" })

Grizzly Over a year ago

nvmd I just got it.. needed to add a ; at the end of my JS.. thanks for all your help!

Collectives™ on Stack Overflow

Combining JavaScript with Values from Database Table

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related