Bind Dropdownlist in MVC using AngularJS

December 30 2020 by Admin

In this article, we have described how to bind dropdownlist in MVC using AngularJS with an example and a sample code.

In this article, we have described how to bind dropdownlist in MVC using AngularJS with an example and a sample code. AngularJS is a progressive framework for building user interfaces that are used for two-way binds.

Step -1

Open Visual Studio. Click on the file in the menu and select new Project .

Bind dropdownlist in mvc using AngularJS

Step -2

Select new project type.

Index.cshtml

We have provided html code below.

<html>

<head>

<title>Bind Dropdownlist in MVC using AngularJS</title>

var app = angular.module('WebApp', [])

app.controller('Home', function ($scope, $http, $window) {

var post = $http({

method: "POST",

url: "/Home/StockList",

dataType: 'json',

data: {},

headers: { "Content-Type": "application/json" }

});

post.success(function (data, status) {

$scope.StockList = data;

});

post.error(function (data, status) {

$window.alert(data.Message);

});

</script>

</head>

<body>

</option>

</select>

</div>

</body>

</html>

Model

public class Stockmodel

{

public Int32 stockId { get; set; }

public string StockName { get; set; }

}

StockController

public JsonResult StockList()

{

List<Stockmodel> stocks = new List<Stockmodel>();

stocks.Add(new Stockmodel

{

stockId = 1,

StockName = "REL",

});

stocks.Add(new Stockmodel

{

stockId = 2,

StockName = "Infosys",

});

stocks.Add(new Stockmodel

{

stockId = 3,

StockName = "TCS",

});

stocks.Add(new Stockmodel

{

stockId = 4,

StockName = "Bajaj Finance",

});

return Json(stocks);

}

Dropdown
Angular

Home > Angular > Bind Dropdownlist in MVC using AngularJS