Click here to Skip to main content
15,867,453 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more: , +
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

JavaScript
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
----------------
C#
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
-----------
HTML
<div class="panel panel-info">
    <div class="panel-heading">
        Cascading Dropdown using AngularJS and MVC5
    </div>
    <div class="panel-body">
        <div>
            <div class="dropdown">
                Country :
                
                    Select Country
                

                State :
                
                    {{StateTextToShow}}
                

                

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

                        <div class="modal-content">
                            <div class="modal-header">
                                ×
                                <h4 class="modal-title">Modal Header</h4>
                            </div>
                            <div class="modal-body" id="myModal">
                                {{Result}}
                            </div>
                            <div class="modal-footer">
                                Close
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="panel-footer">
        Developments 2016
    </div>
</div>
@section scripts{
   





    

}


What I have tried:

I Tried to select from country f this usersrom drop down then i will select states from drop down till here iam fine but when i want display users based on the states iam not getting this can you please suggest
Posted
Updated 19-Apr-17 2:00am
v2
Comments
Nirav Prabtani 19-Apr-17 8:02am    
Use code block whenever you are writing code in question or an answer
It will be easy to approach for you and others also.
Nirav Prabtani 19-Apr-17 8:03am    
You have to fill your view with users data on ng-change event of a state dropdown.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900