0

我开发了一个带有信号器的 ASP.NET MVC 应用程序来在页面上显示记录。我的表有五列（jobid [int]、name[varchar]、lastexecutiondate[datetime]、status[int]、imageurl[string]）

这是我查看页面的标记：

 <script type="text/javascript">

    $(function () {

        // Proxy created on the fly
        var job = $.connection.jobHub;

        // Declare a function on the job hub so the server can invoke it
        job.client.displayStatus = function () {
            getData();
        };

        // Start the connection
        $.connection.hub.start();
        getData();
    });

    function getData() {
        var $tbl = $('#tblJobInfo');
        $.ajax({
            url: '../api/values',
            type: 'GET',
            datatype: 'json',
            success: function (data) {
                if (data.length > 0) {
                    $tbl.empty();
                    $tbl.append(' <tr><th>ID</th><th>Name</th><th>Last Executed Date</th><th>Status</th><th>Image URL</th></tr>');
                    var rows = [];
                    for (var i = 0; i < data.length; i++) {
                        rows.push(' <tr><td>' + data[i].JobID + '</td><td>' + data[i].Name + '</td><td>' + data[i].LastExecutionDate.toString().substr(0, 10) + '</td><td>' + data[i].Status + '</td><td>' + data[i].imageurl + '</td></tr>');
                    }
                    $tbl.append(rows.join(''));
                }
            }
        });
    }
</script>
</head>
<body>
    <div>
        <table id="tblJobInfo" style="text-align:center;margin-left:10px">
        </table>
    </div>
</body>

下面是我从数据库中获取数据的代码

SqlDependency.Start(connection.ConnectionString);
                using (var reader = command.ExecuteReader())
                    return reader.Cast<IDataRecord>()
                        .Select(x => new JobInfo()
                        {
                            JobID = x.GetInt32(0),
                            Name = x.GetString(1),
                            LastExecutionDate = x.GetDateTime(2),
                            Status = x.GetString(3),
                            imageurl = x.GetString(4)
                        }).ToList();

我想显示图像而不是 URL。

4

1 回答 1

1

您应该只需要在 JavaScript 表格行函数中创建一个图像标签：

for (var i = 0; i < data.length; i++) {
   rows.push(' <tr><td>' + data[i].JobID + '</td><td>' + data[i].Name + '</td><td>' + data[i].LastExecutionDate.toString().substr(0, 10) + '</td><td>' + data[i].Status + '</td><td><img src="' + data[i].imageurl + '"/></td></tr>');
}

我可以想出几种方法来解决您在下面的评论。在代码中，创建一个辅助函数来为您执行此操作：

SqlDependency.Start(connection.ConnectionString);
                using (var reader = command.ExecuteReader())
                    return reader.Cast<IDataRecord>()
                        .Select(x => new JobInfo()
                        {
                            JobID = x.GetInt32(0),
                            Name = x.GetString(1),
                            LastExecutionDate = x.GetDateTime(2),
                            Status = x.GetString(3),
                            imageurl = GetImageUrl(x.GetString(3))
                        }).ToList();

private string GetImageUrl(int status){
   switch(status){
     case 1:
        return "some.jpg"
     case 2:
        return "someother.jpg"
     default:
        return "blank.jpg"
   }
}

我不太了解您的代码，所以这假设您的选择没有被强制转换为 SQL 语句（它似乎不是这样）。

要在客户端做同样的事情，您可以将 GetImageUrl 函数实现为 JavaScript 函数并实现相同类型的事情。 

for (var i = 0; i < data.length; i++) {
   rows.push(' <tr><td>' + data[i].JobID + '</td><td>' + data[i].Name + '</td><td>' + data[i].LastExecutionDate.toString().substr(0, 10) + '</td><td>' + data[i].Status + '</td><td><img src="' + GetImageUrl(data[i].Status) + '"/></td></tr>');
}

function GetImageUrl(status){
  switch(status){
         case 1:
            return "some.jpg"
         case 2:
            return "someother.jpg"
         default:
            return "blank.jpg"
       }
}
于 2013-03-21T19:23:49.203 回答