Search and display Binary Image from database based on Id using AngularJS in ASP.Net

Last Reply one year ago By dharmendr

Posted one year ago

How to display an image from a database after clicking search button when an user has entered the id in angularjs?

You are viewing reply posted by: dharmendr one year ago.
Posted one year ago Modified on one year ago

Hi skp,

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

Using the below article i have created the example.

Save and Retrieve Image from SQL Server Database in ASP.Net MVC

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
    <script type="text/javascript">
        angular.module("myapp", [])
            .controller("MyController", function ($scope, $http) {
                $scope.myData = {};
                $scope.myData.doClick = function (item, event) {
                    $http.post('Default.aspx/GetEmployees', JSON.stringify({ id: $scope.Id }))
                      .success(function (data, status, headers, config) {
                          var result = JSON.parse(data.d);
                          $scope.myData.fromServer = result.Table;
                      })
                      .error(function (data, status, headers, config) {
                          $scope.status = status;
                      });
                }
            }).config(function ($httpProvider) {
                $httpProvider.defaults.headers.post = {};
                $httpProvider.defaults.headers.post["Content-Type"] = "application/json; charset=utf-8";
            });
    </script>
</head>
<body ng-app="myapp">
    <form id="form1" runat="server">
    <div ng-controller="MyController">
        <input type="text" ng-model="Id" />
        <button type="button" ng-click="myData.doClick(item, $event)">
            Send AJAX Request</button>
        <br />
        <table class="table table-table-responsive">
            <thead>
                <tr><th>Image</th></tr>
            </thead>
            <tbody>
                <tr ng-repeat="image in myData.fromServer">
                    <td><img ng-src="{{'data:image/png;base64,'+image.Data}}" /></td>
                </tr>
            </tbody>
        </table>
    </div>
    </form>
</body>
</html>

Namespaces

C#

using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;
using Newtonsoft.Json;

VB.Net

Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.Services
Imports Newtonsoft.Json

Code

C#

[WebMethod]
public static string GetEmployees(int id)
{
    SqlCommand cmd = new SqlCommand();
    SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["constr"].ConnectionString);
    DataSet ds = new DataSet();
    try
    {
        conn.Open();
        ds = new DataSet();
        cmd = new SqlCommand("SELECT Data FROM tblFiles WHERE Id = @Id", conn);
        cmd.CommandType = CommandType.Text;
        cmd.Parameters.AddWithValue("@Id", id);
        SqlDataAdapter ad = new SqlDataAdapter(cmd);
        ad.Fill(ds);
    }
    catch (Exception ex)
    {
        throw ex;
    }
    finally
    {
        cmd.Dispose();
        conn.Close();
        conn.Dispose();
    }

    return JsonConvert.SerializeObject(ds);
}

VB.Net

<WebMethod()>
Public Shared Function GetEmployees(ByVal id As Integer) As String
    Dim cmd As SqlCommand = New SqlCommand()
    Dim conn As SqlConnection = New SqlConnection(ConfigurationManager.ConnectionStrings("constr").ConnectionString)
    Dim ds As DataSet = New DataSet()
    Try
        conn.Open()
        ds = New DataSet()
        cmd = New SqlCommand("SELECT Data FROM tblFiles WHERE Id = @Id", conn)
        cmd.CommandType = CommandType.Text
        cmd.Parameters.AddWithValue("@Id", id)
        Dim ad As SqlDataAdapter = New SqlDataAdapter(cmd)
        ad.Fill(ds)
    Catch ex As Exception
        Throw ex
    Finally
        cmd.Dispose()
        conn.Close()
        conn.Dispose()
    End Try

    Return JsonConvert.SerializeObject(ds)
End Function

Screenshot