CRUD Operation Using HTML+ Angular Along With WebAPI

HTML and AngularJS are used for front-end and the Web API acts as an intermediate between database and front-end using Angular.

We often design in pure HTML and use JS to make an application more interactive and responsive. In that, using Angular JS it'll make it more efficient and interactive from an operational point of view.

Web API is always working in the background to connect with the database and provide a required view to the front end.

Here we are designing on HTML and Angular to make it lightweight and using Web API to perform database activities.

Code to Load Value from database to HTML table:

Angular Code

var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope, $http) {
    $scope.info = [];
    $scope.loadPeople = function() {
        $scope.info = [];
        var httpRequest = $http({
            method: 'GET',
            url: "http://www.webapi.com/Operation/GetDetail", // Calling WebAPI and its Get Method to get detail.
            data: ""
        }).then(function successCallback(response) {
            result = response.data;
            var obj = JSON.parse(result); // Converting response data into an object
            angular.forEach(obj, function(obj) {
                $scope.info.push(obj); //  Pusing every object into a Scope to bind with HTML Table
            });
        }, function errorCallback(response) {});
    };
    $scope.loadPeople(); // Calling loadPeople function on load of HTML Page
});

HTML Code

<table id="tblExport" class="table table-bordered" ng-show="info.length>0">
    <tr>
        <th ng-click="SortAsc('first')">First Name</th>
        <th>Last Name</th>
        <th ng-click="SortAsc('course')">Course</th>
        <th ng-click="SortAsc('fees')">Fees</th>
        <td>Remove</td>
        <td>Edit</td>
    </tr>
    <tr ng-repeat="i in info|filter:searchVal| orderBy:myVal">
        <!-- Repeating each list and binding with new tr of a table.  -->
        <td style="display:none;">{{i.id}}</td>
        <td>{{i.firstName}}</td>
        <td>{{i.lastName}}</td>
        <td>{{i.course}}</td>
        <td>{{i.fees}}</td>
        <td><span ng-click="DeleteInfoAPI($index)">X</span></td>
        <td><span ng-click="Edit($index)">Edit</span></td>
    </tr>
</table>

WebAPI Method to Get data,

[HttpGet]
[Route("GetDetail")]
public string GetInfo() {
    ApiBAL.ApiBAL BAL = new ApiBAL.ApiBAL();
    List < InfoModel > infoList = new List < InfoModel > ();
    DataTable dtTable = BAL.GetDataTable_SQL("Select * from tblinfo", "trainingdb");
    infoList = ApiBAL.Helper.DataTableToList < InfoModel > (dtTable); // Converting datatable to list of mentioned type i.e "InfoModel"
    // Serialized the list into Json String
    String serializedString = JsonConvert.SerializeObject(ApiBAL.Helper.DataTableToList < InfoModel > (dtTable));
    return serializedString;
}

Angular & WebAPI Method to save data:

$scope.AddInfoAPI = function() {
        if ($scope.mySelect != "-1") {
            var info = {};
            var result;
            // create an object to send as a data
            info = {
                firstName: $scope.firstName,
                lastName: $scope.lastName,
                course: $scope.mySelect,
                fees: $scope.fees
            };
            $.ajax({
                type: "POST",
                url: "http://www.webapi.com/Operation/SaveDetail",
                cache: false,
                dataType: "json",
                contentType: 'application/json; charset=utf-8',
                //Sending an object into a json string using "Stringify" method
                data: JSON.stringify(info),
                //async: false,
                success: function(response) {
                    result = response;
                    if (result == 'Done') {
                        alert('Record added successfully');
                        $scope.loadPeople();
                    }
                }
            }).fail(function(jqXHR, textStatus, errorThrown) {
                alert(errorThrown);
                result = null;
            });
            clearField();
        } else {
            alert("Please select Valid Course.")
        }
    }
    [HttpPost]
    [Route("SaveDetail")]
public string SaveInfo([FromBody] InfoModel info) // Using [FromBody] we receive whole list in a type model to process.
{
    ApiBAL.ApiBAL BAL = new ApiBAL.ApiBAL();
    Hashtable ht = new Hashtable();
    ht.Add("@type", "Save");
    ht.Add("@firstName", info.firstName);
    ht.Add("@lastName", info.lastName);
    ht.Add("@course", info.course);
    ht.Add("@fees", info.fees);
    string result = BAL.SaveData_SQL(ht, "basicCRUD", "TrainingDB");
    return result;
}

Saving details is the same way  we do it  in C# using SQL client code. All we need to do is check data serialization over the network to save and display.

In this process we can also remove or update details using web API methods which are as follows.

//--------------------------------------Update a record using webAPI method via angular function call-----------------
[Route("UpdateDetail")]
[HttpPost]
public string UpdateInfo([FromBody] InfoModel info) {
    ApiBAL.ApiBAL BAL = new ApiBAL.ApiBAL();
    Hashtable ht = new Hashtable();
    ht.Add("@type", "Update");
    ht.Add("@id", info.id);
    ht.Add("@firstName", info.firstName);
    ht.Add("@lastName", info.lastName);
    ht.Add("@course", info.course);
    ht.Add("@fees", info.fees);
    string result = BAL.SaveData_SQL(ht, "basicCRUD", "TrainingDB");
    return result;
}
$scope.UpdateInfoAPI = function() {
    if ($scope.mySelect != "-1") {
        var result;
        info = {
            id: $scope.id,
            firstName: $scope.firstName,
            lastName: $scope.lastName,
            course: $scope.mySelect,
            fees: $scope.fees
        };
        $.ajax({
            type: "POST",
            url: "http://www.webapi.com/Operation/UpdateDetail",
            cache: false,
            dataType: "json",
            contentType: 'application/json; charset=utf-8',
            //data: _data,
            data: JSON.stringify(info),
            //async: false,
            success: function(response) {
                result = response;
                if (result == 'Done') {
                    $scope.loadPeople();
                    alert('Record updated successfully');
                }
            }
        }).fail(function(jqXHR, textStatus, errorThrown) {
            alert(errorThrown);
            result = null;
        });
        $scope.chk = false;
        clearField();
    }
}
//--------------------------------------Delete a record using webAPI method via angular function call-----------------
[Route("DeleteDetail")]
[HttpPost]
public int DeleteInfo([FromBody] InfoModel info) {
    int id = info.id;
    ApiBAL.ApiBAL BAL = new ApiBAL.ApiBAL();
    int result = BAL.SaveData_SQL("delete from tblinfo where id=" + id, "traingindb");
    return result;
}
$scope.DeleteInfoAPI = function(index) {
    var id = $scope.info[index].id;
    info = {
        id: id
    };
    var httpreques = $http({
        method: 'POST',
        url: "http://www.webapi.com/Operation/DeleteDetail",
        data: JSON.stringify(info),
    }).then(function success() {
        alert("Detail deleted successfully");
        $scope.loadPeople();
    }, function errorCallback(response) {
        /
    });
}

In the above example a CRUD operation has been performed using WebAPI and the results are bound in HTML form using Angular js.

For reference, I will be attaching an HTML file from where a Web API call is made to access the database.

All references and code have been mentioned in the above blog.

Good day!!