Cascading
DropdownList
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Angularddl.aspx.cs" Inherits="AngularCascadingDropdown.Angularddl" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Angular Cascading DropDowlist</title>
<script src="Angularjs/angular.min.js"></script>
<style type="text/css">
select {
width: 120px;
height:25px;
}
</style>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCntrl", function ($scope, $http) {
$scope.countryid = "",
$scope.countryname = "",
$scope.state_id = "",
$scope.statename = "",
$scope.city_id = "",
$scope.city_name = "",
$scope.StateisDisabled = true;
$scope.CityisDisabled = true;
$scope.GetCountry = function () {
var httpreq2 = {
method: "POST",
url: "Angularddl.aspx/GetCountry",
headers: {
'Content-Type': 'application/json; charset=utf-8',
'dataType': 'json'
},
data: {}
}
$http(httpreq2).success(function (data) {
$scope.result = data.d;
});
};
$scope.GetState = function (id) {
if (id == null) {
$scope.StateList = "";
$scope.StateisDisabled = true;
$scope.CityisDisabled = true;
} else {
$scope.StateisDisabled = false;
var httpreq2 = {
method: "POST",
url: "Angularddl.aspx/GetState",
headers: {
'Content-Type': 'application/json; charset=utf-8',
'dataType': 'json'
},
data: { id: $scope.countryid }
}
$http(httpreq2).success(function (data) {
$scope.StateList =
data.d;
$scope.StateTextToShow
= "Please wait..";
});
}
};
$scope.GetCity = function (id) {
if (id == null) {
$scope.Citylist = "";
$scope.CityisDisabled = true;
} else {
$scope.CityisDisabled = false;
var httpreq2 = {
method: "POST",
url: "Angularddl.aspx/GetCity",
headers: {
'Content-Type': 'application/json; charset=utf-8',
'dataType': 'json'
},
data: { id:
$scope.state_id }
}
$http(httpreq2).success(function (data) {
$scope.Citylist = data.d;
});
}
};
$scope.GetCountry();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div data-ng-app="myApp" data-ng-controller="myCntrl">
<br />
<br />
<br />
<table width="100%">
<tr>
<td align="center">
<table>
<tr>
<td align="right">Country :
</td>
<td align="left">
<select data-ng-model="countryid" data-ng-options="I.countryid
as I.countryname for I in result" data-ng-change="GetState(countryid)">
<option value="">--Select
Country--</option>
</select>
</td>
</tr>
<tr>
<td align="right">State :
</td>
<td align="left">
<select data-ng-model="state_id" data-ng-disabled="StateisDisabled" data-ng-options="I.state_id as I.state_name for I in StateList" data-ng-change="GetCity(state_id)">
<option value="">--Select
State--</option>
</select>
</td>
</tr>
<tr>
<td align="right">City:
</td>
<td align="left">
<select data-ng-model="city_id" data-ng-disabled="CityisDisabled" data-ng-options="I.city_id as I.city_name for I in
Citylist">
<option value="">--Select
City--</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Data;
using System.Data.SqlClient;
namespace AngularCascadingDropdown
{
public partial class Angularddl : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static List<GetCascading> GetCountry()
{
List<GetCascading> names = new List<GetCascading>();
DataTable dt = new DataTable();
using (SqlConnection con = new SqlConnection("Data
Source=RANJEET-PC;Initial Catalog=company;Integrated Security=True"))
{
using (SqlCommand cmd = new SqlCommand())
{
cmd.Connection = con;
cmd.CommandText = "select * from country";
using (SqlDataAdapter da = new SqlDataAdapter(cmd))
{
da.Fill(dt);
foreach (DataRow dr in dt.Rows)
{
GetCascading
cascading = new GetCascading();
cascading.countryid
= Convert.ToInt32(dr["countryid"]);
cascading.countryname = dr["countryname"].ToString();
names.Add(cascading);
}
}
return names;
}
}
}
[WebMethod]
public static List<GetCascading> GetState(int id)
{
List<GetCascading> names = new List<GetCascading>();
DataTable dt = new DataTable();
using (SqlConnection con = new SqlConnection("Data
Source=RANJEET-PC;Initial Catalog=company;Integrated Security=True"))
{
using (SqlCommand cmd = new SqlCommand())
{
cmd.Connection = con;
cmd.CommandText = "select * from state_table where countryid=" + id;
using (SqlDataAdapter da = new SqlDataAdapter(cmd))
{
da.Fill(dt);
foreach (DataRow dr in dt.Rows)
{
GetCascading state =
new GetCascading();
state.state_id = Convert.ToInt32(dr["state_id"]);
state.state_name =
dr["state_name"].ToString();
names.Add(state);
}
}
return names;
}
}
}
[WebMethod]
public static List<GetCascading> GetCity(int id)
{
List<GetCascading> names = new List<GetCascading>();
DataTable dt = new DataTable();
using (SqlConnection con = new SqlConnection("Data
Source=RANJEET-PC;Initial Catalog=company;Integrated Security=True"))
{
using (SqlCommand cmd = new SqlCommand())
{
cmd.Connection = con;
cmd.CommandText = "select * from city where state_id=" + id;
using (SqlDataAdapter da = new SqlDataAdapter(cmd))
{
da.Fill(dt);
foreach (DataRow dr in dt.Rows)
{
GetCascading city = new GetCascading();
city.city_id = Convert.ToInt32(dr["city_id"]);
city.city_name =
dr["city_name"].ToString();
names.Add(city);
}
}
return names;
}
}
}
public class GetCascading
{
public int countryid { get; set; }
public string countryname { get; set; }
public int state_id { get; set; }
public string state_name { get; set; }
public int city_id { get; set; }
public string city_name { get; set; }
}
}
}
No comments:
Post a Comment