AngularJS：使用来自mvc操作的json填充下拉列表

我在mvc中有一个动作，当页面请求时触发，从那里我生成模型的json并存储在viewbag中。在razor视图中，我将json从viewbag存储到angular模型。我的代码假设填充下拉列表，但没有得到正确的输出。请告诉我我在哪里犯的错误

MVC行动

公共类HomeController:控制器
{
公共行动结果索引（）
{
ViewBag.Countries=GetCountries（）；
返回视图（）；
}
public JsonResult GetCountries（）
{
列表列表=新列表（）
{
新国家{ID=1，Name=“联合王国”}，
新国家{ID=1，Name=“美国”}，
新国家{ID=1，Name=“意大利”}，
新国家{ID=1，Name=“Germany”}，
新国家{ID=1，Name=“印度”}
};
返回Json（oList）；
}
}

用于填充下拉列表的AngularJS代码

--挑选--
@节脚本
{
角度.module（'drpdwnApp'，[]）.controller（'drpdwnCtrl'，function（$scope，$http）{
$scope.CountryList=null；
$scope.fillCountryList=函数（）{
$scope.CountryList=JSON.parse（'@Html.Raw（JSON.Encode（ViewBag.Countries）））；
};
$scope.fillCountryList（）；
});
}

问题已解决。下面是正在工作的代码

<script type="text/javascript">
    angular.module('drpdwnApp', []).controller('drpdwnCtrl', function ($scope, $http) {
        $scope.CountryList = null;
        $scope.fillCountryList = function () {
            var raw =  @Html.Raw(Json.Encode(ViewBag.Countries));
            $scope.CountryList = raw["Data"];
        }
        $scope.fillCountryList();
    });
</script>

角度.module（'drpdwnApp'，[]）.controller（'drpdwnCtrl'，function（$scope，$http）{
$scope.CountryList=null；
$scope.fillCountryList=函数（）{
var raw=@Html.raw（Json.Encode（ViewBag.Countries））；
$scope.CountryList=原始[“数据”]；
}
$scope.fillCountryList（）；
});

问题已解决。下面是正在工作的代码

<script type="text/javascript">
    angular.module('drpdwnApp', []).controller('drpdwnCtrl', function ($scope, $http) {
        $scope.CountryList = null;
        $scope.fillCountryList = function () {
            var raw =  @Html.Raw(Json.Encode(ViewBag.Countries));
            $scope.CountryList = raw["Data"];
        }
        $scope.fillCountryList();
    });
</script>

角度.module（'drpdwnApp'，[]）.controller（'drpdwnCtrl'，function（$scope，$http）{
$scope.CountryList=null；
$scope.fillCountryList=函数（）{
var raw=@Html.raw（Json.Encode（ViewBag.Countries））；
$scope.CountryList=原始[“数据”]；
}
$scope.fillCountryList（）；
});

您可以使用

$http

服务对服务器端点进行ajax调用，以获取下拉列表的数据

因为它位于MVC视图中，所以您应该利用

Url.Action

helper方法为端点构建正确的相对Url。因此，在视图文件中，可以构建指向端点的url，并将其传递给javascript/angular控制器

@section Scripts
{
   <script src="~/Scripts/YourAngularControllerFileForThisPage.js"></script>
   <script>
        var yourApp = yourApp || {};
        yourApp.Settings = yourApp.Settings || {};
        yourApp.Settings.CountriesUrl= "@Url.Action("GetCountries","YourControllerName")";
        angular.module("app").value("appSettings", myApp);
   </script>
}

---

虽然这样做很好，我强烈建议您将此http调用移动到数据服务并将其注入angular controller并使用。

您可以使用

$http

服务对服务器端点进行ajax调用，以获取下拉列表的数据

因为它位于MVC视图中，所以您应该利用

Url.Action

helper方法为端点构建正确的相对Url。因此，在视图文件中，可以构建指向端点的url，并将其传递给javascript/angular控制器

@section Scripts
{
   <script src="~/Scripts/YourAngularControllerFileForThisPage.js"></script>
   <script>
        var yourApp = yourApp || {};
        yourApp.Settings = yourApp.Settings || {};
        yourApp.Settings.CountriesUrl= "@Url.Action("GetCountries","YourControllerName")";
        angular.module("app").value("appSettings", myApp);
   </script>
}

---

虽然这样做很好，我强烈建议您将此http调用移动到数据服务并将其注入angular controller并使用。

在您的代码中，u说“您可以使用$http服务对服务器端点进行ajax调用，以获取下拉列表的数据”我应该通过$http服务调用服务器端函数来获取国家数据，但我用国家数据填充viewbag，这样我可以保存一个被ajax击中的服务器。现在告诉我哪一个会被认为是好的？看到你的代码<代码> $HTP.POST（“HOST/GETFACES”） U在控制器中注入AppSt设置，但是在Ajax调用期间使用硬代码URL……你忘记使用AppSt设置或AppSt设置后面的目标或者在控制器中注入……不太清楚。对不起！现在修好了。当然，您也可以使用viewbag。但我不喜欢使用动态的东西，比如查看包。在你的代码中，你说“你可以使用$http服务对你的服务器端点进行ajax调用，以获取下拉列表的数据”，我应该通过$http服务调用服务器端函数来获取国家数据，但我用国家数据填充viewbag，这样我就可以保存一个被ajax击中的服务器。现在告诉我哪一个会被认为是好的？看到你的代码<代码> $HTP.POST（“HOST/GETFACES”） U在控制器中注入AppSt设置，但是在Ajax调用期间使用硬代码URL……你忘记使用AppSt设置或AppSt设置后面的目标或者在控制器中注入……不太清楚。对不起！现在修好了。当然，您也可以使用viewbag。但我不喜欢使用动态的东西，比如查看包。这样我的观点就更清晰了。

var app = angular.module("app", []);
app.controller('ctrl', ['$scope','$http', 'appSettings', function ($scope,$http,
                                                                             appSettings) 
{       
    $scope.CountryList = [];
    $http.post(appSettings.Settings.CountriesUrl).then(function(a) {
        $scope.CountryList = a.data; 
    });

}]);