Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Bind Dropdown using AngularJS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 82
    Comment on it

    Hi All,

    This log will help you to bind data to dropdown/html select control using AngularJS. Data is populated using webmethod.

    <select ng-options="Country.CountryName for Country in CountryList" ng-model="selectedCountry">
    </select>

    Where CountryList is the JSON result from server. Country.CountryName -> will bind the country name to select options text and CountryID binds to select options value.

    ASPX page:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Binddropdown.aspx.cs" Inherits="Binddropdown" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <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>
    </head>
    <body>
        <form id="form1" runat="server">
        <div ng-app="myApp" ng-controller="myCntrl">
            <div ng-init="fillCountryList()"></div>
            Country List :
            <select ng-options="Country.CountryName for Country in CountryList" ng-model="selectedCountry">
            </select>
    
            <script>
                var app = angular.module("myApp", []);
                app.controller("myCntrl", function ($scope, $http) {
                    $scope.CountryList;
                    $scope.fillCountryList = function () {
                        var httpreq = {
                            method: 'POST',
                            url: 'Binddropdown.aspx/GetCountyList',
                            headers: {
                                'Content-Type': 'application/json; charset=utf-8',
                                'dataType': 'json'
                            },
                            data: {}
                        }
                        $http(httpreq).success(function (response) {
                            $scope.CountryList = response.d;
                            alert("Completed.");
                        })
                    };
                });
            </script>
        </div>
        </form>
    </body>
    </html>

    C# Code:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    public partial class Binddropdown : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
    
        }
    
        [System.Web.Services.WebMethod()]
        public static List<CountryList> GetCountyList()
        {
            List<CountryList> list = new List<CountryList>();
            list.Add(new CountryList(1,"India"));
            list.Add(new CountryList(2,"USA"));
            list.Add(new CountryList(3,"Canada"));
            list.Add(new CountryList(4, "Italy"));
            return list;
        }
    }
    
    public class CountryList
    {
        public int CountryID;
        public string CountryName;
        public CountryList(int _CountryID, string _CountryName)
        {
            CountryID = _CountryID;
            CountryName = _CountryName;
        }
    }

     

    Happy Coding.....

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: