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

Last Reply one year ago By dharmendr

Posted one year 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 one year ago Modified on one year 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