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.
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
