Display Binary Image from database on TextBox Change using AngularJS in ASP.Net

Last Reply 8 months ago By dharmendr

Posted 8 months ago

I'm facing a problem in angularjs :

I have a textbox which contains employee_id with a search button. Whenever I search for an employee_id, it must display an image of that id. It works fine for the first time, but from the second time, the image is generated based on the employee_id without clicking on the search button.

I need the images to be displayed only after clicking the button for each and every input. 

Posted 8 months ago Modified on 8 months ago

Hi skp,

For automatic search without clicking search button you can use TextBox ng-change event.

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 id="Head1" 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) {
                if ($scope.Id != '') {
                    var data = JSON.stringify({ id: $scope.Id });
                    GetData(data);
                }
                else {
                    var data = JSON.stringify({ id: 0 });
                    GetData(data);
                }
            }

            $scope.IsVisible = false;
            $scope.ShowHide = function () {
                $scope.IsVisible = $scope.IsVisible ? false : true;
            }

            function GetData(data) {
                $http.post('Default.aspx/GetEmployees', data)
                .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">
    <div ng-controller="MyController">
        <input type="text" ng-model="Id" ng-change="myData.doClick(item, $event)" />
        <button type="button" ng-click="ShowHide()">Search</button>
        <br />
        <table ng-show="IsVisible">
            <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>
</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 OR @Id IS NULL", conn);
        cmd.CommandType = CommandType.Text;
        cmd.Parameters.AddWithValue("@Id", id > 0 ? id : (object)DBNull.Value);
        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 OR @Id IS NULL", conn)
        cmd.CommandType = CommandType.Text
        cmd.Parameters.AddWithValue("@Id", If(id > 0, id, CObj(DBNull.Value)))
        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