asp .net mvc angular dropdown list | asp .net mvc cascading dropdwon system using sngular

 

 Controller

 AddressController.cs

using MVC_CRUD.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MVC_CRUD.Controllers
{
    public class AddressController : Controller
    {
        private ProjectDB db = new ProjectDB();
        // GET: Address
        public ActionResult Index()
        {
            return View();
        }
        public JsonResult getcountries()
        {
            var getcountry = db.Countries.ToList();
            return Json(getcountry, JsonRequestBehavior.AllowGet);
        }
        [HttpPost]
        public JsonResult getstates(int cid)
        {
            var getsates = db.States.Where(x => x.Countrysid == cid).Select(x => new { x.Stateid, x.Sname }).ToList();
            return Json(getsates, JsonRequestBehavior.AllowGet);
        }
        [HttpPost]
        public JsonResult getcities(int sid)
        {
            var getsates = db.Cities.Where(x => x.Statesid == sid).Select(x => new { x.Cityid, x.Cityname }).ToList();
            return Json(getsates, JsonRequestBehavior.AllowGet);
        }
        
    }
} 

Database connection strings

<connectionStrings>
        <add name="mvceight" connectionString="Data Source=DESKTOP-31NS7CR\SQLEXPRESS;Initial Catalog=MVC_CRUD;Integrated Security=true;MultipleActiveResultSets=true;" providerName="System.Data.SqlClient" />
    </connectionStrings>

Database model Project model

ProjectDB.cs

using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;

namespace MVC_CRUD.Models
{
    public class ProjectDB:DbContext
    {
        public ProjectDB():base("mvceight")
        {

        }
     
        public DbSet<Country> Countries { get; set; }
        public DbSet<State> States { get; set; }
        public DbSet<City> Cities { get; set; }
     
    }
}

Models

Country.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MVC_CRUD.Models
{
    public class Country
    {
        public int CountryId { get; set; }
        public string Cname { get; set; }
    }
}

State.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MVC_CRUD.Models
{
    public class State
    {
        public int Stateid{ get; set; }
        public int Countrysid { get; set; }
        public string Sname { get; set; }
    }
}

City.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MVC_CRUD.Models
{
    public class City
    {
        public int Cityid { get; set; }
        public int Statesid { get; set; }
        public string Cityname { get; set; }

    }
}

Angular 

Scripts/AngularController/Address.js

var app = angular.module("AdrApp", []);

app.controller("AdrController", function ($scope, $http) {
    
    $http({
        method: 'get',
        url: "/Address/getcountries"
    }).then(function (response) {
        $scope.Countries = response.data;
    });
 
    $scope.getstates = function () {
        var countryid = $scope.country;
        if (countryid) {
            $http({
                method: 'POST',
                url: "/Address/getstates",
                data: JSON.stringify({ cid: countryid })
            }).then(function (state) {
                $scope.states = state.data;
            });
        }
    };
    $scope.getcity = function () {
        var Stateid = $scope.state;
        if (Stateid) {
            $http({
                method: 'POST',
                url: "/Address/getcities",
                data: JSON.stringify({ sid: Stateid })
            }).then(function (city) {
                $scope.cities = city.data;
            });
        }
    };
    

});

 

View file 

Index.cshtml

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/AngularController/Address.js"></script>

<div ng-app="AdrApp" ng-controller="AdrController"  >
    <div class="container">
        <div class="row">

            <div class="form-group">
                <select ng-model="country"   ng-change="getstates()">
                    <option value="">Select a Country</option>

                   <option data-ng-repeat="ct in Countries" value="{{ct.CountryId}}">{{ct.Cname}}</option>
                </select>

            </div>
            <div class="form-group" ng-hide="!states">
                <select ng-model="state"   ng-change="getcity()">
                    <option value="">Select a Sate</option>
                    <option data-ng-repeat="st in states" value="{{st.Stateid}}">{{st.Sname}}</option>
                </select>
            </div>
            <div class="form-group"   ng-hide="!cities">
                <select ng-model="city" ng-options="x.Cityid as x.Cityname for x in cities"  >
                    <option value="">Select a City</option>
                </select>
            </div>
        </div>
    </div>
</div>