Bulk Upload In AngularJS

Introduction

While working with SPA (Single Page Application) using AngularJS in my project, where I need bulk upload to be implemented. I struck for some time and finally achieved this. So, I thought it might be helpful for others who have to implement bulk upload in their app's.

In this demo I have used Visual Studio 2012, .NET Framework 4.5, AngularJS, Bootstrap and .mdf file for the database operations. I have provided all the necessary screenshots and source code to download.

Note:

Please go through my previous demo for the following things to add.

• Creating MVC project in Visual Studio.
  
  
• Installed Bootstrap, AngularJS and Angular routing from NuGet packages and JavaScript file and name it "myApp" and let it be empty for the time being.
  
  
• Add the above files in RouteConfig.cs.
  
  
• Please you should know about client side routing in AngularJS before going through this demo.

Setting up Database

I will add a .mdf file for the database operations and name it BulkDemo.mdf. I have created a table named BillsClaim. The following is the script of the table.

CREATE TABLE [dbo].[BillsClaim] (
    [Id]           INT             IDENTITY (1, 1) NOT NULL,
    [BillNum]      VARCHAR (50)    NULL,
    [BillAmt]      DECIMAL (18, 2) NULL,
    [Relationship] VARCHAR (50)    NULL,
    PRIMARY KEY CLUSTERED ([Id] ASC)
);

AngularJS Code:

Just copy the following code into myApp JS file.

var app = angular.module('myApp', ['AngularDemo.HomeController'])

.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {

    $routeProvider.when('/', {
        templateUrl: '/Home/Display',
        controller: 'homeCtrl',
    });

    $routeProvider.when('/BulkInsert', {
        templateUrl: '/Home/BulkInsert',
        controller: 'homeCtrl',
    });

    $routeProvider.otherwise({
        redirectTo: '/'
    });

    // Specify HTML5 mode (using the History APIs) or HashBang syntax.
    $locationProvider.html5Mode(false).hashPrefix('!');

}]);


//Home Controller
angular.module('AngularDemo.HomeController', ['ngRoute'])
.controller('homeCtrl', function ($scope, $http) {

    $scope.TableLength = '';
    $scope.MaxTableLength = 10;
    $scope.ReceiptList = '';

    $http.get('/Home/GetClaimsList').success(function (data) {
        $scope.ReceiptList = data;
    });


    $scope.NewBill =
        {
            SingleNewBill: [
                {
                    BillNum: '',
                    BillAmt: '',
                    Relationship: ''

                }
            ]
        };

    $scope.ShowRow = function () {
        var InputIdNo = $scope.NewBill.SingleNewBill.length + 1;
        if ($scope.MaxTableLength >= InputIdNo) {
            $scope.NewBill.SingleNewBill.push({ 'id': 'choice' + InputIdNo });
        }
        else {
            alert("You cannot add more than 10 bills in one go");
        }
    };

    $scope.CancelRow = function (Index) {
        //alert(Index);
        $scope.NewBill.SingleNewBill.splice(Index, 1);
    };

    $scope.AddNew = function (tblName) {
        if ($scope.NewBill.SingleNewBill.length > 0) {
            $.ajax({
                url: '/Home/BulkSave',
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json',
                traditional: true,
                data: JSON.stringify({ billsClaimModel: $scope.NewBill.SingleNewBill }),
                success: function (data) {
                    //debugger;
                    alert("Your Medical Bills have been added");
                    $("#tblName").remove();
                    $scope.NewBill = "";
                }
            });
        }
        else {
            alert("Please add bill and then save");
        }
    };
});

Important things for Bulk Upload:

 

• The way you define your model in AngularJS is important to pass to server side.
• AngularJS model should match with the model at server side in order to pass data.
• Rest is up to you on how you will do bulk upload.

AngularJS Model Explanation:

$scope.NewBill =
{
    SingleNewBill: [
        {
            BillNum: '',
            BillAmt: '',
            Relationship: ''

        }
    ]
};

We have a SingleNewBill object, with an array of columns, which is nested in NewBill. When we pass this AngularJS model to server side controller action it should be the list of a model, otherwise the model will be null at server side.

Output Screens

When user clicks on Bulk Insert button the following screen will be displayed.


When user clicks on Add Bill, new table row is created with two text box and dropdown list controls and they can add up to 10 rows max. Here's the screenshot:



Once you click on save button the values are passed to controller action as in the following screenshot. For bulk upload I have used SqlBulkCopy concept of .NET.



Database

All the values that are entered in UI are stored in the database. The following is the screenshot.



HTML Code Explanation

data-ng-repeat is for loop of AngularJS. We are getting each array value and storing in NewBill object and passing it to controller action.