时间戳

首页 > 解决方案 > 如何捕获 @Html.DisplayFor 数据并将其传递给 javascript/jQuery 代码部分？

javascript - 如何捕获 @Html.DisplayFor 数据并将其传递给 javascript/jQuery 代码部分？

问题描述

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

1）我正在尝试将 TIMESTAMP 和 STATUS 数据从 Razor HTML 传递到我的 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>

标签： javascriptc#jqueryhtml

解决方案

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

推荐阅读