如何捕获 @Html.DisplayFor 数据并将其传递给 javascript/jQuery 代码段？答案

【问题标题】：How to capture @Html.DisplayFor data and pass it on to a javascript/jQuery section of code?如何捕获 @Html.DisplayFor 数据并将其传递给 javascript/jQuery 代码段？
【发布时间】：2019-07-09 14:12:19
【问题描述】：

我想为从数据库读取的一组数据实现一个图形图表并将其显示在网页上。有一些代码正在从数据库中读取数据。该代码是我以前从未使用过的 C# 和 Razor HTML 的组合。

1) 我正在尝试将 Razor HTML 中的 TIMESTAMP 和 STATUS 数据传递给我的 javascript，并在 javascript 中获取我的图表实现代码。

2) 还有什么是实现图表的最新和最好的方法？我查看了互联网上的各种选项，并决定在 javascript 中实现。我可以在这里寻求帮助吗？

我尝试给 @Html.DisplayFor 一个类似的 id @Html.DisplayFor(modelItem => item.TIMESTAMP, new { id = "TimeStamp" + i })

它抱怨 int i;我有代码。

我还尝试在@Html.DisplayFor 周围添加跨度

为了实现图表，我查看了 jquery 图表和 google api 图表。真的不知道什么最适合我。

代码如下：

@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>

图表

<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>

【问题讨论】：

我想在图表上绘制时间戳和状态值并将其显示在网页上。 x 轴上的时间戳和 y 轴上的状态（开/关）。这里可能有一年的数据。渲染的 html 到底是什么意思？

标签： javascript c# jquery html

【解决方案1】：

<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() 只呈现文本，您必须创建一个元素来访问该数据。

【讨论】：

嗨尼丁，谢谢。您的解决方案解决了我无法识别变量“i”的问题。我仍然无法将 TimeStamp 和 Status 值传递给我的 javascript。
我已经在我的原始帖子中编辑了代码。我正在尝试将时间戳和状态值从 c#/Razor HTML 传递到我的 javascript，然后我将使用它在图表上绘制。
谢谢你的工作。但是你能解释一下为什么我必须这样做吗？
如回答中所说，@Html.DisplayFor() 仅呈现文本，您必须使用该值创建一个 HTML 元素，以便稍后访问该数据。
好的，我现在明白了。还有一个问题，如何将 'i' 的最后一个值传递给我的 javascript。？