2013-03-21 95 views
0

我已经开发了一个带有signalr的ASP.NET MVC应用程序来显示页面上的记录。 我的表有五列(作业ID [INT],名[VARCHAR],lastexecutiondate [日期时间],状态[INT],IMAGEURL [字符串])显示图像而不是URL

下面是从视图页我的标记:

<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获取数据。

回答

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" 
     } 
} 
+0

+1为我工作..只是为了学习的目的,你可以建议我如何在运行时生成URL。 例如:如果状态= 1,那么URL =“some.jpg” 如果status = 2,那么url =“someother.jpg” else“blank.jpg” – Zerotoinfinity 2013-03-21 19:38:10

+1

当然,我把一些想法放在回答你。 PS - 我的JS开关实现语法不是100%我的头顶 – Tommy 2013-03-21 19:45:13

+0

你真棒。我已经实现了,它工作得很好。感谢您的帮助:) – Zerotoinfinity 2013-03-21 19:51:06