AngularJS: populate dropdown with json coming from mvc action

Question

i have action in mvc which fire when page request and from there i generate the json of my model and store in viewbag. in razor view i store json from viewbag to angular model. my code suppose to populate dropdown but not getting right output. please tell me where i made the mistake.

MVC Action

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 code to populate dropdown

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

}

Shyju · Accepted Answer · 2016-05-07 16:25:48Z

3

You can use the $http service to make an ajax call to your server endpoint to get the data for your dropdown.

Since it is in an MVC view, you should take advantage of the Url.Action helper method to build the correct relative url to your endpoint. So in your view file, you may build the url to your endpoint and pass that to your javascript/angular controller.

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

Now in your angular controller,

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

}]);

While this works fine, I strongly recommend you to move this http call to a data service and inject that to your angular controller and use that.

edited May 7, 2016 at 16:25

answered May 6, 2016 at 18:43

Shyju

220k106 gold badges421 silver badges499 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Monojit Sarkar Over a year ago

in your code u said "You can use the $http service to make an ajax call to your server endpoint to get the data for your dropdown" that i should call server side function by $http service to get country data but i populate viewbag with country data and in this way i can save one server hit by ajax. now tell me which one would be consider as good one ?

Monojit Sarkar Over a year ago

see your code $http.post("Home/GetCountries") u inject appSettings in controller but use hard code url during ajax call......did u forget to use appSettings or what was the objective behind appSettings or injecting in controller....not very clear.

Shyju Over a year ago

Sorry ! Fixed it now. Sure, you can use viewbag too. But i prefer to not use dynamic stuff like view bag. This way my view is more clean.

Monojit Sarkar · Accepted Answer · 2016-05-06 18:19:29Z

0

issue solved. here is the code which is working.

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

answered May 6, 2016 at 18:19

Monojit Sarkar

2,48111 gold badges48 silver badges99 bronze badges

Collectives™ on Stack Overflow

AngularJS: populate dropdown with json coming from mvc action

MVC Action

AngularJS code to populate dropdown

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

MVC Action

AngularJS code to populate dropdown

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related