Hi rani,
Check this example. Now please take its reference and correct your code.
Database
I have made use of the following table tblFilesPath with the schema as follows.
I have already inserted few records in the table.
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.0/angular.js"></script>
<script type="text/javascript" src="https://rawgithub.com/vivendi/angular-datatables/master/src/angular-datatables.js"></script>
<script type="text/javascript" src="https://rawgithub.com/vivendi/angular-datatables/master/src/angular-datatables.directive.js"></script>
<script type="text/javascript" src="https://rawgithub.com/vivendi/angular-datatables/master/src/angular-datatables.factory.js"></script>
<script type="text/javascript" src="https://rawgithub.com/vivendi/angular-datatables/master/src/angular-datatables.bootstrap.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', ['datatables'])
app.controller('MyController', function ($scope, $http, $window) {
$http.post("Default.aspx/GetFiles", { headers: { 'Content-Type': 'application/json'} })
.then(function (response) {
$scope.Files = JSON.parse(response.data.d);
}, function (response) {
$window.alert(response.responseText);
});
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<div class="table table-bordered">
<table datatable="ng" class="table table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Image</th>
</tr>
</thead>
<tbody>
<tr dt-rows ng-repeat="file in Files">
<td>{{file.Id}}</td>
<td>{{file.Name}}</td>
<td><img ng-src="{{file.Path}}" alt="{{file.Name}}.jpg" style="height: 100px; width: 100px" /></td>
</tr>
</tbody>
</table>
</div>
</div>
Namespaces
C#
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using System.Web.Services;
VB.Net
Imports System.Configuration
Imports System.Data.SqlClient
Imports System.Web.Script.Serialization
Imports System.Web.Services
Code
C#
[WebMethod]
public static string GetFiles()
{
List<object> files = new List<object>();
string sql = "SELECT Id,Name,Path FROM tblFilesPath";
using (SqlConnection conn = new SqlConnection())
{
conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlCommand cmd = new SqlCommand(sql))
{
cmd.Connection = conn;
conn.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
files.Add(new
{
Id = sdr["Id"],
Name = sdr["Name"],
Path = sdr["Path"]
});
}
}
conn.Close();
}
return (new JavaScriptSerializer().Serialize(files));
}
}
VB.Net
<WebMethod()>
Public Shared Function GetFiles() As String
Dim files As List(Of Object) = New List(Of Object)()
Dim sql As String = "SELECT Id,Name,Path FROM tblFilesPath"
Using conn As SqlConnection = New SqlConnection()
conn.ConnectionString = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using cmd As SqlCommand = New SqlCommand(sql)
cmd.Connection = conn
conn.Open()
Using sdr As SqlDataReader = cmd.ExecuteReader()
While sdr.Read()
files.Add(New With {
.Id = sdr("Id"),
.Name = sdr("Name"),
.Path = sdr("Path")
})
End While
End Using
conn.Close()
End Using
Return (New JavaScriptSerializer().Serialize(files))
End Using
End Function
Screenshot