Hi carocoding,
Please refer below sample.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
HTML
Default
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="AnguAutoComplete/angucomplete-alt.js"></script>
<link href="AnguAutoComplete/angucomplete-alt.css" rel="stylesheet" />
<script type="text/javascript">
var app = angular.module('MyApp', ['angucomplete-alt'])
app.controller('MyController', function ($scope, $http, $window) {
$scope.Customers = null;
$scope.SelectedCustomer = null;
$scope.Send = function () {
var url = "Home.aspx?Name=" + encodeURIComponent($scope.SelectedCustomer.title);
$window.location.href = url;
};
var post = $http({
method: "POST",
url: "Default.aspx/GetCustomers",
dataType: 'json',
data: {},
headers: { "Content-Type": "application/json" }
});
post.success(function (data, status) {
$scope.Customers = data.d;
});
post.error(function (data, status) {
$window.alert(data.message);
});
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<div angucomplete-alt id="txtCustomers" runat="server" style="width: 100%" placeholder="ContactName" pause="100"
selected-object="SelectedCustomer" local-data="Customers" search-fields="ContactName"
title-field="ContactName" minlength="1" input-class="form-control" match-class="highlight">
</div>
<br />
<hr />
Select Customer: {{SelectedCustomer.title}}
<br />
<input type="button" value="Send" ng-click="Send()" />
</div>
Home
<script type="text/javascript">
window.onload = function () {
var queryString = new Array();
if (window.location.search.split('?').length > 1) {
var params = window.location.search.split('?')[1].split('&');
for (var i = 0; i < params.length; i++) {
var key = params[i].split('=')[0];
var value = decodeURIComponent(params[i].split('=')[1]);
queryString[key] = value;
}
}
if (queryString['Name'] != null) {
document.getElementById("lblData").innerHTML = queryString['Name'];
}
}
</script>
<asp:Label ID="lblData" runat="server"></asp:Label>
Namespaces
C#
using System.Web.Services;
using System.Configuration;
using System.Data.SqlClient;
VB.Net
Imports System.Web.Services
Imports System.Configuration
Imports System.Data.SqlClient
Code
C#
Default
[WebMethod]
public static List<object> GetCustomers()
{
string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(conString))
{
using (SqlCommand cmd = new SqlCommand("SELECT ContactName From Customers", con))
{
List<object> customers = new List<object>();
con.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
customers.Add(new { ContactName = sdr["ContactName"] });
}
}
con.Close();
return customers;
}
}
}
VB.Net
Default
<WebMethod>
Public Shared Function GetCustomers() As List(Of Object)
Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As SqlConnection = New SqlConnection(conString)
Using cmd As SqlCommand = New SqlCommand("SELECT ContactName From Customers", con)
Dim customers As List(Of Object) = New List(Of Object)()
con.Open()
Using sdr As SqlDataReader = cmd.ExecuteReader()
While sdr.Read()
customers.Add(New With {Key _
.ContactName = sdr("ContactName")
})
End While
End Using
con.Close()
Return customers
End Using
End Using
End Function
Screenshot