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

Last Reply 5 months ago By dharmendr

Posted 5 months ago

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

Posted 5 months ago Modified on 5 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