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

【问题标题】：AngularJS: populate dropdown with json coming from mvc actionAngularJS：使用来自 mvc 操作的 json 填充下拉列表
【发布时间】：2016-05-06 18:14:08
【问题描述】：

我在 mvc 中有动作，当页面请求时触发，然后我生成模型的 json 并存储在 viewbag 中。在剃刀视图中，我将 json 从 viewbag 存储到角度模型。我的代码假设填充下拉但没有得到正确的输出。请告诉我哪里出错了。

MVC 动作

public class HomeController : Controller
    {

        public ActionResult Index()
        {
            ViewBag.Countries = GetCountries();
            return View();
        }

        public JsonResult GetCountries()
        {
            List<Country> oList = new List<Country>()
           {
                new Country {ID=1,Name="United Kingdom"},
                new Country {ID=1,Name="United States"},
                new Country {ID=1,Name="Italy"},
                new Country {ID=1,Name="Germany"},
                new Country {ID=1,Name="India"}
           };
            return Json(oList);
        }
    }

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

<div class="row">
    <div ng-app="drpdwnApp" ng-controller="drpdwnCtrl">
        <select ng-model="ID" ng-options="item.Name for item in CountryList">
            <option value="" >--Select--</option>
        </select>
    </div>
</div>


@section scripts
{
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

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

}

【问题讨论】：

标签： angularjs json asp.net-mvc

【解决方案1】：

您可以使用 $http 服务对您的服务器端点进行 ajax 调用，以获取下拉菜单的数据。

由于它位于 MVC 视图中，因此您应该利用 Url.Action 辅助方法来构建到您的端点的正确相对 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>
}

现在在您的角度控制器中，

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; 
    });

}]);

虽然这可以正常工作，但我强烈建议您将此 http 调用移至数据服务并将其注入您的角度控制器并使用它。

【讨论】：

在您的代码中您说“您可以使用 $http 服务对您的服务器端点进行 ajax 调用以获取下拉列表的数据”，我应该通过 $http 服务调用服务器端函数来获取国家数据，但我用国家数据填充视图包，这样我可以保存一个被 ajax 命中的服务器。现在告诉我哪一个会被认为是好的？
查看您的代码$http.post("Home/GetCountries") 您在控制器中注入 appSettings，但在 ajax 调用期间使用硬代码 url......您是否忘记使用 appSettings 或 appSettings 背后的目标或注入控制器....不太清楚。
对不起！现在修好了。当然，您也可以使用 viewbag。但我更喜欢不使用动态的东西，比如视图包。这样我的视野就更干净了。

【解决方案2】：

问题已解决。这是正在运行的代码。

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

【讨论】：