Saturday, 4 February 2017

Fill a dropdown list with data using Angularjs and a restful API

To FIll dropdown list using angularjs in different ways like static ,dynamic and using rest api as well

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="Scripts/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('sampleapp', [])
        app.controller('samplecontrol', function ($scope) {
            $scope.sample = [{
                id: '1',
                name: '-- select --'
            }, {
                id: '2',
                name: '.Net'
            }, {
                id: '3',
                name: 'Java'
            }, {
                id: '4',
                name: 'PHP'
            }, {
                id: '5',
                name: 'Angularjs'
            }, {
                id: '6',
                name: 'Nodejs'
            }];
        });
    </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">
        Select Name:
        <select class="form-control-small"
                ng-model="view.activeResource.ValueType">
            <option value="0">Test</option>
            <option value="2">Test2</option>
            <option value="1">Test3</option>
        </select>

Fill a dropdown list with data using Angularjs and a restful API
Fill dropdownlist using angularjs

        <br />
        <br />
        <br />
        <br />
        <!--<div data-ng-app="sampleapp" data-ng-controller="samplecontrol">
            Select Name2:
            <select>
                <option data-ng-repeat="t in sample" value="{{t.id}}">{{t.name}}</option>
            </select>
        </div>-->
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <div ng-app="drpdwnApp" ng-controller="drpdwnCtrl">
            <select ng-model="drpdpwnvalue" ng-options="item.ShipAddress for item in ProductList">
                <option value="" label="Select and item"></option>
            </select>
        </div>
    </form>
</body>
</html>
SERVERSIDE CODE
  [System.Web.Services.WebMethod()]
        public static List<OrderList> GetProductList()
        {
            List<OrderList> list = new List<OrderList>();
            using (SqlConnection conn = new SqlConnection(
                ConfigurationManager.ConnectionStrings["ConnectionStringName"].ConnectionString))
            {
                conn.Open();
                string strquery = "Select  * from Tablename";
                using (SqlCommand cmd = new SqlCommand(strquery, conn))
                {
                    SqlDataReader reader = cmd.ExecuteReader();
                    while (reader.Read())
                    {
                        OrderList objorder = new OrderList(int.Parse(reader["OrderID"].ToString()),                          
                            reader["ShipName"].ToString(),
                             reader["ShipAddress"].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;
        }
    }

1 comment:

  1. Please click on below link
    http://www.fledgequality.somee.com

    ReplyDelete