Populate (Fill) multiple TextBox based on DropDownList selection using AngularJS in ASP.Net

Last Reply 10 months ago By dharmendr

Posted 10 months ago

How to bind multiple textboxes based on dropdownlist in asp.net using angularjs

Posted 10 months ago Modified on 10 months ago

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