about 9 years ago
Hi All,
This log will help you to bind data to dropdown/html select control using AngularJS. Data is populated using webmethod.
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>
<%@ 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;}}
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)