Post
Ask Question

Bind DropDownList Using AngularJS

In development, sometimes we have to populate the data into the dropdownlist. Today, in this blog, we will learn how to bind the dropdownlist, using WebAPI and AngularJS. Thus, let's take a look.

Step 1 

Open Visual Studio.

Step 2

File>>New>> Project

Choose ASP.NET WebApplication.

Visual Studio

Step 3

Select WebAPI.

Visual Studio

Click OK button.

Check Solution Explorer.

Visual Studio

In this example, we have one StudentDB database, where we have the students information. First, create StudentDB and one table StateMaster.

Visual Studio

In this example, we will bind StateName as the text and StateId as the value into the dropdownlist.
  • Now create an edmx file and connect StudentDB with your Entity. In this example, my entity name is StudentEntity.

    Visual Studio

Click Add button. Now on the basis of wizard, create an edmx file.

  • Once you click finish button, your screen looks, as shown below.

    Visual Studio

Now, open HomeController. By default, HomeController will be inheritted by Controller as HomeController:Controller. Change it to HomeController:ApiController and copy the code, given below.

  1. using AngularwithWebAPI.DbContext;  
  2. using System;  
  3. using System.Collections.Generic;  
  4. using System.Linq;  
  5. using System.Web;  
  6. using System.Web.Http; //This namespace is responsible for IHttpActionResult  
  7. using System.Web.Mvc;  
  8. namespace AngularwithWebAPI.Controllers  
  9. {  
  10.         publicclassHomeController: ApiController {  
  11.             DbContext.StudentEntities studentEntities = new DbContext.StudentEntities();  
  12.             publicIHttpActionResult GetStates() {  
  13.                 var states = studentEntities.StateMasters.ToList();  
  14.                 return Ok(states);  
  15.             }  
  16.         }  
Now run your Service



Script.js

  1. var     testApp = angular.module("testModule", []).controller("testController", function($scope, $http) {  
  2.     $http.get('http://localhost:50623/api/home/getstates').then(function(response) {  
  3.         $scope.states = response.data;  
  4.     });  
  5. });  
index.html
  1. <!DOCTYPEhtml>  
  2. <htmlng-apphtmlng-app="testModule">  
  3.   
  4.     <head>  
  5.         <scriptsrcscriptsrc="Scripts/angular.min.js">  
  6.             </script>  
  7.             <scriptsrcscriptsrc="Scripts/js/Script.js">  
  8.                 </script>  
  9.                 <title></title>  
  10.                 <metacharsetmetacharset="utf-8" /> </head>  
  11.   
  12.     <body>  
  13.         <divng-controllerdivng-controller="testController">  
  14.             <tablebordertableborder="1">  
  15.                 <tr>  
  16.                     <td> Name </td>  
  17.                     <td>  
  18.                         <inputtypeinputtype="text" id="txtName" ng-model="name" />  
  19.                     </td>  
  20.                     <tr>  
  21.                         <td> State </td>  
  22.                         <td> <select>  
  23. <optionng-modeloptionng-model="stateId"data-ng-repeat="st in states"value="{{st.StateId}}">{{st.StateName}}</option>  
  24. </select> </td>  
  25.                     </tr>  
  26.                     <tr>  
  27.                         <td> City </td>  
  28.                         <td>  
  29.                             <inputtypeinputtype="text" id="txtCity" /> </td>  
  30.                     </tr>  
  31.                     <tr>  
  32.                         <td> Address </td>  
  33.                         <td>  
  34.                             <inputtypeinputtype="text" id="txtAddress" /> </td>  
  35.                     </tr>  
  36.                     <tr>  
  37.                         <td> Phone </td>  
  38.                         <td>  
  39.                             <inputtypeinputtype="text" id="txtPhone" /> </td>  
  40.                     </tr>  
  41.                     <tr>  
  42.                         <td>  
  43.                             <inputtypeinputtype="button" id="bttnUpdate" value="Update" /> </td>  
  44.                     </tr>  
  45.                     </table>  
  46.                     </div>  
  47.     </body>  
  48.   
  49.     </html>  
In the code, used above, I used data-ng-repeat, which will convert option tag row by the row of StateName. Now, one question arises, why do I use data-ng-repeat="st in states" because, I will return the data into my scope model which is $scope.states.
  1. <select>  
  2.    <optionng-model="stateId"data-ng-repeat="st in states"value="{{st.StateId}}">{{st.StateName}}</option>  
  3. </select>  
Now, time to check the output.

Visual Studio

Thus, we can see the list of states in the DropDownList now.
 
You can watch this blog in Video mode too.