Dynamically Add And Remove Row In AngularJS With ASP.NET MVC

Introduction

Before AngularJS, the same thing was performed using jQuery which was very lengthy and time-consuming. The same functionality is performed using Angular now and the process is very quick and much faster than jQuery.

Recommended Prerequisites

Visual Studio 2017
ASP.NET MVC

Open Visual Studio and select "File" >> "New". Then, click on Project. (Remember, don't go with the option 'File->New->Website').

Dynamic Add And Remove Row In Angular With ASP.NET MVC

Select "Templates" >> Visual C# >> Web then ASP.NET Web Application (.NET Framework), and put appropriate project name.

And click the "OK" button.

Now, choose the project template as MVC.

Now, your project will begin to start once you click the OK button.

Great! Now first, we will see the project structure in which we will work. So, our solution explorer will look something like this.

Now, let's code the amazing design.

First, we will begin with HTML file, i.e., Go to View -> Home -> Index.cshtml.

@{ ViewBag.Title = "Home Page"; Layout = null; } <!DOCTYPE html>
<html>
<head>
<title>AngularJS</title>
<meta charset='utf-8'>
<meta name="description" content="AngularJS and Angular Code Example">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link href="~/Content/css/style.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="~/Scripts/app/main.js"></script>
</head>
<body ng-app="demo" ng-controller="DemoCtrl">
<div class="container" width="800px" id="invoice">
<div class="row">
<div class="col-xs-12 heading"> Dynamic Grid in Angular JS </div>
</div>
<div class="items-table">
<div class="row header">
<div class="col-xs-1"> </div>
<div class="col-xs-5">Title 1</div>
<div class="col-xs-2">Title 2</div>
<div class="col-xs-2">Title 3</div>
</div>
<div class="row invoice-item" ng-repeat="item in invoice.items" ng-animate="'slide-down'">
<div class="col-xs-1 remove-item-container"> <a href ng-click="removeItem(item)" class="btn btn-danger"><i class="fa fa-times"></i></a> </div>
<div class="col-xs-5 input-container"> <input ng-model="item.description" placeholder="Description" /> </div>
<div class="col-xs-2 input-container"> <input ng-model="item.qty" value="1" size="4" ng-required ng-validate="integer" placeholder="Quantity" /> </div>
<div class="col-xs-2 input-container"> <input ng-model="item.cost" value="0.00" ng-required ng-validate="number" size="6" placeholder="Cost" /> </div>
</div>
<div class="row invoice-item">
<div class="col-xs-12 add-item-container"> <a class="btn btn-primary" href ng-click="addItem()"><i class="fa fa-plus"></i></a> </div>
</div>
</div>
</div>
</body>
</html>

Here, we have included the CDN for AngularJS, Bootstrap, and font-awesome.

Our Angular controller name is DemoCtrl and app module name is demo.

Now, let's code our Angular file and name it as main.js in the location path - Script -> app -> main.js.

angular.module('demo', []).service('LocalStorage', [function () {
var Service = {};
var hasInvoice = function () {
return !(localStorage['invoice'] == '' || localStorage['invoice'] == null);
};
Service.getInvoice = function () {
if (hasInvoice()) {
return JSON.parse(localStorage['invoice']);
} else {
return false;
}
};
return Service;
}]).controller('DemoCtrl', ['$scope', '$http', 'LocalStorage', function ($scope, $http, LocalStorage) {
(function init() {
! function () {
var invoice = LocalStorage.getInvoice();
$scope.invoice = invoice ? invoice : 0;
}();
})() $scope.addItem = function () {
$scope.invoice.items.push({
qty: 0,
cost: 0,
description: ""
});
}
$scope.removeItem = function (item) {
$scope.invoice.items.splice($scope.invoice.items.indexOf(item), 1);
};
}])

Now finally, we will add some CSS to our View so that it will looks somehow better.

So now, move on to Content -> CSS -> style.css.

.items-table .row {
border-bottom: 1px solid #ddd;
line-height: 3em;
}
.items-table .row:last-child {
border-bottom: none;
line-height: 3em;
}
.items-table .row:nth-child(even) {
background: #f9f9f9;
}
.items-table input {
line-height: 1.5em;
}
input:focus {
outline: 0;
}
.heading {
background-color: #357EBD;
color: #FFF;
margin-bottom: 1em;
text-align: center;
line-height: 2.5em;
}
.right input {
text-align: right;
}
.input-container {
padding: 3px 0;
}
.header.row {
font-weight: bold;
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
}
input,
textarea {
border: 1px solid #FFF;
}
.container input:hover,
.container textarea:hover,
.table-striped>tbody>tr:nth-child(2n+1)>td input:hover,
.container input:focus,
.container textarea:focus,
.table-striped>tbody>tr:nth-child(2n+1)>td input:focus {
border: 1px solid #CCC;
}
.table-striped>tbody>tr:nth-child(2n+1)>td input {
background-color: #F9F9F9;
border: 1px solid #F9F9F9;
}
body {
padding: 20px;
}
.infos input {
width: 300px;
}
.align-right input {
text-align: right;
width: 300px;
}
div.container {
width: 800px;
}

That's it. Run the project. The output will look somewhat like this.

Summary

You can leave your feedback/comment/questions to this article. Please let me know how you like and understand this article and how I could improve it. You can get the source code from here.