Question

我开发了一个带有signalr的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();

我想显示图片而不是网址。

Answer 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"
   }
}

我不太了解你的代码，所以这假设你的select没有被强制转换为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"
       }
}

显示图片而不是URL

1 个答案: