07 September 2016 Sudhanshu Ranjan 373

Bind the dropdown using angularjs in mvc application

In my previous article I had explained about Bind gridview and paging example in angularjs and today I am going to explain how to bind the dropdown list using angularjs in mvc application. In angularjs we can bind dropdown list using ng-repeat or ng-options method.

You can follow the steps to bind the dropdown list using database table.

Step 1: Create a MVC sample application.

Step 2: add Action code in Controller for get the Country List from database (using .edmx)

       public JsonResult GetCountry()
        {
            using (SampleDBEntities db = new SampleDBEntities())
            {
                var countrylist = db.Countries.Where(x => x.IsActive == true).ToList();
                return Json(countrylist, JsonRequestBehavior.AllowGet);
            }
        }

We are getting the Country list from Country table here.

Step 3: add html code

<div ng-controller="CountryController">
    <div>
        <select ng-model="Country" ng-options="item.Id as item.CountryName for item in countries">
            <option value="">--Select Country--</option>
        </select>
    </div>
</div>

Step 4: add AngularJs script and assigning the country list to scope.

<script>
    var angular = angular.module("myApp", []);
    angular.controller("CountryController", function ($scope, $http)
    {
        var response = $http.get("Home/GetCountry");
        response.then(function (d)
        {
            $scope.countries = d.data;
        });
    });
</script>

Finally you will get the output here.

Please feel free to ask any doubt here!!

You can share at :

About Author
Sudhanshu Kumar Ranjan | Lead Engineer at HCL Technologies | Expertise in Microsoft Technology | Author | Blogger | Programmer
Know More
Connect with him on Facebook | Google+ | LinkedIn | Twitter

Recommended Post

Leave a comment

About Dotnet Cube

It's my blog - Dotnet Cube, where you will learn and get solutions about programming, web designing and development. I started this website to share my knowledge and experience which might help someone.

You can get more details about me and my blog at About Us page.

Subscribe Newsletter

Subscribe to our monthly newsletter to get the latest industry news, Media Group updates and our current specials.

Follow On Us...

Home | About | Advertise | Copyrights | Privacy | Contact | Admin

Copyrights © 2015-2017 dotnetcube.com. All rights reserved