0

ページにレコードを表示するために、signalr を使用して ASP.NET MVC アプリケーションを開発しました。テーブルには 5 つの列があります (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 に答える