Populate HTML Table from Database using AngularJS in ASP.Net MVC

sowjanya

SOLVED CLOSED ACTIVE ANSWERED
User: sowjanya
Posted: on May 16, 2018 05:07 AM
Forum: ASP.Net MVC
Answer: 1
Views: 9723
Sample Code: Download

How to bind data to table from database using Angulajs in mvc.net

this is my controller code

        FetchEntities _fetchDataEntities = new FetchEntities();
        // GET: /Cust/
        public ActionResult Index()
        {
            return View();
        }
        public JsonResult Get_AllCustomers()
        {
            List<Cust> Emp = _fetchDataEntities.Custs.ToList();
                return Json(Emp, JsonRequestBehavior.AllowGet);
           
        }

$scope.GetAllData = function () {
    $http({
        method: "get",
        url: "/Cust/Get_AllCustomers"
    }).then(function (response) {
        $scope.employees = response.data;
    }, function () {
        alert("Error Occur for get  cust");
    })
};

my cshtml code is

@{
    ViewBag.Title = "Index";
}

<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/crudang.js"></script>
<style>
    .btn-space {
        margin-left: -5%;
        background-color: cornflowerblue;
        font-size: large;
    }
</style>
<h2>Index</h2>
<div ng-app="myApp">
    <div ng-controller="myCtrl" ng-init="GetAllData()" class="divList">
        <p class="divHead">List of Employee</p>
        <table cellpadding="12" class="table table-bordered table-hover">
            <tr>
                <td>
                    <b>ID</b>
                </td>
                <td>
                    <b>Name</b>
                </td>
                <td>
                    <b>Country</b>
                </td>
                
                <td>
                    <b>Actions</b>
                </td>
            </tr>
            <tr ng-repeat="Cust in employees">
                <td>
                    {{Emp.CustID}}
                </td>
                <td>
                    {{Emp.CustName}}
                </td>
                <td>
                    {{Emp.Country}}
                </td>
               
                <td>
                    <input type="button" class="btn btn-warning" value="Update" ng-click="UpdateEmp(Emp)" />
                    <input type="button" class="btn btn-danger" value="Delete" ng-click="DeleteEmp(Emp)" />
                </td>
            </tr>
        </table>
        <div class="form-horizontal" role="form">
            <div class="container">
                <div class="row">
                    <h2>
                        <span id="spn">Add New Employee</span>
                    </h2>
                </div>
                <div class="row">
                    <div class="col-sm-6 col-lg-4">
                        <div class="form-group">
                            <label class="col-md-4 control-label">Name:</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" id="inputEmail" placeholder="Name" ng-model="EmpName">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-4">
                        <div class="form-group">
                            <label class="col-md-4 control-label">City:</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" id="inputPassword" placeholder="City" ng-model="EmpCity">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-4">
                        <div class="form-group">
                            <label class="col-md-4 control-label">Age:</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" id="inputLabel3" placeholder="Age" ng-model="EmpAge">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6 col-lg-4">
                        <input type="button" id="btnSave" class="form-control btn-space" value="Submit" ng-click="InsertData()" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    @Html.Hidden("EmpID_")
</div>

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 3

Reply
ANSWER
User: dharmendr
Replied: on May 16, 2018 06:12 AM
Modified: on May 16, 2018 06:15 AM
Report

Hi sowjanya,

Check this example. Now please take its reference and correct your code.

Refering the below articles i have created the example.

Database

Here I am making use of Microsoft’s Northwind Database. You can download it from here.

Download and install Northwind Database

Controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public JsonResult Get_AllCustomers()
    {
        NorthwindEntities entities = new NorthwindEntities();
        List<Customer> Emp = entities.Customers.Take(10).ToList();
        return Json(Emp, JsonRequestBehavior.AllowGet);
    }
}

View

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('myApp', [])
        app.controller('myCtrl', function ($scope, $http, $window) {
            $scope.GetAllData = function () {
                $http({
                    method: "POST",
                    url: "/Home/Get_AllCustomers",
                    dataType: 'json',
                    data: {},
                    headers: { "Content-Type": "application/json" }
                }).then(function (response) {
                    $scope.employees = response.data;
                }, function () {
                    $window.alert(response.Message);
                });
            }
        });
    </script>
    <div ng-app="myApp">
        <div ng-controller="myCtrl">
            <input type="button" value="Generate Table" ng-click="GetAllData()" />
            <p class="divHead">List of Employee</p>
            <table cellpadding="12" class="table table-bordered table-hover">
                <tr>
                    <td>
                        <b>ID</b>
                    </td>
                    <td>
                        <b>Name</b>
                    </td>
                    <td>
                        <b>Country</b>
                    </td>
                    <td>
                        <b>Actions</b>
                    </td>
                </tr>
                <tr ng-repeat="Emp in employees">
                    <td>
                        {{Emp.CustomerID}}
                    </td>
                    <td>
                        {{Emp.ContactName}}
                    </td>
                    <td>
                        {{Emp.Country}}
                    </td>
                    <td>
                        <input type="button" class="btn btn-warning" value="Update" ng-click="UpdateEmp(Emp)" />
                        <input type="button" class="btn btn-danger" value="Delete" ng-click="DeleteEmp(Emp)" />
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Populate HTML Table from Database using AngularJS in ASP.Net MVC

Perform HTTP POST to Controller using AngularJS $http POST service in ASP.Net MVC

AngularJS Table: Populate (Bind) dynamic HTML Table from JSON using ng-repeat in AngularJS

Company

Explore

Follow us

Contact Us