Hi rani,
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
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("MyApp", []);
app.controller("MyController", ['$scope', '$http', function ($scope, $http) {
GetCategory();
$scope.IsDisabled = true;
$scope.GetProducts = function () {
if ($scope.CategoryName != null) {
$http.post("Default.aspx/GetProducts", { category: $scope.CategoryName }, { headers: { 'Content-Type': 'application/json'} })
.then(function (response) {
$scope.ProductName1 = eval(response.data.d)[0] != undefined ? eval(response.data.d)[0].ProductName : "";
$scope.ProductName2 = eval(response.data.d)[1] != undefined ? eval(response.data.d)[1].ProductName : "";
$scope.ProductName3 = eval(response.data.d)[2] != undefined ? eval(response.data.d)[2].ProductName : "";
}, function error(response) { });
}
else {
$scope.ProductName1 = "";
$scope.ProductName2 = "";
$scope.ProductName3 = "";
}
$scope.IsDisabled = $scope.CategoryName == null ? true : false;
}
function GetCategory() {
$scope.categories = [];
$http.post("Default.aspx/GetCategories", { headers: { 'Content-Type': 'application/json'} })
.then(function (response) {
$scope.categories = eval(response.data.d);
}, function error(response) { });
}
} ]);
</script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
<form id="form1" runat="server">
<div class="form-horizontal">
<div class="form-row">
<div class="col-md-3">
<label for="CategoryName">Category</label>
<select class="form-control" id="CategoryName" ng-change="GetProducts()" ng-model="CategoryName"
ng-options="c.CategoryId as c.CategoryName for c in categories">
<option value="">Select Item</option>
</select>
<br />
<label for="ProductName1">Product 1</label>
<input type="text" ng-model="ProductName1" ng-disabled="IsDisabled" class="form-control" />
<br />
<label for="ProductName2">Product 2</label>
<input type="text" ng-model="ProductName2" ng-disabled="IsDisabled" class="form-control" />
<br />
<label for="ProductName3">Product 3</label>
<input type="text" ng-model="ProductName3" ng-disabled="IsDisabled" class="form-control" />
</div>
</div>
</div>
</form>
</body>
</html>
Namespaces
C#
using System.Web.Script.Serialization;
using System.Web.Services;
VB.Net
Imports System.Web.Script.Serialization
Imports System.Web.Services
Code
C#
[WebMethod]
public static string GetCategories()
{
NorthwindEntities entities = new NorthwindEntities();
var categories = entities.Categories
.Select(x => new
{
CategoryId = x.CategoryID,
CategoryName = x.CategoryName
}).ToList();
return (new JavaScriptSerializer().Serialize(categories));
}
[WebMethod]
public static string GetProducts(int category)
{
NorthwindEntities entities = new NorthwindEntities();
var products = entities.Products
.Where(x => x.CategoryID == category).Take(3)
.Select(x => new
{
ProductID = x.ProductID,
ProductName = x.ProductName
}).ToList();
return (new JavaScriptSerializer().Serialize(products));
}
VB.Net
<WebMethod()>
Public Shared Function GetCategories() As String
Dim entities As NorthwindEntities = New NorthwindEntities()
Dim categories = entities.Categories.Select(Function(x) New With {
.CategoryId = x.CategoryID,
.CategoryName = x.CategoryName
}).ToList()
Return (New JavaScriptSerializer().Serialize(categories))
End Function
<WebMethod()>
Public Shared Function GetProducts(ByVal category As Integer) As String
Dim entities As NorthwindEntities = New NorthwindEntities()
Dim products = entities.Products.Where(Function(x) x.CategoryID = category).Take(3).Select(Function(x) New With {
.ProductID = x.ProductID,
.ProductName = x.ProductName
}).ToList()
Return (New JavaScriptSerializer().Serialize(products))
End Function
Screenshot
