In the previous we saw how to create a Login form using AngularJS in ASP.NET MVC C#. In this post let’s see how we can bind HTML Table or Grid in ASP.NET MVC C# using AngularJS.
Angular JS Bind Grid Html Table from SQL in ASP.NET MVC C#:
I’m using Microsoft’s Northwind database for this application and SQL server 2014.
Create a new ASP.NET MVC project in Visual studio with name “AngularGrid”.
In the newly created mvc project, Add an empty MVC controller with name DashboardController.cs and edit it as below :
AngularGrid > Controllers > DashboardController.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;
using System.Web.Script.Serialization;
using Newtonsoft.Json;
using AngularGrid.Models;
namespace AngularGrid.Controllers
{
public class DashboardController : Controller
{
SqlConnection con;
SqlDataAdapter adapter;
DataTable dt;
// GET: Dashboard
public ActionResult Index()
{
return View();
}
public string GetData()
{
try
{
con = new SqlConnection(ConfigurationManager.ConnectionStrings["con"].ConnectionString.ToString());
con.Open();
adapter = new SqlDataAdapter(new SqlCommand("Select distinct ShipName,ShipAddress,ShipCity from Invoices", con));
dt = new DataTable();
adapter.Fill(dt);
con.Close();
return JsonConvert.SerializeObject(dt);
}
catch (Exception ex)
{
return "Exception:" + ex.Message.ToString();
}
}
}
}
The GetData() method will fetch data from our MS SQL Database to show on our AngularJS table or grid. The call to the GetData() method will be made using AngularJS javascript method which we will see shortly. Below is my SQL
Database snapshot:
In your web.config file add your Database’s connectionstring with name “con” as shown below:
AngularGrid > Web.config > connectionstring :
<connectionStrings> <add connectionString="Data Source=192.168.0.192;Initial Catalog=NorthWind;User ID=sa;Password=789;Integrated Security=True" name="con"/> </connectionStrings>
Now add AngularJS file in your Scripts folder of your project using the link below and add another javascript file with name angulargrid.js
1.AngularGrid > Scripts > angular.min.js (Download Link for AngularJS).
2.AngularGrid > Scripts > angulargrid.js
Edit angulargrid.js file as shown below:
AngularGrid > Scripts > angulargrid.js:
var app = angular.module('gridapp', []);
app.controller("DashboardController", function ($scope, $http) {
$scope.btntext = "Fill Table";
$scope.filltable = function () {
$scope.btntext = "Please wait....";
$http({
method: "POST",
url: '/Dashboard/GetData',
data: $scope.Users
}).then(function (response) {
var k = JSON.parse(JSON.stringify(response.data));
$scope.que = k;
$scope.btntext = "Fill Table";
}, function (error) {
var k = JSON.parse(JSON.stringify(response.data));
alert(k.message);
$scope.btntext = "Fill Table";
});
}
})
The filltable function will call Dashboard/GetData() method which will return our JSON data from the MVC controller to our MVC view.
In the DashboardController.cs controller, right-click on the Index() method and add a view for it with name Index.cshtml.
AngularGrid > Views > Dashboard > Index.cshtml :
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<style>
.parent {
width: 100%;
padding: 50px 20px;
}
body {
margin: 0 !important;
padding: 0 !important;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.defaultbtn {
background-color: #2A3132;
padding: 5px;
color: #fff;
}
</style>
<title>ASP.NET MVC AngularJS GRID</title>
</head>
<body ng-app="gridapp" ng-controller="DashboardController">
<div style="background-color:#2A3132;width:100%;padding:1px;">
<center><h2 style="color:white">ASP.NET MVC AngularJS GRID</h2></center>
</div>
<div class="parent">
<br /><br />
<input class="btn btn-primary defaultbtn" type="button" value="{{btntext}}"
ng-click="filltable()" />
<br /><br />
<table class="table-condensed table-bordered">
<thead>
<tr>
<th>Ship Name</th>
<th>Ship Address</th>
<th>Ship City</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in que">
<td>{{item.ShipName}}</td>
<td>{{item.ShipAddress}}</td>
<td>{{item.ShipCity}}</td>
</tr>
</tbody>
</table>
</div>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angulargrid.js"></script>
</body>
</html>
The “Fill Table” button will call our FillTable() function in the AngularJS file which will in-turn make a call to the controller method- GetData() and return JSON string to our MVC view. The $scope.que object will be having the json return object from the controller which we are using to display it on our HTML table/Grid in the view using the Angular ng-repeat feature. Now run your application to fill your MVC table or grid with the help of AngularJS javascript.
Also see:
AngularJS – Creating Login form using AngularJS in ASP.NET MVC C# and SQL Database.