How to populate Dropdownlist from database using AngularJS ng-options Attribute

Introduction:

In this article I am going to explain how to populate dropdownlist control from database using AngularJS. AngularJS lets you extend HTML vocabulary for your application.

Prerequisites:

You need to add the necessary AngularJS files to your page prior to use this plugin. You can either download the file from here and add to your project or use the AngularJS file directly from CDN.

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

Implementation:

Here we are make use of Jquery Ajax post method to get the record from database and then pass it to dropdownlist. We will be using $http service function which communicates via the browser’s XMLHttpRequest object or via JSONP.

AngularJS code to populate the dropdownlist.

<script type="text/javascript">
        angular.module('drpdwnApp', []).controller('drpdwnCtrl', function ($scope, $http) {
            $scope.ProductList = null;
            //Declaring the function to load data from database
            $scope.fillProductList = function () {
                $http({
                    method: 'POST',
                    url: 'AngularCascadingDropDownList.aspx/GetProductList',
                    data: {}
                }).success(function (result) {
                    $scope.ProductList = result.d;
                });
            };
            //Calling the function to load the data on pageload
            $scope.fillProductList();
        });
    </script>

Now we will use the ng-options attribute to generate option for dropdownlist from the passed data.

    <div ng-app="drpdwnApp" ng-controller="drpdwnCtrl">
        <select ng-model="drpdpwnvalue" ng-options="item.OrderID for item in ProductList">
            <option value="" label="Select and item"></option>
        </select>
    </div>

HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script type="text/javascript">
        angular.module('drpdwnApp', []).controller('drpdwnCtrl', function ($scope, $http) {
            $scope.ProductList = null;
            //Declaring the function to load data from database
            $scope.fillProductList = function () {
                $http({
                    method: 'POST',
                    url: 'AngularCascadingDropDownList.aspx/GetProductList',
                    data: {}
                }).success(function (result) {
                    $scope.ProductList = result.d;
                });
            };
            //Calling the function to load the data on pageload
            $scope.fillProductList();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div ng-app="drpdwnApp" ng-controller="drpdwnCtrl">
        <select ng-model="drpdpwnvalue" ng-options="item.OrderID for item in ProductList">
            <option value="" label="Select and item"></option>
        </select>
    </div>
    </form>
</body>
</html>

C#:

[System.Web.Services.WebMethod()]
        public static List<OrderList> GetProductList()
        {
            List<OrderList> list = new List<OrderList>();
            using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["NORTHWINDConnectionString"].ConnectionString))
            {
                conn.Open();
                string strquery = "Select TOP 10 * from Orders";
                using (SqlCommand cmd = new SqlCommand(strquery, conn))
                {
                    SqlDataReader reader = cmd.ExecuteReader();
                    while (reader.Read())
                    {
                        OrderList objorder = new OrderList(int.Parse(reader["OrderID"].ToString()), reader["ShipAddress"].ToString(), reader["ShipName"].ToString(), double.Parse(reader["Freight"].ToString()));
                        list.Add(objorder);
                    }
                }
 
            }
            return list;
        }
 
        public class OrderList
        {
            public int OrderID;
            public string ShipName;
            public string ShipAddress;
            public double Freight;
            public OrderList(int orderID, string shipName, string shipAddress, double freight)
            {
                OrderID = orderID;
                ShipName = shipName;
                ShipAddress = shipAddress;
                Freight = freight;
            }
        }
Advertisements

, , , ,

  1. #1 by dineshramitc on August 13, 2015 - 3:47 am

    Reblogged this on Dinesh Ram Kali..

    Like

  2. #2 by Vijay Saklani on June 15, 2016 - 5:47 am

    Nice article..

    Like

  3. #3 by Omarr Syed on November 16, 2016 - 8:54 pm

    This doesn’t work!

    Like

    • #4 by A2H on November 20, 2016 - 5:12 pm

      Hello Omar,

      I have tried the code before posting it here and it was working perfecly. You may need to double check if you have any script errors and the files are referenced properly.

      Like

  1. Cascading Dropdownlist using AngularJs in Asp.Net | AspdotnetCodehelp

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: