How to capture @Html.DisplayFor data and pass it on to a javascript/jQuery section of code?

Question

I want to implement a graphical chart for a set of data read from database and displaying it on a web page. There is some code which is reading data from the database. The code is a combination of C# and Razor HTML which I have never worked on before.

1) I am trying to pass the TIMESTAMP and STATUS data from Razor HTML to my javascript and got my chart implementation code in javascript.

2) Also what is the latest and best method of implementing a chart? I looked at various options on the internet and decided to implement in a javascript. Can I please get some help here?

I have tried giving the @Html.DisplayFor an id like @Html.DisplayFor(modelItem => item.TIMESTAMP, new { id = "TimeStamp" + i })

Its complaining about the int i; I have in code.

Also I tried adding the span around @Html.DisplayFor

For implementing a chart I have looked at jquery charts and google api charts. Don't really know whats the best for me.

Here is the code:

@model IEnumerable<PS1619.Models.Status>
<!-- Asset Status History View -->
<!-- Data passed as IEnumerable Object  -->
@*@model PS1619.Models.LastUpdate
*@

    @{
        ViewBag.Title = "Asset Status History";
    }

    <h2>History</h2>
    <br />
    <button type="button"><b>Graph</b></button>
    <br />
    <br />
    <table class="table">
        <tr>
            <th>
                Rig Name
            </th>
            <th>
                TimeStamp
            </th>
            <th>
                Status
            </th>
            <th></th>
        </tr>


        @{
            int i = 1;
            foreach (var item in Model)
            //for (int i = 0; i < Model.Count; i++)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.PC_TAG)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.TIMESTAMP, new { id = "TimeStamp" + i })
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.STATUS, new { id = "Status" + i })
                    </td>
                    <td>
                        @*               @Html.ActionLink("Edit", "Edit", new { id = item.PC_TAG }) |
                            @Html.ActionLink("Details", "Details", new { id = item.PC_TAG }) |
                            @Html.ActionLink("Delete", "Delete", new { id = item.PC_TAG })
                        *@
                    </td>
                </tr>
                i += 1;
            }
        }
    </table>

Chart

<html>
<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', { 'packages': ['timeline'] });
        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
            var container = document.getElementById('timeline');
            var chart = new google.visualization.Timeline(container);
            var dataTable = new google.visualization.DataTable();
            var i;

            for (i = 1; i <= 5; i++) {
                //var myTimeStamp = $.trim($('#TimeStamp' + i).val());
                //var myStatus = $.trim($('#Status' + i).val());
                var myTimeStamp = document.getElementById("TimeStamp"+i).value;
                var myStatus = document.getElementById("Status"+i).value;
                //console.log(myTimeStamp);
                //console.log(myStatus);
                //alert(myTimeStamp);
                //alert(myStatus);
            }

            dataTable.addColumn({ type: 'string', id: 'Status' });
            dataTable.addColumn({ type: 'date', id: 'Start' });
            dataTable.addColumn({ type: 'date', id: 'End' });
            dataTable.addRows([
              ['Status On', new Date(1797, 2, 4), new Date(1801, 2, 4)],
              ['Status Off', new Date(1801, 2, 4), new Date(1809, 2, 4)]]);

            chart.draw(dataTable);
        }
    </script>
</head>
<body>
    <div id="timeline" style="height: 180px;"></div>
</body>
</html>

I want to plot the TimeStamp and Status values on a graph and display it on a web page. Timestamp on x-axis and Status(On/OFF) on y-axis. There could be a year's worth of data here. What exactly do you mean by rendered html? — ARR

Nitin Kabra Nitin Kabra · Accepted Answer · 2019-07-09T19:43:38

<table class="table">
    <tr>
        <th>
            Rig Name
        </th>
        <th>
            TimeStamp
        </th>
        <th>
            Status
        </th>
        <th></th>
    </tr>
@{
int i=1;

   foreach (var item in Model)
     {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.PC_TAG)
            </td>
            <td>                           
                @Html.DisplayFor(modelItem => item.TIMESTAMP)
                @Html.HiddenFor(modelItem => item.TIMESTAMP, new { id = "TimeStamp" + i })
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.STATUS)
                @Html.HiddenFor(modelItem => item.STATUS, new { id = "Status" + i })
            </td>               
        </tr>
         i += 1;
    }
}

@Html.DisplayFor() only renders text, you have to create an element to access that data.

How to capture @Html.DisplayFor data and pass it on to a javascript/jQuery section of code?

Chart

1 Answers