I have converted binary data of the image to the text form But I need to convert the text data to an image can I have a solution for that using angularjs in aspnetlt Page Language34C34 AutoEventWireup34true34 CodeFile34imagev2aspxcs34 Inherits34imagev234 gtltDOCTYPE htmlgtlthtml xmlns34httpwwww3org1999xhtml34gtlthead runat34server34gt lttitlegtlttitlegt ltscript src34httpsajaxgoogleapiscomajax

Hi skpCheck this example Now please take its reference and correct your codeUsing the below article i have created the exampleSave and Retrieve Image from SQL Server Database in ASPNet MVCHTMLltform id34form134 runat34server34gtltscript type34textjavascript34 src34httpsajaxgoogleapiscomajaxlibsjquery191jqueryminjs34gtltscriptgtltscript type34textjavascript34 src34httpsajaxgoogleapiscomajaxlibsangularjs143angularminjs34gtltscriptgtltlink rel34stylesheet34 type34textcss34 href34httpscdnjscloudflarecomajaxlibstwitterbootstrap335cssbootstrapmincss34 gtltscript type34textjavascript34gt var app angularmodule39MyApp39 appcontroller34MyController34 function scope http window GetImages0 scopeSearch function var id scopeid GetImagesid

Hi skpRefer below codeHTMLlthtml xmlns34httpwwww3org1999xhtml34gtlthead runat34server34gt lttitlegtlttitlegt ltscript type34textjavascript34 src34httpsajaxgoogleapiscomajaxlibsangularjs125angularminjs34gtltscriptgt ltscript type34textjavascript34gt angularmodule34myapp34 controller34MyController34 function scope http scopemyData scopemyDatadoClick function item event httppost39DefaultaspxGetEmployees39 data successfunction data status headers config var result JSONparsedatad scopemyDatafromServer resultTable errorfunction data status headers config scopestatus status

Retrieve and display Binary Image from database using AngularJS in ASP.Net

skp

SOLVED CLOSED ACTIVE ANSWERED
User: skp
Posted: on Mar 18, 2019 02:54 AM
Forum: AngularJS
Answer: 2
Views: 13747

I have converted binary data of the image to the text form. But, I need to convert the text data to an image, can I have a solution for that using angularjs in asp.net

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="imagev2.aspx.cs" Inherits="imagev2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myapp">
    <div ng-controller="MyController">
        <button ng-click="myData.doClick(item, $event)">Send AJAX Request</button>
        <br />
        Data from server: {{myData.fromServer}}
    </div>
    <script>
        angular.module("myapp", [])
            .controller("MyController", function ($scope, $http) {
                $scope.myData = {};
                $scope.myData.doClick = function (item, event) {
                    $http.post('imagev2.aspx/GetEmployees', { data: {} })
                      .success(function (data, status, headers, config) {
                          $scope.myData.fromServer = data.d;
                      })
                      .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>
</body>
</html>

using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;

public partial class imagev2 : System.Web.UI.Page
{
    [WebMethod]
    public static string GetEmployees()
    {        
        SqlCommand cmd = new SqlCommand();
        SqlConnection conn = new SqlConnection(@"Data Source=STAGINGSERVER;Initial Catalog=INVOICE;Persist Security Info=True;User ID=sa;Password=tEknomec@1993");
        DataSet ds = new DataSet();

        try
        {
            conn.Open();
            ds = new DataSet();
            cmd = new SqlCommand("GETDATA", conn);
            cmd.CommandType = CommandType.StoredProcedure;
            SqlDataAdapter ad = new SqlDataAdapter(cmd);
            ad.Fill(ds);
        }
        catch (Exception ex)
        {
            throw ex;
        }
        finally
        {
            cmd.Dispose();
            conn.Close();
            conn.Dispose();
        }
        return JsonConvert.SerializeObject(ds);
    }

}

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 10

Reply
ANSWER
User: dharmendr
Replied: on Mar 20, 2019 01:39 AM
Report

Hi skp,

Refer below code.

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', { 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">
    <form id="form1" runat="server">
    <div ng-controller="MyController">
        <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

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

Code

[WebMethod]
public static string GetEmployees()
{
    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("GETDATA", conn);
        cmd.CommandType = CommandType.StoredProcedure;
        SqlDataAdapter ad = new SqlDataAdapter(cmd);
        ad.Fill(ds);
    }
    catch (Exception ex)
    {
        throw ex;
    }
    finally
    {
        cmd.Dispose();
        conn.Close();
        conn.Dispose();
    }

    return JsonConvert.SerializeObject(ds);
}

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Retrieve and display Binary Image from database using AngularJS in ASP.Net

Company

Explore

Follow us

Contact Us