Hi nabilabolo,
Refer below sample code.
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
ViewBag.material = GetMaterial();
return View();
}
private static List<Materials> GetMaterial()
{
List<Materials> materials = new List<Materials>();
materials.Add(new Materials { ID = 1, Material = "Stamp Ink Red", Mat_Quantity = 20 });
materials.Add(new Materials { ID = 2, Material = "Stamp Ink Blue", Mat_Quantity = 15 });
return materials;
}
public int CheckAvailability(int materialId)
{
List<Materials> materials = new List<Materials>();
materials.Add(new Materials { ID = 1, Material = "Stamp Ink Red", Mat_Quantity = 8 });
materials.Add(new Materials { ID = 2, Material = "Stamp Ink Blue", Mat_Quantity = 5 });
int matCount = materials.Where(x => x.ID == materialId).Select(x => x.Mat_Quantity).FirstOrDefault();
return matCount;
}
public class Materials
{
public int ID { get; set; }
public string Material { get; set; }
public int Mat_Quantity { get; set; }
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $filter, $http) {
$scope.Materials = [];
$scope.materialValue = "0";
$scope.quantity = "0";
$scope.IsDisabled = true;
$scope.material = '';
$scope.Add = function () {
var material = {};
if ($scope.material != "Select" && $scope.material != "") {
material.Material = $scope.material;
material.Quantity = $scope.quantity != undefined ? $scope.quantity : 0;
var materialExist = $filter('filter')($scope.Materials, { Material: $scope.material }, true);
if (materialExist.length > 0) {
for (var i = 0; i < $scope.Materials.length; i++) {
if ($scope.Materials[i].Material == $scope.material) {
if ($scope.quantity != undefined) {
$scope.Materials[i].Quantity = parseInt($scope.Materials[i].Quantity) + parseInt($scope.quantity);
}
break;
}
}
} else {
$scope.Materials.push(material);
}
}
$scope.materialValue = "0";
$scope.quantity = "0";
$scope.material = "";
$scope.Quantities = [];
$scope.IsDisabled = true;
};
$scope.setMaterialName = function () {
var ddl = angular.element(document.getElementById('ddlMaterial'));
$scope.material = ddl[0].options[ddl[0].options.selectedIndex].text;
var qty = ddl[0].value;
$scope.Quantities = [];
for (var i = 1; i <= qty; i++) {
$scope.Quantities.push({ Text: i, Value: i });
}
$scope.quantity = "0";
$scope.IsDisabled = true;
};
$scope.CheckAvailability = function () {
$scope.IsDisabled = false;
var ddl = angular.element(document.getElementById('ddlMaterial'));
var materialID = ddl[0].options[ddl[0].options.selectedIndex].id;
var qty = $scope.quantity;
if (qty > 0) {
$http({
method: 'GET',
url: '/Home/CheckAvailability/',
params: { materialId: materialID }
}).then(function (data) {
if (data.data <= 0) {
$scope.IsDisabled = true;
alert("Material is out of stock");
} else {
$scope.IsDisabled = false;
}
});
} else {
$scope.IsDisabled = true;
}
};
$scope.Remove = function (material) {
var index = $scope.Materials.indexOf(material);
$scope.Materials.splice(index, 1);
};
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<table cellpadding="0" cellspacing="0">
<tr>
<td class="form-label">Material</td>
<td>
<select id="ddlMaterial" ng-model="materialValue" ng-change="setMaterialName()" class="form-control">
<option value="0">Select</option>
@foreach (var item in ViewBag.material)
{
<option value='@item.Mat_Quantity' id='@item.ID'>@item.Material</option>
}
</select>
</td>
<td>Quantity</td>
<td>
<select id="ddlQuantity" name="Quantity" ng-model="quantity" ng-change="CheckAvailability()" class="form-control">
<option value="0">Select</option>
<option ng-repeat="item in Quantities" value="{{item.Value}}">
{{item.Text}}
</option>
</select>
</td>
<td><input type="button" value="Add Material" ng-click="Add()" ng-disabled="IsDisabled" class="btn btn-primary btn-sm" /></td>
</tr>
</table>
<br />
<div class="table" id="table_id">
<table id="tblMaterials" class="table table-striped table-bordered" style="width:80%">
<thead>
<tr class="success">
<th class="text-center">Material</th>
<th class="text-center">Quantity</th>
<th class="text-center"></th>
</tr>
</thead>
<tbody ng-repeat="m in Materials">
<tr>
<td class="text-center">{{m.Material}}</td>
<td class="text-center">{{m.Quantity}}</td>
<td class="text-center">
<input type="button" name="btnDelete" value="Remove" ng-click="Remove(m)" class="btn btn-danger btn-sm" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Screenshot
