Hi skp,
Check this example. Now please take its reference and correct your code.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
Here i have used SplitString function. You can refer below article for more details.
HTML
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script type="text/javascript">
var app = angular.module("MyApp", []);
app.controller("MyController", function ($scope, $http) {
$scope.Cities = [{ Name: "Kirkland" }, { Name: "London" },
{ Name: "Redmond" }, { Name: "Seattle" }, { Name: "Tacoma"}];
$scope.Search = function () {
var cities = [];
for (var i = 0; i < $scope.Cities.length; i++) {
if ($scope.Cities[i].hasChecked) {
cities.push($scope.Cities[i].Name);
}
}
$http.post("Default.aspx/GetEmployees", JSON.stringify({ cities: cities }), {
headers: { 'Content-Type': 'application/json' }
}).then(function (response) {
$scope.Employees = eval(response.data.d);
});
}
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<table>
<tr ng-repeat="city in Cities">
<td><input type="checkbox" ng-change="Search()" ng-model="city.hasChecked" /></td>
<td style="padding-left: 5px">{{city.Name}}</td>
</tr>
</table>
<br />
<table>
<tr>
<th>Id</th>
<th>Name</th>
<th>City</th>
</tr>
<tr ng-repeat="employee in Employees">
<td>{{employee.EmployeeId}}</td>
<td>{{employee.Name}}</td>
<td>{{employee.City}}</td>
</tr>
</table>
</div>
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(string[] cities)
{
string jsonString = "";
string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
string query = "SELECT EmployeeId,FirstName+' '+LastName Name,City FROM Employees WHERE City IN (SELECT Item FROM dbo.SplitString(@Cities, ','))";
SqlCommand cmd = new SqlCommand(query);
using (SqlConnection con = new SqlConnection(conString))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
cmd.Parameters.AddWithValue("@Cities", string.Join(",", cities));
sda.SelectCommand = cmd;
using (DataTable dt = new DataTable())
{
sda.Fill(dt);
jsonString = JsonConvert.SerializeObject(dt);
}
}
}
return jsonString;
}
VB.Net
<WebMethod()> _
Public Shared Function GetEmployees(ByVal cities As String()) As String
Dim jsonString As String = ""
Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Dim query As String = "SELECT EmployeeId,FirstName+' '+LastName Name,City FROM Employees WHERE City IN (SELECT Item FROM dbo.SplitString(@Cities, ','))"
Dim cmd As SqlCommand = New SqlCommand(query)
Using con As SqlConnection = New SqlConnection(conString)
Using sda As SqlDataAdapter = New SqlDataAdapter()
cmd.Connection = con
cmd.Parameters.AddWithValue("@Cities", String.Join(",", cities))
sda.SelectCommand = cmd
Using dt As DataTable = New DataTable()
sda.Fill(dt)
jsonString = JsonConvert.SerializeObject(dt)
End Using
End Using
End Using
Return jsonString
End Function
Screenshot