how to bind data with binary image in jquery datatables using ajax jsonbelow is the code with datatablelthtml xmlns34httpwwww3org1999xhtml34gtlthead runat34server34gt lttitlegtlttitlegt ltscript src34codejquerycomjquery1111minjs34gtltscriptgt ltlink rel34stylesheet34 type34textcss34 href34cdndatatablesnet1107cssjquerydataTablesmincss34 gt ltscript type34textjavascript

Hi jovcekaCheck this example Now please take its reference and correct your codeFor this example i have used table named tblFiles whose schema is defined as followsFor save record in databse refer below articleSave and Retrieve images from database in ASPNetHTMLltscript type34textjavascript34 src34httpscodejquerycomjquery1111minjs34gtltscriptgtltlink rel34stylesheet34 type34textcss34 href34httpscdndatatablesnet1107cssjquerydataTablesmincss34 gtltscript type34textjavascript34 src34httpscdndatatablesnet1107jsjquerydataTablesminjs34gtltscriptgtltscript type34textjavascript34gt documentreadyfunction ajax url 39lt PageResolveUrl34WebServiceasmxGetFiles34gt39 method 39post39 dataType 39json39 success function data 39datatable3

Display binary Images inside jQuery DataTable using Ajax JSON in ASP.Net

jovceka

SOLVED CLOSED ACTIVE ANSWERED
User: jovceka
Posted: on Jun 27, 2019 06:55 AM
Forum: Data Controls
Answer: 1
Views: 15908
Sample Code: Download

how to bind data with binary image in jquery datatables using ajax json

below is the code with datatable.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
   <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <link rel="stylesheet" type="text/css"
        href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" />
    <script type="text/javascript" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
               url: "/WebService.asmx/GetEmployees",
                method: 'post',
                dataType: 'json',
                success: function (data) {
                    $('#datatable').dataTable({
                        paging: true,
                        sort: true,
                        searching: true,
                        //scrollY: 200,
                        data: data,
                        columns: [
                            { 'data': 'Id' },
                            { 'data': 'FirstName' },
                            { 'data': 'LastName' },
                            { 'data': 'Gender' },
                            { 'data': 'JobTitle' },
                            {
                                'data': 'WebSite',
                                'sortable': false,
                                'searchable': false,
                                'render': function (webSite) {
                                    if (!webSite) {
                                        return 'N/A';
                                    }
                                    else {
                                        return '<a href=' + webSite + '>'
                                            + webSite.substr(0, 10) + '...' + '</a>';
                                    }
                                }
                            },
                            {
                                'data': 'Salary',
                                'render': function (salary) {
                                    return "$" + salary;
                                }
                            },
                            {
                                'data': 'HireDate',
                                'render': function (jsonDate) {
                                    var date = new Date(parseInt(jsonDate.substr(6)));
                                    var month = date.getMonth() + 1;
                                    return month + "/" + date.getDate() + "/" + date.getFullYear();
                                }
                            }
                        ]
                    });
                }
            });
        });
    </script>
</head>
<body style="font-family: Arial">
    <form id="form1" runat="server">
        <div style="width: 900px; border: 1px solid black; padding: 3px">
            <table id="datatable">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Gender</th>
                        <th>Job Title</th>
                        <th>Web Site</th>
                        <th>Salary</th>
                        <th>Hire Date</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>Id</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Gender</th>
                        <th>Job Title</th>
                        <th>Web Site</th>
                        <th>Salary</th>
                        <th>Hire Date</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </form>
</body>
</html>

    public class Employee
    {
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Gender { get; set; }
        public string JobTitle { get; set; }
        public string WebSite { get; set; }
        public int Salary { get; set; }
        public DateTime HireDate { get; set; }
    }
    [System.Web.Services.WebMethod]
        public void GetEmployees()
        {
            string cs = ConfigurationManager.ConnectionStrings["conn"].ConnectionString;
            List<Employee> employees = new List<Employee>();
            using (SqlConnection con = new SqlConnection(cs))
            {
                SqlCommand cmd = new SqlCommand("spGetEmployees11", con);
                cmd.CommandType = CommandType.StoredProcedure;
                con.Open();
                SqlDataReader rdr = cmd.ExecuteReader();
                while (rdr.Read())
                {
                    Employee employee = new Employee();
                    employee.Id = Convert.ToInt32(rdr["Id"]);
                    employee.FirstName = rdr["FirstName"].ToString();
                    employee.LastName = rdr["LastName"].ToString();
                    employee.Gender = rdr["Gender"].ToString();
                    employee.JobTitle = rdr["JobTitle"].ToString();
                    employee.WebSite = rdr["WebSite"].ToString();
                    employee.Salary = Convert.ToInt32(rdr["Salary"]);
                    employee.HireDate = Convert.ToDateTime(rdr["HireDate"]);
                    employees.Add(employee);
                }
            }
            JavaScriptSerializer js = new JavaScriptSerializer();
            Context.Response.Write(js.Serialize(employees));
        }

create procedure [dbo].[spGetEmployees11]
as
Begin
    Select * from tblEmployees1
End

dharmend...

0 3

Reply
ANSWER
User: dharmendr
Replied: on Jun 28, 2019 01:40 AM
Report

Hi jovceka,

Check this example. Now please take its reference and correct your code.

For this example i have used table named tblFiles whose schema is defined as follows.

For save record in databse refer below article.

HTML

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            url: '<%= Page.ResolveUrl("~/WebService.asmx/GetFiles")%>',
            method: 'post',
            dataType: 'json',
            success: function (data) {
                $('#datatable').dataTable({
                    paging: true,
                    sort: true,
                    pageLength: 3,
                    searching: true,
                    data: data,
                    columns: [
                        { 'data': 'Id' },
                        { 'data': 'Name' },
                        {
                            'data': 'Data',
                            'sortable': false,
                            'searchable': false,
                            'render': function (Data) {
                                if (!Data) {
                                    return 'N/A';
                                } else {
                                    var img = 'data:image/png;base64,' + Data;
                                    return '<img src="' + img + '" height="50px" width="50px" />';
                                }
                            }
                        }
                    ]
                });
            }, error: function (response) {
                alert(response.responseText);
            }
        });
    });
</script>
<div style="width: 100%; border: 1px solid black; padding: 3px">
    <table id="datatable">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Image</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Image</th>
            </tr>
        </tfoot>
    </table>
</div>

WebService

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using System.Web.Services;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
    public class File
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Data { get; set; }
    }

    [WebMethod]
    public void GetFiles()
    {
        string cs = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        List<File> files = new List<File>();
        using (SqlConnection con = new SqlConnection(cs))
        {
            SqlCommand cmd = new SqlCommand("SELECT id,Name,Data FROM tblFiles WHERE ContentType = 'image/jpeg'", con);
            cmd.CommandType = CommandType.Text;
            con.Open();
            SqlDataReader rdr = cmd.ExecuteReader();
            while (rdr.Read())
            {
                File file = new File();
                file.Id = Convert.ToInt32(rdr["id"]);
                file.Name = rdr["Name"].ToString();
                file.Data = Convert.ToBase64String((byte[])rdr["Data"]);
                files.Add(file);
            }
        }
        JavaScriptSerializer js = new JavaScriptSerializer();
        Context.Response.Write(js.Serialize(files));
    }
}

VB.Net

Imports System.Web
Imports System.Collections.Generic
Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.Script.Serialization
Imports System.Web.Services
Imports System.Web.Services.Protocols

' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
<System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class WebService
    Inherits System.Web.Services.WebService

    Public Class File
        Public Property Id As Integer
        Public Property Name As String
        Public Property Data As String
    End Class

    <WebMethod()> _
    Public Sub GetFiles()
        Dim cs As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Dim files As List(Of File) = New List(Of File)()
        Using con As SqlConnection = New SqlConnection(cs)
            Dim cmd As SqlCommand = New SqlCommand("SELECT id,Name,Data FROM tblFiles WHERE ContentType = 'image/jpeg'", con)
            cmd.CommandType = CommandType.Text
            con.Open()
            Dim rdr As SqlDataReader = cmd.ExecuteReader()
            While rdr.Read()
                Dim file As File = New File()
                file.Id = Convert.ToInt32(rdr("id"))
                file.Name = rdr("Name").ToString()
                file.Data = Convert.ToBase64String(CType(rdr("Data"), Byte()))
                files.Add(file)
            End While
        End Using
        Dim js As JavaScriptSerializer = New JavaScriptSerializer()
        Context.Response.Write(js.Serialize(files))
    End Sub
End Class

Screenshot

Display binary Images inside jQuery DataTable using Ajax JSON in ASP.Net

Save and Retrieve images from database in ASP.Net

Company

Explore

Follow us

Contact Us