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">×</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>
}