display users details based on selected state in mvc angulr

Question

Dear Sir,

Iam Using Asp.net mvc5 with c# with angularjs visualstudio 2013 and sql server 2008 ,

in my application i have two drop downs country and states respectively, when i select states dropdown and when i click button i have to display the users details based on the state id

just i need where i have to write this code to get user details can you please help me

Below are my data base tables,Angular js script,.Cshtml and cs file

DataBase: Tables

-----------------

Country

--------

PK-CountryID-Int

CountryName-Varchar(100)

States

------

PK-StateID-int

StateName-Varchar(100)

FK-CountryId-int

Users

-----

PK-UserId-int

UserName-varchar(50)

EmailId-varchar(50)

Gender-varchar(50)

FK-StateID-int

Java Script file

---------------

DropdownController.js

angular.module('myApp').controller('DropdownController', function ($scope, StateService) {

$scope.CountryID = null;

$scope.StateID = null;

$scope.CountryList = null;

$scope.StateList = null;

$scope.StateTextToShow = "Select State";

$scope.Result = "";

// Populate Country list using GetCountry()

StateService.GetCountry().then(function (d) {

//assign countries to $scope.CountryList

$scope.CountryList = d.data; //success

},

function (error) {

alert('Error!'); //throws error for failure

});

// This function to Populate State

$scope.GetState = function () {

$scope.StateID = null;

$scope.StateList = null;

$scope.StateTextToShow = "Please Wait...";

//Load State

StateService.GetState($scope.CountryID).then(function (d) {

$scope.StateList = d.data;

$scope.StateTextToShow = "Select State";

}, function (error) {

alert('Error!');

});

}

// Function for show result

//it will be displayed after clicking on button

$scope.ShowResult = function () {

$scope.Result = "Selected Country ID : " + $scope.CountryID + " State ID : " + $scope.StateID;

}

})

.factory('StateService', function ($http) {

fac.GetCountry = function () {

return $http.get('/Home/GetCountries/')

}

fac.GetState = function (countryID) {

return $http.get('/Home/GetStates/?CountryID=' + countryID)

}

return fac;

});

HomeControler.cs

----------------

public ActionResult GetCountries()

{

// List countrylist = new List();

//List<Country> countrylist = new List<Country>();

MVCTutorialEntities dc = new MVCTutorialEntities();

var countrylist = dc.Countries.OrderBy(a => a.CountryName).ToList();

return Json(countrylist,JsonRequestBehavior.AllowGet);

}

// Get States based on Country selected in dropdown

public ActionResult GetStates(int countryID)

{

MVCTutorialEntities dc = new MVCTutorialEntities();

var statelist = dc.States.Where(a => a.CountryID==countryID);

return Json(statelist,JsonRequestBehavior.AllowGet);

}

public ActionResult GetUsers(int StateID)

{

MVCTutorialEntities dc = new MVCTutorialEntities();

var userlist = dc.Users.Where(a => a.StateID == StateID).ToList();

return Json(userlist, JsonRequestBehavior.AllowGet);

}

.cshtml file

-----------

<div class="panel panel-info">

<div class="panel-heading">

Cascading Dropdown using AngularJS and MVC5

</div>

<div class="panel-body">

<div ng-app="myApp" ng-controller="DropdownController">

<div class="dropdown">

Country :

<select class="btn btn-primary dropdown-toggle" ng-model="CountryID" ng-options="I.CountryID as I.CountryName for I in CountryList" ng-change="GetState(CountryID)">

<option value="">Select Country</option>

</select>

State :

<select class="btn btn-primary dropdown-toggle" ng-model="StateID" ng-options="I.StateID as I.StateName for I in StateList">

<option value="">{{StateTextToShow}}</option>

</select>

<input class="btn btn-success" type="button" value="Get Selected Values" ng-click="ShowResult()" data-toggle="modal" data-target="#myModal" />

<div class="modal fade" id="myModal" role="dialog">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal">&times;</button>

<h4 class="modal-title">Modal Header</h4>

</div>

<div class="modal-body" id="myModal">

{{Result}}

</div>

<div class="modal-footer">

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="panel-footer">

Developments 2016

</div>

</div>

@section scripts{

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

<script src="~/Scripts/bootstrap.js"></script>

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />

<script src="~/Scripts/module.js"></script>

<script src="~/Scripts/DropdownController.js"></script>

}