Question

首先道歉，帖子看起来有点长啰嗦（它只是重复的代码，所以看起来比它长）。我尝试实现多级级联下拉列表 - 它适用于初始和第一级（COLUMN1＆amp; COLUMN2），但不适用于COLUMN3。

这是控制器：

public JsonResult GetCol1()
{
using (EntityName db = new EntityName())
{

    var ret = db.TABLE_NAME.Select(x => new { x.COLUMN1 }).Distinct().ToList();
    return Json(ret, JsonRequestBehavior.AllowGet);

}
}

[HttpPost]
public JsonResult GetCol2(string col1)
{
using (EntityName db = new EntityName())
{

    var ret = db.TABLE_NAME.Where(x => x.COLUMN1 == col1).Select(x => new { x.COLUMN2 }).Distinct().ToList();
    return Json(ret, JsonRequestBehavior.AllowGet);

}
}

[HttpPost]
public JsonResult GetCol3(string col1, string col2)
{
using (EntityName db = new EntityName())
{

    var ret = db.TABLE_NAME.Where(x => x.COLUMN1 == col1).Where(x => x.COLUMN2 == col2).Select(x => new { x.COLUMN3 }).Distinct().ToList();
    return Json(ret, JsonRequestBehavior.AllowGet);
}
}

这是JS：

    app.controller('DropdownPopulation', function ($scope, $http) {

    //$http service for Getting Column1  
    $http({  
        method: 'GET',  
        url: '/Data/GetCol1'  
    })
    .success(function (data) {  
        $scope.Col1Data = data;  
    });  

    //$http service for getting Column2
    $scope.GetCol2 = function () {
        $http({
            method: 'POST',
            url: '/Data/GetCol2',
            data: JSON.stringify({ COLUMN1: $scope.col1 })
        }).
             success(function (data) {
                 $scope.Col2Data = data;
             });
    };

    //$http service for getting Column3  
    $scope.GetCol3 = function () {
        $http({
            method: 'POST',
            url: '/Data/GetCol3',
            data: JSON.stringify({ COLUMN1: $scope.col1, COLUMN2: $scope.col2 })
        }).
             success(function (data) {
                 $scope.Col3Data = data;
             });
    };
};

最后这里是html / angular：

<!-- Column 1 -->
<div ng-controller="DropdownPopulation">
<div class="form-group">
    <label class="control-label col-sm-2" for="Column1">Column1</label>
    <div class="col-sm-10">
        <select class="form-control" name="Column1"
            data-ng-model="col1" id="Column1"
            data-ng-options="c.COLUMN1 as c.COLUMN1 for c in Col1Data "
            data-ng-change="GetCol2()">
            <option value="" disabled selected>Select Col 1</option>
        </select>
    </div>
</div>

<!-- Column 2 -->
<div class="form-group">
    <label class="control-label col-sm-2" for="Column2">Column2</label>
    <div class="col-sm-10">
        <select class="form-control" name="Column2"
            data-ng-model="col2" id="Column2" 
            data-ng-options="c.COLUMN2 as c.COLUMN2 for c in Col2Data "
            data-ng-change="GetCol3()"
            data-ng-disabled="!Col1Data" >
            <option value="" disabled selected>Select Col 2</option>
        </select>
    </div>
</div>

<!-- Column 3 -->
<div class="form-group">
    <label class="control-label col-sm-2" for="Column3">Column3</label>
    <div class="col-sm-10">
        <select class="form-control" name="Column3"
            data-ng-model="col3" id="Column3"
            data-ng-options="c.COLUMN3 as c.COLUMN3 for c in Col3Data"
            data-ng-disabled="!Col2Data" >
            <option value="" disabled selected>Select Col 3</option>
        </select>
    </div>
</div>
</div>

当数据库中有数据时，Col3Data实际上返回空。

如果您知道为什么Col3Data没有返回任何内容，那么您的帮助将非常受欢迎。

非常感谢

沙欣

Answer 1

好的，我发现了问题所在。执行以下操作时：

data-ng-options="c.COLUMN1 as c.COLUMN1 for c in Col1Data

我在第一部分使用'values'而不是'key'，所以这并没有返回数据。

更改为以下工作：

data-ng-options="c.COLUMN1_KEY as c.COLUMN1 for c in Col1Data

Viplock，感谢您的帮助，我发现：

var dataToSend={ COLUMN1: $scope.col1, COLUMN2: $scope.col2 };

非常有帮助。

此致

Shaheen K

Answer 2

如果在摘要周期中出现问题，您可以尝试使用$scope.$apply()之类的问题 更新用于发送数据

   $scope.GetCol3 = function () {
   var dataToSend={ COLUMN1: $scope.col1, COLUMN2: $scope.col2 };
    $http({
        method: 'POST',
        url: '/Data/GetCol3',
        data: dataToSend
    }).
         success(function (data) {
             $scope.Col3Data = data;
             $scope.$apply();
         });
};

使用Angular＆amp; amp;的多个级联下拉列表MVC

2 个答案: