如何根据角度js和MVC中的下拉列表中的选定值显示用户详细信息 [英] How to display user details based on selected value in dropdownlist in angular js and MVC

问题描述

亲爱的先生，

Iam使用Asp.net mvc5和c＃with angularjs visualstudio 2013和sql server 2008，

在我的应用程序中我有两个下拉国家和州分别，当我选择状态下拉菜单时，当我点击按钮时，我必须根据状态ID显示用户详细信息



我需要在哪里编写此代码获取用户详细信息可以帮助我

以下是我的数据库表，Angular js脚本，.Cshtml和cs文件





数据库：表格

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

国家/地区

--------

PK-CountryID-Int

CountryName-Varchar（100）



国家

------

PK-StateID-int

StateName-Varchar（100）

FK-CountryId-int



用户

-----

PK-UserId-int

UserName-varchar（50）

EmailId-varchar（50）

性别变种char（50）

FK-StateID-int





Java脚本文件

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

DropdownController.js

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

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

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文件

-----------

.cshtml file
-----------

<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

推荐答案

范围，StateService）{

scope, StateService) {

scope.CountryID = null ;

scope.CountryID = null;

scope.StateID = null ;

scope.StateID = null;

这篇关于如何根据角度js和MVC中的下拉列表中的选定值显示用户详细信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！