Skip to content

Instantly share code, notes, and snippets.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.7.7/xlsx.core.min.js"></script>
<script>
function handleFile(e) {
//Get the files from Upload control
var files = e.target.files;
var i, f;
//Loop through files
for (i = 0, f = files[i]; i != files.length; ++i) {
var reader = new FileReader();
<div ng-app="drpdwnApp" ng-controller="drpdwnCtrl">
Order
<select ng-model="drpdpwnvalue" ng-change="fillCustomerList(drpdpwnvalue)">
<option ng-repeat="item in ProductList" value="{{item.OrderID}}">{{item.OrderID}}</option>
</select>
Customers
<select>
<option ng-repeat="item in CustomerList" value="{{item.CustomerName}}">{{item.CustomerName}}</option>
</select>
</div>
<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;
$scope.CustomerList = null;
//Declaring the function to load data from database
$scope.fillProductList = function () {
$http({
method: 'POST',
url: 'AngularCascadingDropDownList.aspx/GetProductList',
<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;
$scope.CustomerList = null;
//Declaring the function to load data from database
$scope.fillProductList = function () {
//Method to populate the Initial Dropdownlist
[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))
public class CustomerController : ApiController
{
//Creating dbcontext class for NorthwindDatabase
NorthwindEntities dbContext = new NorthwindEntities();
[HttpGet]
public IHttpActionResult GetCustomer()
{
//Here we will fetch the value from Customer Table
return Json(dbContext.Customers.Take(10).ToList());
<html ng-app="app">
<head>
<link rel="stylesheet" href="~/styles/angular-ui-grid/4.0.2/ui-grid.css" />
<script src="~/Scripts/angularjs/1.5.0/angular.js"></script>
<script src="~Scripts/angular-ui-grid/4.0.2/ui-grid.min.js"></script>
<script src="~/Scripts/angulardemo.js"></script>
<style>
.myGrid {
width: 500px;
height: 250px;
public static void Register(HttpConfiguration config)
{
// Web API configuration and services
// Web API routes
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "CustomerApi",
routeTemplate: "api/{controller}/{action}/{id}",
/// <reference path="angular.js" />
//Adding ui grid module as a depedency in app
var app = angular.module('app', ['ui.grid']);
//Controller function to load the data
app.controller('MainCtrl', function ($scope, $http, CustomerService) {
$scope.GetCustomer = function () {
$scope.gridOptions = {
namespace SimpleService
{
[ServiceContract]
public interface ISimpleService
{
[OperationContract]
string GetData(int value);
}
}