Introduction

In this article we are going to see how to create a custom deferred grid in MVC using Web API and Angular JS. We will be creating a custom UI for the grid and using web API and angular JS $http services we will fetch the data from the database. Normally we uses ADO.Net Entity data model as the model class when we work with a Web API right? Instead of using an Entity data model, here we are going to use our normal SqlDataAdapter and SqlConnection and stored procedure to get the data from our database. We uses Virtual Repeat in Angular JS for loading the data in UI, so that the data will be loaded when ever there is a user action that is scrolling (Virtual Scrolling). So that in the view port we will load only few items first. Now shall we go and see this in detail? I hope you will like this.

Download the source code

You can always download the source code here:

• Custom Deferred Grid Using MVC Web API And Angular JS
• Trials Database SQL Script

Background

We have so many plugins available to show the data in a grid format. Isn’t it? if you want to know a few of them, you can find it here. Now, what if you need to show the data in a grid format without using any additional plugins? What if you need to load the data to that grid dynamically that is whenever the user scrolls the grid? If you could not find the answer to these questions, here in this post I am going to share an option. I hope you will enjoy reading.

Create an MVC application

Click File-> New-> Project then select MVC application. Before going to start the coding part, make sure that Angular JS is installed. You can all the items mentioned above from NuGet. Right click on your project name and select Manage NuGet packages.

Angular JS NuGet Package Visual Studio

Once you have installed, please make sure that all the items are loaded in your scripts folder.

Using the code

I hope everything is set now, then it is time to start our coding. First we will create a controller action and a view. Below is the code snippet of our controller.

[csharp]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Custom_Deffered_Grid_Using_MVC_Web_API_And_Angular_JS.Controllers
{
public class DefaultController : Controller
{
// GET: Default
public ActionResult Index()
{
return View();
}
}
}
[/csharp]

Here Default/em> is my controller name. Now create a view for this action, and load the needed references.

[html]

@{
ViewBag.Title = “Index”;
}

<h2>Index</h2>
<link href=”~/Content/angular-material.css” rel=”stylesheet” />
<script src=”~/scripts/angular.min.js”></script>
<script src=”~/scripts/angular-route.min.js”></script>
<script src=”~/scripts/angular-aria.min.js”></script>
<script src=”~/scripts/angular-animate.min.js”></script>
<script src=”~/scripts/angular-messages.min.js”></script>
<script src=”~/scripts/angular-material.js”></script>
<script src=”~/scripts/svg-assets-cache.js”></script>
<script src=”~/scripts/Default/Default.js”></script>
[/html]

You can get this files from the source code attached with this article. And the file Default.js is the additional file where we are requested to do our additional scripts. So far the basic implementation of our view is done. Now we will create a Web API and additional model class to fetch the data from the database. Are you ready?

Below is my Web API controller.

[csharp]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using Custom_Deffered_Grid_Using_MVC_Web_API_And_Angular_JS.Models;
namespace Custom_Deffered_Grid_Using_MVC_Web_API_And_Angular_JS.Controllers
{
public class DataAPIController : ApiController
{
DataModel dm = new DataModel();
public string getData(int id)
{
var d = dm.fetchData(id);
return d;
}
}

}
[/csharp]

Have you noticed that I have included using Custom_Deffered_Grid_Using_MVC_Web_API_And_Angular_JS.Models; in the section? This is to ensure that we can use the model classes whatever we have creates so far. In this case DataModel is our model class and we are creating an instance for the same.

[csharp]
DataModel dm = new DataModel();
[/csharp]

The controller action getData accepting the parameter id right? This is actually the page offset value which we are passing from the client side. Now we will create our model class, you can find the code snippets below for that.

[csharp]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.Sql;
using System.Data.SqlClient;
using System.Configuration;
namespace Custom_Deffered_Grid_Using_MVC_Web_API_And_Angular_JS.Models
{
public class DataModel
{
public string fetchData(int pageOffset)
{
string connection = ConfigurationManager.ConnectionStrings[“TrialsDBEntities”].ConnectionString;
using (SqlConnection cn = new SqlConnection(connection))
{
SqlCommand cmd = new SqlCommand(“usp_Get_SalesOrderDetailPage”, cn);
cmd.Parameters.Add(“@pageoffset”, SqlDbType.Int).Value = pageOffset;
cmd.CommandType = CommandType.StoredProcedure;
try
{
DataTable dt = new DataTable();
SqlDataAdapter da = new SqlDataAdapter(cmd);
cn.Open();
da.Fill(dt);
return GetJson(dt);
}
catch (Exception)
{
throw;
}

}
}
}
}
[/csharp]

As I said before, instead of using an entity model we uses our normal sql connections and sql data adapter to load the data. Before going to use this function, please make sure that you have added the below references.

[csharp]
using System.Data;
using System.Data.Sql;
using System.Data.SqlClient;
using System.Configuration;
[/csharp]

Now coming back to the fetchData function , We uses the connection string TrialsDBEntities from the web config file. So it is mandatory that you must have a connection string with that name in your web config file. Once that is done, we calls the stored procedure usp_Get_SalesOrderDetailPage and fill the data using SqlDataAdapter.

Another thing to be notified here is we are passing that DataTable to a function called GetJson. So you must have the definition for that too.

[csharp]
public string GetJson(DataTable dt)
{
try
{
if (dt == null)
{
throw new ArgumentNullException(“dt”);
}
System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
List<Dictionary<string, object>> rows =
new List<Dictionary<string, object>>();
Dictionary<string, object> row = null;
foreach (DataRow dr in dt.Rows)
{
row = new Dictionary<string, object>();
foreach (DataColumn col in dt.Columns)
{
row.Add(col.ColumnName.Trim(), dr[col]);
}
rows.Add(row);
}
return serializer.Serialize(rows);
}
catch (Exception)
{
throw;
}
}
[/csharp]

What this function does it, converting the data table to a JSON format. So far, the coding related to Web API is done, now it is time to create a database, table, a stored procedure.

Create a database

The following query can be used to create a database in your SQL Server.

[sql]
USE [master]
GO

/****** Object: Database [TrialsDB] Script Date: 25-Feb-16 12:34:32 PM ******/
CREATE DATABASE [TrialsDB]
CONTAINMENT = NONE
ON PRIMARY
( NAME = N’TrialsDB’, FILENAME = N’C:\Program Files\Microsoft SQL Server\MSSQL11.MSSQLSERVER\MSSQL\DATA\TrialsDB.mdf’ , SIZE = 3072KB , MAXSIZE = UNLIMITED, FILEGROWTH = 1024KB )
LOG ON
( NAME = N’TrialsDB_log’, FILENAME = N’C:\Program Files\Microsoft SQL Server\MSSQL11.MSSQLSERVER\MSSQL\DATA\TrialsDB_log.ldf’ , SIZE = 1024KB , MAXSIZE = 2048GB , FILEGROWTH = 10%)
GO

ALTER DATABASE [TrialsDB] SET COMPATIBILITY_LEVEL = 110
GO

IF (1 = FULLTEXTSERVICEPROPERTY(‘IsFullTextInstalled’))
begin
EXEC [TrialsDB].[dbo].[sp_fulltext_database] @action = ‘enable’
end
GO

ALTER DATABASE [TrialsDB] SET ANSI_NULL_DEFAULT OFF
GO

ALTER DATABASE [TrialsDB] SET ANSI_NULLS OFF
GO

ALTER DATABASE [TrialsDB] SET ANSI_PADDING OFF
GO

ALTER DATABASE [TrialsDB] SET ANSI_WARNINGS OFF
GO

ALTER DATABASE [TrialsDB] SET ARITHABORT OFF
GO

ALTER DATABASE [TrialsDB] SET AUTO_CLOSE OFF
GO

ALTER DATABASE [TrialsDB] SET AUTO_CREATE_STATISTICS ON
GO

ALTER DATABASE [TrialsDB] SET AUTO_SHRINK OFF
GO

ALTER DATABASE [TrialsDB] SET AUTO_UPDATE_STATISTICS ON
GO

ALTER DATABASE [TrialsDB] SET CURSOR_CLOSE_ON_COMMIT OFF
GO

ALTER DATABASE [TrialsDB] SET CURSOR_DEFAULT GLOBAL
GO

ALTER DATABASE [TrialsDB] SET CONCAT_NULL_YIELDS_NULL OFF
GO

ALTER DATABASE [TrialsDB] SET NUMERIC_ROUNDABORT OFF
GO

ALTER DATABASE [TrialsDB] SET QUOTED_IDENTIFIER OFF
GO

ALTER DATABASE [TrialsDB] SET RECURSIVE_TRIGGERS OFF
GO

ALTER DATABASE [TrialsDB] SET DISABLE_BROKER
GO

ALTER DATABASE [TrialsDB] SET AUTO_UPDATE_STATISTICS_ASYNC OFF
GO

ALTER DATABASE [TrialsDB] SET DATE_CORRELATION_OPTIMIZATION OFF
GO

ALTER DATABASE [TrialsDB] SET TRUSTWORTHY OFF
GO

ALTER DATABASE [TrialsDB] SET ALLOW_SNAPSHOT_ISOLATION OFF
GO

ALTER DATABASE [TrialsDB] SET PARAMETERIZATION SIMPLE
GO

ALTER DATABASE [TrialsDB] SET READ_COMMITTED_SNAPSHOT OFF
GO

ALTER DATABASE [TrialsDB] SET HONOR_BROKER_PRIORITY OFF
GO

ALTER DATABASE [TrialsDB] SET RECOVERY FULL
GO

ALTER DATABASE [TrialsDB] SET MULTI_USER
GO

ALTER DATABASE [TrialsDB] SET PAGE_VERIFY CHECKSUM
GO

ALTER DATABASE [TrialsDB] SET DB_CHAINING OFF
GO

ALTER DATABASE [TrialsDB] SET FILESTREAM( NON_TRANSACTED_ACCESS = OFF )
GO

ALTER DATABASE [TrialsDB] SET TARGET_RECOVERY_TIME = 0 SECONDS
GO

ALTER DATABASE [TrialsDB] SET READ_WRITE
GO
[/sql]

Now we will create a table 🙂

Create table in database

Below is the query to create table in database.

[sql]
USE [TrialsDB]
GO

/****** Object: Table [dbo].[SalesOrderDetail] Script Date: 25-Feb-16 12:35:45 PM ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[SalesOrderDetail](
[SalesOrderID] [int] NOT NULL,
[SalesOrderDetailID] [int] IDENTITY(1,1) NOT NULL,
[CarrierTrackingNumber] [nvarchar](25) NULL,
[OrderQty] [smallint] NOT NULL,
[ProductID] [int] NOT NULL,
[SpecialOfferID] [int] NOT NULL,
[UnitPrice] [money] NOT NULL,
[UnitPriceDiscount] [money] NOT NULL,
[LineTotal] AS (isnull(([UnitPrice]*((1.0)-[UnitPriceDiscount]))*[OrderQty],(0.0))),
[rowguid] [uniqueidentifier] ROWGUIDCOL NOT NULL,
[ModifiedDate] [datetime] NOT NULL,
CONSTRAINT [PK_SalesOrderDetail_SalesOrderID_SalesOrderDetailID] PRIMARY KEY CLUSTERED
(
[SalesOrderID] ASC,
[SalesOrderDetailID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

GO
[/sql]

Can we insert some data to the table now?

Insert data to table

To insert the data, I will attach a database script file along with the download file, you can either run that or insert some data by using the below query. By the way if you would like to know how to generate scripts with data in SQL Server, you can check here.

[sql]
USE [TrialsDB]
GO

INSERT INTO [dbo].[SalesOrderDetail]
([SalesOrderID]
,[CarrierTrackingNumber]
,[OrderQty]
,[ProductID]
,[SpecialOfferID]
,[UnitPrice]
,[UnitPriceDiscount]
,[rowguid]
,[ModifiedDate])
VALUES
(<SalesOrderID, int,>
,<CarrierTrackingNumber, nvarchar(25),>
,<OrderQty, smallint,>
,<ProductID, int,>
,<SpecialOfferID, int,>
,<UnitPrice, money,>
,<UnitPriceDiscount, money,>
,<rowguid, uniqueidentifier,>
,<ModifiedDate, datetime,>)
GO
[/sql]

Along with this, we can create a new stored procedure which will fetch the data. Following is the query to create the stored procedure.

[sql]
USE [TrialsDB]
GO
/****** Object: StoredProcedure [dbo].[usp_Get_SalesOrderDetailPage] Script Date: 25-Feb-16 12:53:07 PM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
— =============================================
— Author: <Author,Sibeesh Venu>
— Create date: <Create Date, 18-Feb-2016>
— Description: <Description,To fetch SalesOrderDetail Page Wise>
— =============================================
ALTER PROCEDURE [dbo].[usp_Get_SalesOrderDetailPage] @pageOffset int=0 AS BEGIN — SET NOCOUNT ON added to prevent extra result sets from
— interfering with SELECT statements.

SET NOCOUNT ON;

WITH CTE_Sales(SlNo, SalesOrderID,SalesOrderDetailID,CarrierTrackingNumber,OrderQty,ProductID,UnitPrice,ModifiedDate) AS
( SELECT ROW_NUMBER() over (
ORDER BY ModifiedDate DESC) AS SlNo,
SalesOrderID,
SalesOrderDetailID,
CarrierTrackingNumber,
OrderQty,
ProductID,
UnitPrice,
ModifiedDate
FROM dbo.SalesOrderDetail)
SELECT *
FROM CTE_Sales
WHERE SlNo>=@pageOffset
AND SlNo<@pageOffset+10 END

–[usp_Get_SalesOrderDetailPage] 4
[/sql]

Here we are using Common Table Expressions in SQL Server. If you are new to CTE, you can always see here Common Table Expression Example for some more informations regarding that. It seems the database is ready with the data now. Then we can go back to our view. We will change our view as follows with the custom styles.

[html]

@{
ViewBag.Title = “Index”;
}

<h2>Index</h2>
<link href=”~/Content/angular-material.css” rel=”stylesheet” />
<style>
.virtualRepeatdemoDeferredLoading #vertical-container {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 1px 10px 10px 1px #ccc;
background-color: #fff;
width: 40%;
height: 390px;
margin: 20px;
}

.virtualRepeatdemoDeferredLoading .repeated-item {
border-bottom: 1px solid #ddd;
box-sizing: border-box;
height: 40px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 1px 10px 10px 1px #ccc;
background-color: #fff;
width: 90%;
height: 120px;
margin: 20px;
color: #aaa;
font-size: 12px;
line-height: 20px;
}

.virtualRepeatdemoDeferredLoading md-content {
margin: 16px;
}

.virtualRepeatdemoDeferredLoading md-virtual-repeat-container {
border: solid 1px grey;
}

.virtualRepeatdemoDeferredLoading .md-virtual-repeat-container .md-virtual-repeat-offsetter div {
padding-left: 16px;
}

#introduction {
border-bottom: 1px solid #ddd;
box-sizing: border-box;
height: 40px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 1px 10px 10px 1px #ccc;
background-color: #fff;
width: 98%;
height: 70px;
color: #aaa;
font-size: 12px;
line-height: 25px;
}
</style>
<div ng-controller=”AppCtrl as ctrl” ng-cloak=”” class=”virtualRepeatdemoDeferredLoading” ng-app=”MyApp”>
<md-content layout=”column”>
<div id=”introduction”>
<p>
Please scroll the Grid to load the data from database. This is a simple demo of deffered or virtual data loading in Angular JS.
We created this application MVC with Web API to fetch the data. I hope you enjoyed the demo. Please visit again 🙂
</p>
</div>
<md-virtual-repeat-container id=”vertical-container”>
<div md-virtual-repeat=”item in ctrl.dynamicItems” md-on-demand=”” class=”repeated-item” flex=””>
<div> <b>SlNo:</b> {{item.SlNo}}, <b>SalesOrderID:</b> {{item.SalesOrderID}}</div>
<div> <b>SalesOrderDetailID:</b> {{item.SalesOrderDetailID}}, <b>CarrierTrackingNumber:</b> {{item.CarrierTrackingNumber}}</div>
<div> <b>OrderQty:</b> {{item.OrderQty}}, <b>ProductID:</b> {{item.ProductID}}</div>
<div> <b>UnitPrice:</b> {{item.UnitPrice}}</div>
</div>
</md-virtual-repeat-container>

</md-content>

</div>
<script src=”~/scripts/angular.min.js”></script>
<script src=”~/scripts/angular-route.min.js”></script>
<script src=”~/scripts/angular-aria.min.js”></script>
<script src=”~/scripts/angular-animate.min.js”></script>
<script src=”~/scripts/angular-messages.min.js”></script>
<script src=”~/scripts/angular-material.js”></script>
<script src=”~/scripts/svg-assets-cache.js”></script>
<script src=”~/scripts/Default/Default.js”></script>
[/html]

As you can see form the above code, our Angular JS controller is ng-controller=”AppCtrl as ctrl” and the Angular JS app is ng-app=”MyApp”. We uses md-virtual-repeat as a repeater control, so that it can be used to loop through the object item in ctrl.dynamicItems. Now it is time to create our Angular JS scripts. Shall we?

We can create our Angular App and Controller as follows.

[js]
(function () {
‘use strict’;
angular
.module(‘MyApp’, [‘ngMaterial’, ‘ngMessages’, ‘material.svgAssetsCache’])
.controller(‘AppCtrl’, function ($http, $timeout) {
});
})();
[/js]

Now in the controller we will add a function with some predefined items as follows.

[js]
var DynamicItems = function () {
this.loadedPages = {};
this.numItems = 0;
this.PAGE_SIZE = 10;
this.fetchNumItems_();
};
[/js]

Here loadedPages is the data collection which is keyed by the page number (Our parameter id in the controller). And numItems is the total number of items. PAGE_SIZE is the number of items to be fetched from each requests.

Now we will create a function to calculate the length of the records.

[js]
DynamicItems.prototype.getLength = function () {
return this.numItems;
};
[/js]

This numItems can be set in the below function.

[js]
DynamicItems.prototype.fetchNumItems_ = function () {
$timeout(angular.noop, 300).then(angular.bind(this, function () {
this.numItems = 1000;
}));
};
[/js]

Here we are setting the numItems as 1000 for demo purposes, you can always get the count from database and assign it here with a $http request as we load the data from database here, you are yet to see that, no worries.

Below is the function to get the item by index.

[js]
DynamicItems.prototype.getItemAtIndex = function (index) {
var pageNumber = Math.floor(index / this.PAGE_SIZE);
var page = this.loadedPages[pageNumber];

if (page) {
return page[index % this.PAGE_SIZE];
} else if (page !== null) {
this.fetchPage_(pageNumber);
}
};
[/js]

Here is the main part that to load the data from database using a $http service in Angular JS.

[js]
DynamicItems.prototype.fetchPage_ = function (pageNumber) {
this.loadedPages[pageNumber] = null;
$timeout(angular.noop, 300).then(angular.bind(this, function () {
var thisObj = this;
this.loadedPages[pageNumber] = [];
var pageOffset = pageNumber * this.PAGE_SIZE;
var myData;
var url = ”;
url = ‘api/DataAPI/’ + pageOffset;
$http({
method: ‘GET’,
url: url,
}).then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
myData = JSON.parse(response.data);
pushLoadPages(thisObj, myData)
}, function errorCallback(response) {
console.log(‘Oops! Something went wrong while fetching the data. Status Code: ‘ + response.status + ‘ Status statusText: ‘ + response.statusText);
// called asynchronously if an error occurs
// or server returns response with an error status.
});
}));
};
[/js]

As you can see calls our Web API ( url = ‘api/DataAPI/’ + pageOffset;) from $http service, the callback function successCallback will get the data from database as a response. Once we get the response, we will pass the data to a function pushLoadPages to push the data items to the loadedPages. Cool right? Below is the code snippets for that function.

[js]
function pushLoadPages(thisObj, servData) {
if (servData != undefined) {
for (var i = 0; i < servData.length; i++) {
thisObj.loadedPages[pageNumber].push(servData[i]);
}
}
}
[/js]

Here is the complete code for our Angular JS.

Angular JS Complete Code

[js]
(function () {
‘use strict’;
angular
.module(‘MyApp’, [‘ngMaterial’, ‘ngMessages’, ‘material.svgAssetsCache’])
.controller(‘AppCtrl’, function ($http, $timeout) {
var DynamicItems = function () {
this.loadedPages = {};
this.numItems = 0;
this.PAGE_SIZE = 10;
this.fetchNumItems_();
};
DynamicItems.prototype.getItemAtIndex = function (index) {
var pageNumber = Math.floor(index / this.PAGE_SIZE);
var page = this.loadedPages[pageNumber];

if (page) {
return page[index % this.PAGE_SIZE];
} else if (page !== null) {
this.fetchPage_(pageNumber);
}
};
DynamicItems.prototype.getLength = function () {
return this.numItems;
};
DynamicItems.prototype.fetchPage_ = function (pageNumber) {
this.loadedPages[pageNumber] = null;
$timeout(angular.noop, 300).then(angular.bind(this, function () {
var thisObj = this;
this.loadedPages[pageNumber] = [];
var pageOffset = pageNumber * this.PAGE_SIZE;
var myData;
var url = ”;
url = ‘api/DataAPI/’ + pageOffset;
$http({
method: ‘GET’,
url: url,
}).then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
myData = JSON.parse(response.data);
pushLoadPages(thisObj, myData)
}, function errorCallback(response) {
console.log(‘Oops! Something went wrong while fetching the data. Status Code: ‘ + response.status + ‘ Status statusText: ‘ + response.statusText);
// called asynchronously if an error occurs
// or server returns response with an error status.
});
function pushLoadPages(thisObj, servData) {
if (servData != undefined) {
for (var i = 0; i < servData.length; i++) {
thisObj.loadedPages[pageNumber].push(servData[i]);
}
}
}
}));
};
DynamicItems.prototype.fetchNumItems_ = function () {
$timeout(angular.noop, 300).then(angular.bind(this, function () {
this.numItems = 1000;
}));
};
this.dynamicItems = new DynamicItems();
});
})();
[/js]

Now it is time to see the output.

Output

Custom Deferred Grid Using MVC Web API And Angular JS Output

Custom Deferred Grid Using MVC Web API And Angular JS Deferred Output

Have a happy coding.

Reference

• Angular JS Materials

Conclusion

Did I miss anything that you may think which is needed? Did you try Web API yet? Have you ever wanted to do this requirement? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on Stack Overflow instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

As the article title implies, we are actually going to load the tags from a table called tblTags from SQL Server database. So now we will go and create our application. I hope you will like this.

Download the source code

You can always download the source code here: Load Tags From Database Using Angular JS In MVC Web API

Background

Few days back I was trying to use the tagIt widget in one of my application. I could do that with some pre defined tags as a variable. Then I thought why don’t we try some thing like loading these tags from database. Hence my application uses MVC architecture, I selected Web API for retrieving the data from database. I hope someone can find this useful.

Create a MVC application

Click File-> New-> Project then select MVC application. Before going to start the coding part, make sure that all the required extensions/references are installed. Below are the required things to start with.

You can all the items mentioned above from NuGet. Right click on your project name and select Manage NuGet packages.

Manage NuGet Package Window

Once you have installed those items, please make sure that all the items(jQuery, Angular JS files, Tag It JS files like tag-it.js) are loaded in your scripts folder.

Using the code

Before going to load the tags from a database we will try to load our tagit control with some predefined array values. No worries, later we will change this array values to the values we get from database.

Include the references in your _Layout.cshtml

As we have already installed all the packages we need, now we need to add the references, right?

[html]
@RenderBody()

@Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/jquery-2.2.0.js"></script>
<script src="~/Content/jquery-ui.min.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/Scripts/tag-it.min.js"></script>
<script src="~/Scripts/MyScripts/TagScripts.js"></script>
@RenderSection("scripts", required: false)
[/html]

Here TagScripts.js is the JavaScript file where we are going to write our own scripts.

Set the changes in View

So we have added the references, now we will make the changes in our view. As we uses Angular JS, we will set our ng-app and ng-controller as follows.

[html]
<div ng-app="tagApp">
<div ng-controller="tagController">
<ul id="tags"></ul>
<div id="error">Nothing found!</div>
</div>
</div>
[/html]

You can give a style as follows if you want.

[css]
<style>
#tags {
width: 25%;
}

#error {
display:none;
font-weight: bold;
color: #1c94c4;
font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
font-size: 1.1em;
}
</style>
[/css]

Oops!, I forgot to mention, please do not forget to include the CSS style sheets.

[html]
<link href="~/Content/jquery-ui.css" rel="stylesheet" />
<link href="~/Content/jquery.tagit.css" rel="stylesheet" />
[/html]

Now we can write the scripts in our TagScripts.js file.

Create Angular App

You can create an Angular module as follows.

[js]
var app;
//Angular App
app = angular.module(‘tagApp’, []);
[/js]

Here the module name must be same as we have given in ng-app in our view.

Create Angular Controller

You can create an Angular Controller as follows.

[js]
app.controller(‘tagController’, function ($scope) {
$("#tags").tagit({
availableTags: availableTags,
autocomplete: { delay: 0, minLength: 1 },
beforeTagAdded: function (event, ui) {
if ($.inArray(ui.tagLabel, availableTags) < 0) {
$(‘#error’).show();
return false;
} else {
$(‘#error’).hide();
}
}
});
});
[/js]

As you can see we have called tagit() function to initialize the tagit control. Below are the explanations to the options we have given.

availableTags are the source we need to apply to the control so that the given items can be shown on user actions.

beforeTagAdded is a callback function which gets fired before we add the new tags to the control. This function can be used to do all the needed tasks before adding the given item to the control. For example, if we need to load only the values from the database and if we need to restrict creating the new tags by the user, means user will be allowed to use only the available tags which is in the available tag array. The preceding code block does what has been explained above.

[js]
if ($.inArray(ui.tagLabel, availableTags) < 0) {
$(‘#error’).show();
return false;
} else {
$(‘#error’).hide();
}
[/js]

If user tries to add a new tag, we will show the alert div which we already set in our view.

Now it is time to see the control in our view, let us see whether it works fine, if not, we may need to go back and checks again.

Tag_It_Control_Defined_Array

Tag_It_Control_Defined_Array_If_Nothing_Found

It seems everything is fine, thank god we don’t need any debugging 🙂

Now we will create a Web API controller. Oh yeah, we are going to start our real coding. Right click on your controller folder and click new.

Web_API_controller

So our Web API controller is ready, then it is time to go to do some Angular JS scripts, don’t worry we will come back here.

We need to make changes to our Angular JS controller tagController as follows.

[js]
//Angular Controller
app.controller(‘tagController’, function ($scope, tagService) {
//Angular service call
var tgs = tagService.getTags();
if (tgs != undefined) {
tgs.then(function (d) {
availableTags = [];
for (var i = 0; i < d.data.length; i++) {
availableTags.push(d.data[i].tagName);
}

$("#tags").tagit({
availableTags: availableTags,
autocomplete: { delay: 0, minLength: 1 },
beforeTagAdded: function (event, ui) {
if ($.inArray(ui.tagLabel, availableTags) < 0) {
$(‘#error’).show();
return false;
} else {
$(‘#error’).hide();
}
}
});
console.log(JSON.stringify(availableTags));
}, function (error) {
console.log(‘Oops! Something went wrong while fetching the data.’);
});
}
});
[/js]

As you have noticed, we are calling an Angular JS service here. Once we get the data from the service, we are assigning it to the array which we have initialized with the predefined values, so that the data from the database will be available in the tagit control. So can we create our Angular JS service?

[js]
//Angular Service
app.service(‘tagService’, function ($http) {
//call the web api controller
this.getTags = function () {
return $http({
method: ‘get’,
url: ‘api/tag’
});
}
});
[/js]

This will fire our Web API controller and action GET api/tag. And the Web API controller will give you the results which we will format again and give to the available tag array. Sounds cool? Wait, we can do all these stuffs without Angular JS, means we can simply call a jQuery Ajax Get. Do you want to see how? Here it is.

[js]
/* Using jQuery */

$(function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
//Load the available tags from database start
$.ajax({
type: ‘GET’,
dataType: ‘json’,
contentType: ‘application/json;charset=utf-8’,
url: ‘http://localhost:56076/api/Tag’,
success: function (data) {
try {
if (data.length > 0) {
availableTags = data;
}
} catch (e) {
console.log(‘Error while formatting the data : ‘ + e.message)
}
},
error: function (xhrequest, error, thrownError) {
console.log(‘Error while ajax call: ‘ + error)
}
});
//Load the available tags from database end

$("#tags").tagit({
availableTags: availableTags,
autocomplete: { delay: 0, minLength: 1 },
beforeTagAdded: function (event, ui) {
if ($.inArray(ui.tagLabel, availableTags) < 0) {
$(‘#error’).show();
return false;
} else {
$(‘#error’).hide();
}
}
});
});
[/js]

Now only thing pending is to get the data from our API controller, we will see that part now. For that first you must create a database and a table in it right?

Create a database

The following query can be used to create a database in your SQL Server.

[sql]
USE [master]
GO

/****** Object: Database [TrialsDB] Script Date: 17-Feb-16 10:21:17 PM ******/
CREATE DATABASE [TrialsDB]
CONTAINMENT = NONE
ON PRIMARY
( NAME = N’TrialsDB’, FILENAME = N’C:\Program Files\Microsoft SQL Server\MSSQL11.MSSQLSERVER\MSSQL\DATA\TrialsDB.mdf’ , SIZE = 3072KB , MAXSIZE = UNLIMITED, FILEGROWTH = 1024KB )
LOG ON
( NAME = N’TrialsDB_log’, FILENAME = N’C:\Program Files\Microsoft SQL Server\MSSQL11.MSSQLSERVER\MSSQL\DATA\TrialsDB_log.ldf’ , SIZE = 1024KB , MAXSIZE = 2048GB , FILEGROWTH = 10%)
GO

ALTER DATABASE [TrialsDB] SET COMPATIBILITY_LEVEL = 110
GO

IF (1 = FULLTEXTSERVICEPROPERTY(‘IsFullTextInstalled’))
begin
EXEC [TrialsDB].[dbo].[sp_fulltext_database] @action = ‘enable’
end
GO

ALTER DATABASE [TrialsDB] SET ANSI_NULL_DEFAULT OFF
GO

ALTER DATABASE [TrialsDB] SET ANSI_NULLS OFF
GO

ALTER DATABASE [TrialsDB] SET ANSI_PADDING OFF
GO

ALTER DATABASE [TrialsDB] SET ANSI_WARNINGS OFF
GO

ALTER DATABASE [TrialsDB] SET ARITHABORT OFF
GO

ALTER DATABASE [TrialsDB] SET AUTO_CLOSE OFF
GO

ALTER DATABASE [TrialsDB] SET AUTO_CREATE_STATISTICS ON
GO

ALTER DATABASE [TrialsDB] SET AUTO_SHRINK OFF
GO

ALTER DATABASE [TrialsDB] SET AUTO_UPDATE_STATISTICS ON
GO

ALTER DATABASE [TrialsDB] SET CURSOR_CLOSE_ON_COMMIT OFF
GO

ALTER DATABASE [TrialsDB] SET CURSOR_DEFAULT GLOBAL
GO

ALTER DATABASE [TrialsDB] SET CONCAT_NULL_YIELDS_NULL OFF
GO

ALTER DATABASE [TrialsDB] SET NUMERIC_ROUNDABORT OFF
GO

ALTER DATABASE [TrialsDB] SET QUOTED_IDENTIFIER OFF
GO

ALTER DATABASE [TrialsDB] SET RECURSIVE_TRIGGERS OFF
GO

ALTER DATABASE [TrialsDB] SET DISABLE_BROKER
GO

ALTER DATABASE [TrialsDB] SET AUTO_UPDATE_STATISTICS_ASYNC OFF
GO

ALTER DATABASE [TrialsDB] SET DATE_CORRELATION_OPTIMIZATION OFF
GO

ALTER DATABASE [TrialsDB] SET TRUSTWORTHY OFF
GO

ALTER DATABASE [TrialsDB] SET ALLOW_SNAPSHOT_ISOLATION OFF
GO

ALTER DATABASE [TrialsDB] SET PARAMETERIZATION SIMPLE
GO

ALTER DATABASE [TrialsDB] SET READ_COMMITTED_SNAPSHOT OFF
GO

ALTER DATABASE [TrialsDB] SET HONOR_BROKER_PRIORITY OFF
GO

ALTER DATABASE [TrialsDB] SET RECOVERY FULL
GO

ALTER DATABASE [TrialsDB] SET MULTI_USER
GO

ALTER DATABASE [TrialsDB] SET PAGE_VERIFY CHECKSUM
GO

ALTER DATABASE [TrialsDB] SET DB_CHAINING OFF
GO

ALTER DATABASE [TrialsDB] SET FILESTREAM( NON_TRANSACTED_ACCESS = OFF )
GO

ALTER DATABASE [TrialsDB] SET TARGET_RECOVERY_TIME = 0 SECONDS
GO

ALTER DATABASE [TrialsDB] SET READ_WRITE
GO
[/sql]

Now we will create a table 🙂

Create table in database

Below is the query to create table in database.

[sql]
USE [TrialsDB]
GO

/****** Object: Table [dbo].[tblTags] Script Date: 17-Feb-16 10:22:00 PM ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[tblTags](
[tagId] [int] IDENTITY(1,1) NOT NULL,
[tagName] [nvarchar](50) NOT NULL,
[tagDescription] [nvarchar](max) NULL,
CONSTRAINT [PK_tblTags] PRIMARY KEY CLUSTERED
(
[tagId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

GO
[/sql]

Can we insert some data to the table now?

Insert data to table

You can use the below query to insert the data.

[sql]
USE [TrialsDB]
GO

INSERT INTO [dbo].[tblTags]
([tagName]
,[tagDescription])
VALUES
(<tagName, nvarchar(50),>
,<tagDescription, nvarchar(max),>)
GO
[/sql]

So let us say, we have inserted the data as follows.

Insertion_In_Table

Next thing we are going to do is creating a ADO.NET Entity Data Model.

Create Entity Data Model

Right click on your model folder and click new, select ADO.NET Entity Data Model. Follow the steps given. Once you have done the processes, you can see the edmx file and other files in your model folder.

ADO_NET_Model_Entity

Then it is time to go back our Web API controller. Please change the code as below.

[csharp]
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web;
using System.Web.Http;
using Load_Tags_From_DB_Using_Angular_JS_In_MVC.Models;

namespace Load_Tags_From_DB_Using_Angular_JS_In_MVC.Controllers
{
public class TagController : ApiController
{
private DBEntities db = new DBEntities();

// GET api/Tag
public IEnumerable<tblTag> Get()
{
return db.tblTags.AsEnumerable();
}
}
}
[/csharp]

Once this is done, we can say that we are finished with all steps. That’s fantastic right? Now we will see the output.

Output

Load_Tags_From_Database_Output

Have a happy coding.

Conclusion

Did I miss anything that you may think which is needed? Did you try Web API yet? Have you ever wanted to do this requirement? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

In this article, we will learn how we can work with jQuery Datatables with server-side data. Here we are going to use an MVC application with jQuery and other required packages installed in it. If you are new to MVC, You can always get the tips/tricks/blogs about that here MVC Tips, Tricks, Blogs. jQuery Datatables is a client-side grid control that is lightweight and easy to use. But when it comes to grid control, it must be usable when it supports the server-side loading of data. This control is perfect for that. I guess, it is enough for the introduction. Now we will start using our grid. I hope you will like this.

Download the source code

You can always download the source code here:

• Datatable With Server-Side Data

Create a MVC application

Click File-> New-> Project then select MVC application. Before going to start the coding part, make sure that all the required extensions/references are installed. Below are the required things to start with.

• Datatables Package
• jQuery

You can all the items mentioned above from NuGet. Right-click on your project name and select Manage NuGet packages.

Once you have installed those items, please make sure that all the items(jQuery, Datatables JS files) are loaded in your scripts folder.

Using the code

Now let us add the needed references.

Include the references in your _Layout.cshtml

As we have already installed all the packages we need, now we need to add the references, right? After adding the reference, your _Layout.cshtml will looks like below.

Here MyScripts.js is the JavaScript file where we are going to write our own scripts.

Add a normal MVC controller

Now we will add a normal MVC controller in our app. Once you add that you can see an ActionResult is created for us.

public ActionResult Index()
{
return View();
}

Right-click on the controller, and click add view, that will create a View for you. Now we will change the view as follows.

So we have set the headers and footer for our grid, where we are going to load the grid control in the table myGrid. So far the UI part is done, now it is time to set up our database and entity model. Are you ready?

Create a database

The following query can be used to create a database in your SQL Server.

Now we will create a table 🙂

Create table in database

Below is the query to create table in database.

Insert data to table

To insert the data, I will attach a database script file along with the download file, you can either run that or insert some data by using the below query. By the way, if you would like to know how to generate scripts with data in SQL Server, you can check here.

Along with this, we can create a new stored procedure that will fetch the data. Following is the query to create the stored procedure.

Next thing we are going to do is creating a ADO.NET Entity Data Model.

Create Entity Data Model

Right-click on your model folder and click new, select ADO.NET Entity Data Model. Follow the steps given. Once you have done the processes, you can see the edmx file and other files in your model folder.

Now we will go back to our controller and add a new JsonResult which can be called via a new jQuery Ajax request. No worries, we will create that Ajax requests later. Once you add the Jsonresult action, I hope your controller will look like this.

Here TrialsDBEntities is our entity class. Please be noted that to use the model classes in your controller, you must add the reference as follows.

using jQuery_Datatable_With_Server_Side_Data.Models;

I know all you are familiar with this, I am just saying!. Now can we create a function GetSales in our model class Sales ?.

We uses normal LINQ queries here, and we take only 100 records to load for now. If you don’t want to use this method you can call our stored procedure which we have created while creating our database. You can call this as explained in the below function.

Now the only thing pending is to call our controller JsonResult action right? We will do some code in our MyScript.js file.

Here “dataSrc”: “” should be used if you have a plain JSON data. The sample data can be find below.

We have done everything!. Can we see the output now?

Output

Have a happy coding.

Conclusion

Did I miss anything that you may think which is needed? Did you use jQuery Datatables in your application? Have you ever wanted to do this requirement? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

Download Source Code

Download the source code from here: Dynamic Angular JS Tabs In MVC

Background

Recently I have got a requirement to create a tab control in one of my Angular JS application. Then I thought of creating the same dynamically according to the user needs. This article is a demo of the same.

Using the code

First, we will start with creating an MVC application. Open your visual studio, then click File->New->Project. Name your project.

Now our application is launched, please go ahead and install Angular JS in your project from NuGet packages. You can see some new CSS files and scripts has been added to our project. So the set up has been done. Now what we need to do is to move on the coding part.

Create a controller

Now we can create a new controller, in my case I created a controller ‘HomeController’. In my controller I am going to call a model action which will return some dynamic data. See the code below.

[csharp]
public class HomeController : Controller
{
//
// GET: /Home/

public ActionResult Index()
{
return View();
}
public JsonResult TabData()
{
Test t = new Test();
var myList = t.GetData();
return Json(myList, JsonRequestBehavior.AllowGet);
}

}
[/csharp]

Here we have one ActionResult and one JsonResult which we are going to call as Angular JS service. As you can see I am creating an instance of my model Test, now we will create our model class. Shall we?

Create Model

I have create a model class with the name Test. Here I am creating some data dynamically using a for loop and assign those values to a list. Please see the codes below.

[csharp]
namespace AsyncActions.Models
{
public class Test
{
public List<Customer> GetData()
{
try
{
List<Customer> cst = new List<Customer>();
for (int i = 0; i < 15; i++)
{
Customer c = new Customer();
c.CustomerID = i;
c.CustomerCode = "CST" + i;
cst.Add(c);
}
return cst;
}
catch (Exception)
{
throw new NotImplementedException();
}

}
}
public class Customer
{
public int CustomerID { get; set; }
public string CustomerCode { get; set; }
}
}
[/csharp]

As you can see I am creating a list of type Customer. Is that fine? Now what is pending? Yes, a view.

Create a view

Right click on your controller and click add view, that will give you a new view in your view folder. Hope you get that.

So our view is ready, now we can do some codes in our view to populate our tab. Are you ready?

[html]
<div ng-controller="tabController" class="sample tabsdemoDynamicTabs" layout="column" ng-cloak="" ng-app="tab">
<md-content class="md-padding">
<md-tabs md-selected="selectedIndex" md-border-bottom="" md-autoselect="">
<md-tab ng-repeat="tab in tabs" ng-disabled="tab.disabled" label="{{tab.title}}">
<div class="demo-tab tab{{$index}}" style="padding: 25px; text-align: center;">
<div ng-bind="tab.content"></div>
<br>
<md-button class="md-primary md-raised" ng-click="removeTab( tab )" ng-disabled="tabs.length <= 1">Remove Tab</md-button>
</div>
</md-tab>
</md-tabs>
</md-content>
<form ng-submit="addTab(tTitle,tContent)" layout="column" class="md-padding" style="padding-top: 0;">
<div layout="row" layout-sm="column">
<div flex="" style="position: relative;">
<h2 class="md-subhead" style="position: absolute; bottom: 0; left: 0; margin: 0; font-weight: 500; text-transform: uppercase; line-height: 35px; white-space: nowrap;">Add a new Tab:</h2>
</div>
<md-input-container>
<label for="label">Label</label>
<input type="text" id="label" ng-model="tTitle">
</md-input-container>
<md-input-container>
<label for="content">Content</label>
<input type="text" id="content" ng-model="tContent">
</md-input-container>
<md-button class="add-tab md-primary md-raised" ng-disabled="!tTitle || !tContent" type="submit" style="margin-right: 0;">Add Tab</md-button>
</div>
</form>
</div>
[/html]

As you can see we are declaring our angular js controller and app name as follows.

[html]
ng-controller="tabController" class="sample tabsdemoDynamicTabs" layout="column" ng-cloak="" ng-app="tab"
[/html]

Now we will add the needed reference to our view.

Add the style sheet references

[html]
<link href="~/CSS/angular-material.css" rel="stylesheet" />
<link href="~/CSS/docs.css" rel="stylesheet" />
[/html]

Add styles for tabs

[css]
<style>
.tabsdemoDynamicTabs md-content {
background-color: transparent !important;
}

.tabsdemoDynamicTabs md-content md-tabs {
border: 1px solid #e1e1e1;
}

.tabsdemoDynamicTabs md-content md-tabs md-tab-content {
background: #f6f6f6;
}

.tabsdemoDynamicTabs md-content md-tabs md-tabs-wrapper {
background: white;
}

.tabsdemoDynamicTabs md-content h1:first-child {
margin-top: 0;
}

.tabsdemoDynamicTabs md-input-container {
padding-bottom: 0;
}

.tabsdemoDynamicTabs .remove-tab {
margin-bottom: 40px;
}

.tabsdemoDynamicTabs .demo-tab > div > div {
padding: 25px;
box-sizing: border-box;
}

.tabsdemoDynamicTabs .edit-form input {
width: 100%;
}

.tabsdemoDynamicTabs md-tabs {
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.tabsdemoDynamicTabs md-tab[disabled] {
opacity: 0.5;
}

.tabsdemoDynamicTabs label {
text-align: left;
}

.tabsdemoDynamicTabs .long > input {
width: 264px;
}

.tabsdemoDynamicTabs .md-button.add-tab {
transform: translateY(5px);
}
</style>
[/css]

Add the JS references

[html]
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-animate.min.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/Scripts/angular-aria.min.js"></script>
<script src="~/Scripts/angular-messages.min.js"></script>
<script src="~/Scripts/svg-assets-cache.js"></script>
<script src="~/Scripts/angular-material.js"></script>
<script src="~/Scripts/Module.js"></script>
[/html]

Here Module.js is the file where we are creating our Angular JS controller, Service, App. So can we go ahead and create those?

Create an app, controller, service in Angular JS

To add an app, controller, servicer in Angular JS, you need to add the codes as below.

[js]
(function () {
‘use strict’;
var app;
(function () {
//create app
app = angular.module("tab", [‘ngMaterial’, ‘ngMessages’, ‘material.svgAssetsCache’]);
//create controller
app.controller(‘tabController’, function ($scope, tabService) {
var serv = tabService.getAll();
serv.then(function (d) {
tabController(d.data, $scope);
}, function (error) {
console.log(‘Something went wrong, please check after a while’);
})
});
//create service
app.service(‘tabService’, function ($http) {
this.getAll = function () {
return $http({
url: "/Home/TabData", //Here we are calling our controller JSON action
method: "GET"
});
};
});
})();
})();
[/js]

As you can see once we get the data from the Angular JS service (tabService) to the controller (tabController), we are passing the data to a function named tabController. Below is the code for that function.

[js]
function tabController(data, $scope) {
var tabsArray = [];
for (var i = 0; i < data.length; i++) {
tabsArray.push(
{
‘title’:"Customer ID: "+ data[i].CustomerID,
‘content’: data[i].CustomerCode + " The data you are seeing here is for the customer with the Custome rCode " + data[i].CustomerCode
});
}
var tabs = tabsArray,
selected = null,
previous = null;
$scope.tabs = tabs;
$scope.selectedIndex = 0;
$scope.$watch(‘selectedIndex’, function (current, old) {
previous = selected;
selected = tabs[current];
});
$scope.addTab = function (title, view) {
view = view || title + " Content View";
tabs.push({ title: title, content: view, disabled: false });
};
$scope.removeTab = function (tab) {
var index = tabs.indexOf(tab);
tabs.splice(index, 1);
};
}
[/js]

That’s all we have created the Angular JS tabs dynamically. Shall we see the output now?

Output

Dynamic Angular JS Tabs In MVC Figure 1

Dynamic Angular JS Tabs In MVC Figure 2

References

Angular JS Tabs

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

Introduction

In this article, we will learn about CRUD operations in Web API using Angular JS. We will use Visual Studio 2015 to create a Web API and performs the operations. In this project, we are going to create a database and table called tbl_Subcribers which actually contains a list of data. Here we will use Angular JS for all of our client side operations. If you are new to Web API, please read how to retrieve the data from database using Web API here. I am going to explain the complete process in a step by step manner. I hope you will like this.

Download the source code

You can always download the source code here: Web API and Angular JS

Background

Yesterday I have got a call from one of my follower. He asked me about Web API, I have explained to him what are all the things I know about the Web API. But he was not convinced with the information I shared through the phone. At last, he asked me to write an article about Web API in a simple manner. So I agreed to do the same. Here I am dedicating this article to him. I hope he can find this useful.

What is a Web API?

A Web API is a kind of a framework which makes building HTTP services easier than ever. It can be used almost everywhere including a wide range of clients, mobile devices, browsers etc. It contains normal MVC features like Model, Controller, Actions, Routing etc. Support all HTTP verbs like POST, GET, DELETE, PUT.

Why Web API

Image Courtesy : blogs.msdn.com

Why Web API

Image Courtesy : forums.asp.net

Using the code

Creating project

We will create our project in Visual Studio 2015. To create a project click File-> New-> Project. And select Web API as a template.

Web API Template

Once you have created a new project, your solution explorer will look like this.

Web API With Angular JS Solution Explorer

As I said, we are going to use Angular JS for all of our client side operations. So the next thing we need to do is, installing the Angular JS from NuGet packages.

Installing Angular JS

Install Angular JS

Now we will create a control in our project.

CRUD_in_MVC_Using_Web_API_Adding_Control

Now will create a database. Here I am using SQL Server Management Studio With SQL Server Express.

Create Database

Below is the query to create a database.

[sql]
USE [master]
GO

/****** Object: Database [sibeeshpassion] Script Date: 06-02-2016 08:18:42 PM ******/
CREATE DATABASE [sibeeshpassion]
CONTAINMENT = NONE
ON PRIMARY
( NAME = N’sibeeshpassion’, FILENAME = N’C:\Program Files\Microsoft SQL Server\MSSQL12.MSSQLSERVER\MSSQL\DATA\sibeeshpassion.mdf’ , SIZE = 5120KB , MAXSIZE = UNLIMITED, FILEGROWTH = 1024KB )
LOG ON
( NAME = N’sibeeshpassion_log’, FILENAME = N’C:\Program Files\Microsoft SQL Server\MSSQL12.MSSQLSERVER\MSSQL\DATA\sibeeshpassion_log.ldf’ , SIZE = 2048KB , MAXSIZE = 2048GB , FILEGROWTH = 10%)
GO

ALTER DATABASE [sibeeshpassion] SET COMPATIBILITY_LEVEL = 120
GO

IF (1 = FULLTEXTSERVICEPROPERTY(‘IsFullTextInstalled’))
begin
EXEC [sibeeshpassion].[dbo].[sp_fulltext_database] @action = ‘enable’
end
GO

ALTER DATABASE [sibeeshpassion] SET ANSI_NULL_DEFAULT OFF
GO

ALTER DATABASE [sibeeshpassion] SET ANSI_NULLS OFF
GO

ALTER DATABASE [sibeeshpassion] SET ANSI_PADDING OFF
GO

ALTER DATABASE [sibeeshpassion] SET ANSI_WARNINGS OFF
GO

ALTER DATABASE [sibeeshpassion] SET ARITHABORT OFF
GO

ALTER DATABASE [sibeeshpassion] SET AUTO_CLOSE OFF
GO

ALTER DATABASE [sibeeshpassion] SET AUTO_SHRINK OFF
GO

ALTER DATABASE [sibeeshpassion] SET AUTO_UPDATE_STATISTICS ON
GO

ALTER DATABASE [sibeeshpassion] SET CURSOR_CLOSE_ON_COMMIT OFF
GO

ALTER DATABASE [sibeeshpassion] SET CURSOR_DEFAULT GLOBAL
GO

ALTER DATABASE [sibeeshpassion] SET CONCAT_NULL_YIELDS_NULL OFF
GO

ALTER DATABASE [sibeeshpassion] SET NUMERIC_ROUNDABORT OFF
GO

ALTER DATABASE [sibeeshpassion] SET QUOTED_IDENTIFIER OFF
GO

ALTER DATABASE [sibeeshpassion] SET RECURSIVE_TRIGGERS OFF
GO

ALTER DATABASE [sibeeshpassion] SET DISABLE_BROKER
GO

ALTER DATABASE [sibeeshpassion] SET AUTO_UPDATE_STATISTICS_ASYNC OFF
GO

ALTER DATABASE [sibeeshpassion] SET DATE_CORRELATION_OPTIMIZATION OFF
GO

ALTER DATABASE [sibeeshpassion] SET TRUSTWORTHY OFF
GO

ALTER DATABASE [sibeeshpassion] SET ALLOW_SNAPSHOT_ISOLATION OFF
GO

ALTER DATABASE [sibeeshpassion] SET PARAMETERIZATION SIMPLE
GO

ALTER DATABASE [sibeeshpassion] SET READ_COMMITTED_SNAPSHOT OFF
GO

ALTER DATABASE [sibeeshpassion] SET HONOR_BROKER_PRIORITY OFF
GO

ALTER DATABASE [sibeeshpassion] SET RECOVERY SIMPLE
GO

ALTER DATABASE [sibeeshpassion] SET MULTI_USER
GO

ALTER DATABASE [sibeeshpassion] SET PAGE_VERIFY CHECKSUM
GO

ALTER DATABASE [sibeeshpassion] SET DB_CHAINING OFF
GO

ALTER DATABASE [sibeeshpassion] SET FILESTREAM( NON_TRANSACTED_ACCESS = OFF )
GO

ALTER DATABASE [sibeeshpassion] SET TARGET_RECOVERY_TIME = 0 SECONDS
GO

ALTER DATABASE [sibeeshpassion] SET DELAYED_DURABILITY = DISABLED
GO

ALTER DATABASE [sibeeshpassion] SET READ_WRITE
GO
[/sql]

Now we can create a table and insert few data into it.

Create table in database

Below is the query to create table in database.

[sql]
USE [sibeeshpassion]
GO

/****** Object: Table [dbo].[tbl_Subscribers] Script Date: 06-02-2016 08:21:06 PM ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[tbl_Subscribers](
[SubscriberID] [int] NOT NULL,
[MailID] [nvarchar](50) NOT NULL,
[SubscribedDate] [datetime2](7) NOT NULL,
PRIMARY KEY CLUSTERED
(
[SubscriberID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

GO
[/sql]

Insert data to table

[sql]
INSERT INTO [dbo].[tbl_Subscribers] ([SubscriberID], [MailID], [SubscribedDate]) VALUES (1, N’sibikv4u@gmail.com’, N’2015-10-30 00:00:00′)
INSERT INTO [dbo].[tbl_Subscribers] ([SubscriberID], [MailID], [SubscribedDate]) VALUES (2, N’sibeesh.venu@gmail.com’, N’2015-10-29 00:00:00′)
INSERT INTO [dbo].[tbl_Subscribers] ([SubscriberID], [MailID], [SubscribedDate]) VALUES (3, N’ajaybhasy@gmail.com’, N’2015-10-28 00:00:00′)
[/sql]

Our database seems to be ready now. Then we can go ahead and create entity in our project.

Creating entity model

To create an entity, please follows the steps shows in the below images.

Creating Entity Model 1

Creating Entity Model 2

Creating Entity Model 3

Creating Entity Model 4

Creating Entity Model 5

Creating Entity Model 6

Now it is time to create a API controller.

Select Empty API Controller as template.

Web API Contoller With Actions

Read Operation

Now you can see some actions are already created for you by default. Cool right? Now as of now we will concentrate only in retrieving the data. So please change the method Get as follows.

[csharp]
public IEnumerable<tbl_Subscribers> Get()
{
return myEntity.tbl_Subscribers.AsEnumerable();
}
[/csharp]

Before the please do not forget to create an instance for your entity.

[csharp]
private sibeeshpassionEntities myEntity = new sibeeshpassionEntities();
[/csharp]

And make sure you have added the needed namespaces with the model.

[csharp]
using System.Data.Entity;
using WebAPIAndAngular.Models;
[/csharp]

As you can notice that we have selected Empty API Controller instead of selecting a normal controller. There are few difference between our normal controller and Empty API Controller.

Controller VS Empty API Controller

A controller normally render your views. But an API controller returns the data which is already serialized. A controller action returns JSON() by converting the data. You can get rid of this by using API controller.

Find out more: Controller VS API Controller

Now our API is ready for action. So it is time to create an another controller and a view. Here I am creating a normal controller with Index view.

Once the view is created, we will created three JS files in the script folder.

Angular JS Operation FIles

Now we will start our Angular JS part. If you are new to Angular JS, I strongly recommend you to check here.Angular JS Basics

Open the file Module.js and create an app.

[js]
var app;
(function () {
app = angular.module(“APIModule”, []);
})();
[/js]

Here APIModule is the name of our module. Check here for more information.

Open the file Service.js and create a service as follows.

[js]
app.service(“APIService”, function ($http) {
this.getSubs = function () {
return $http.get(“api/Subscriber”)
}
});
[/js]

Here APIService is our service name which we will call from our controller. The api/Subscriber will call the Get method in our API controller.

Get Operation In API Controller

Now Open our Controller.JS and write code as below.

[js]
app.controller(‘APIController’, function ($scope, APIService) {
getAll();
function getAll()
{
var servCall = APIService.getSubs();
servCall.then(function (d) {
$scope.subscriber = d.data;
}, function (error) {
$log.error(‘Oops! Something went wrong while fetching the data.’)
})
}
})
[/js]

We are calling the getSubs function which we created in our service. Once we get the data we are assigning it to the $scope.subscriber, so that we can use it in our view.

Now the angular JS part for retrieving all data is done. Can we do the needed changes in the view now?

Updating View

Open the Index.cshtml view and change it as below.

[html]

@{
ViewBag.Title = “Welcome”;
}
<style>
table, tr, td, th {
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
}
</style>

<h2>Welcome to Sibeesh Passion’s Email List</h2>
<body data-ng-app=”APIModule”>
<div id=”tblSubs” ng-controller=”APIController”>
<table>
<tr>
<th>ID</th>
<th>Email ID</th>
<th>Subscribed Date</th>
</tr>
<tbody data-ng-repeat=”sub in subscriber”>
<tr>
<td>{{sub.SubscriberID}}</td>
<td>{{sub.MailID}}</td>
<td>{{sub.SubscribedDate}}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script src=”~/Scripts/angular.js”></script>
<script src=”~/Scripts/angular-route.js”></script>
<script src=”~/Scripts/APIScripts/Module.js”></script>
<script src=”~/Scripts/APIScripts/Service.js”></script>
<script src=”~/Scripts/APIScripts/Controller.js”></script>
[/html]

Please don’r forget to load the needed scripts. Here we have set body as our data-ng-app and table as our ng-controller. We are looping through the data using data-ng-repeat.

If everything is done, we can build the application and see the output.

Wep API Get All Record

So far our READ operation is done. Now We will move into CREATE part.

Create Operation

First we will concentrate on the view part as of now. Just add the below codes to your view.

[html]
<div class=”form-group”>
<label for=”email”>Sbscribe here</label>
<input type=”email” class=”form-control” id=”email” placeholder=”Enter email” [required=”string” ] data-ng-model=”mailid” />
</div>
<button type=”button” class=”btn btn-default” data-ng-click=”saveSubs();”>Submit</button>
[/html]

This will give you an output as follows.

View Design For Create

As you can see, we are firing the function saveSubs() in data-ng-click. So let us see what we need to write in it.

In the Controller.js you need to create a function as below.

[js]
$scope.saveSubs = function () {
var sub = {
MailID: $scope.mailid,
SubscribedDate: new Date()
};
var saveSubs = APIService.saveSubscriber(sub);
saveSubs.then(function (d) {
getAll();
}, function (error) {
console.log(‘Oops! Something went wrong while saving the data.’)
})
};
[/js]

Did you see that we are calling an another function which is in our APIService. So now we need to create a function saveSubscriber in Service.js. Shall we?

[js]
this.saveSubscriber = function (sub) {
return $http({
method: ‘post’,
data: sub,
url: ‘api/Subscriber’
});
}
[/js]

So all set, the rest is to create a function in our API Controller.

[csharp]
// POST: api/Subscriber
public void Post(tbl_Subscribers sub)
{
if (ModelState.IsValid)
{
myEntity.tbl_Subscribers.Add(sub);
myEntity.SaveChanges();
}
}
[/csharp]

That’s cool, now you will be able to create data through our API with the help of Angular JS. Now shall we move into UPDATE operation.

Update Operation

Before going to the code part we will do some changes in our table design. We are going to make one field (Mail ID field) editable when ever user double clicks in it. And of course we will update the edited data to the database when ever user leaves that field. Sounds cool? Now please change the view as follows.

[html]
<div id=”tblSubs” ng-controller=”APIController”>
<table>
<tr>
<th>ID</th>
<th>Email ID ( Double click to update)</th>
<th>Subscribed Date</th>
<th></th>
</tr>
<tbody data-ng-repeat=”sub in subscriber”>
<tr>
<td>{{sub.SubscriberID}}</td>
<td ng-blur=”updSubscriber(sub,$event)” ng-dblclick=”makeEditable($event)”>{{sub.MailID}}</td>
<td>{{sub.SubscribedDate}}</td>
</tr>
</tbody>
</table>
<div class=”form-group”>
<label for=”email”>Sbscribe here</label>
<input type=”email” class=”form-control” id=”email” placeholder=”Enter email” [required=”string” ] data-ng-model=”mailid” />
</div>
<button type=”button” class=”btn btn-default” data-ng-click=”saveSubs();”>Submit</button>
</div>
[/html]

The below is the main change we did.

[html]
<td ng-blur=”updSubscriber(sub,$event)” ng-dblclick=”makeEditable($event)”>{{sub.MailID}}</td>
[/html]

In ng-blur we are calling the function updSubscriber with parameter $event and the current subscriber details. And in ng-dblclick we are calling the function makeEditable with parameter $event which actually holds the UI details and current events.

Below is the code for the function makeEditable in Controller.js

[js]
$scope.makeEditable = function (obj) {
obj.target.setAttribute(“contenteditable”, true);
obj.target.focus();
};
[/js]

As you can see we are setting the attribute contenteditable to true using setAttribute function. Now we will look into the function updSubscriber.

Add a function in Controller.js

[js]
$scope.updSubscriber = function (sub, eve) {
sub.MailID = eve.currentTarget.innerText;
var upd = APIService.updateSubscriber(sub);
upd.then(function (d) {
getAll();
}, function (error) {
console.log(‘Oops! Something went wrong while updating the data.’)
})
};
[/js]

Add a relative function in Service.js

[js]
this.updateSubscriber = function (sub) {
return $http({
method: ‘put’,
data: sub,
url: ‘api/Subscriber’
});
}
[/js]

Now we need to add a function in our Web API controller.

[csharp]
// PUT: api/Subscriber/5
public void Put(tbl_Subscribers sub)
{
if (ModelState.IsValid)
{
myEntity.Entry(sub).State = EntityState.Modified;
try
{
myEntity.SaveChanges();
}
catch (Exception)
{
throw;
}
}
}
[/csharp]

Now you will be able to update your record. What is pending now? Yes, DELETE operation.

Delete Operation

Make some changes in the view as follows.

[html]
<tbody data-ng-repeat=”sub in subscriber”>
<tr>
<td>{{sub.SubscriberID}}</td>
<td ng-blur=”updSubscriber(sub,$event)” ng-dblclick=”makeEditable($event)”>{{sub.MailID}}</td>
<td>{{sub.SubscribedDate}}</td>
<td>
<input type=”button” id=”Delete” value=”Delete” data-ng-click=”dltSubscriber(sub.SubscriberID)” />
</td>
</tr>
</tbody>
[/html]

Now add the new function in Controller.js

[js]
$scope.dltSubscriber = function (subID) {
var dlt = APIService.deleteSubscriber(subID);
dlt.then(function (d) {
getAll();
}, function (error) {
console.log(‘Oops! Something went wrong while deleting the data.’)
})
};
[/js]

Create a service in Service.js now.

[js]
this.deleteSubscriber = function (subID) {
var url = ‘api/Subscriber/’ + subID;
return $http({
method: ‘delete’,
data: subID,
url: url
});
}
[/js]

Now it is time to create our delete method in Web API controller.

[csharp]
// DELETE: api/Subscriber/5
public void Delete(int id)
{
tbl_Subscribers dlt = myEntity.tbl_Subscribers.Find(id);
if (dlt != null)
{
try
{
myEntity.tbl_Subscribers.Remove(dlt);
myEntity.SaveChanges();
}
catch (Exception)
{
throw;
}
}
}
[/csharp]

That is all. We did it. Now build your application and see an output as follows.

Web API With Angular JS

Have a happy coding.

Conclusion

Did I miss anything that you may think which is needed? Did you try Web API yet? Have you ever wanted to do this requirement? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

Background

I have already posted an article related to $http service in Angular JS, you can see here: $http Service In Angular JS

To convert your XML file to JSON, I recommend you to read here: XML to JSON In Angular JS

Source Code

Please download the source code here: XML to Li Source Code

Using the code

Create an html page first.

[html]
<!DOCTYPE html>
<html>
<head>
<title>Load XML And Show As li In Angular JS – sibeeshpassion </title>
</head>
<body>
</body>
</html>
[/html]

Now add the needed reference as follows.

[js]
<script src="jquery-2.1.3.min.js"></script>
<script src="angular.min.js"></script>
<script src="xml2json.js"></script>
[/js]

Have you noticed that I have added xml2json.js file? This is the file which is doing the conversion part. You can always download the file from https://code.google.com/p/x2js/

So if you read and implement as explained in my article on converting XML file to JSON in Angular JS, Your page will be looking as follows.

[html]
<!DOCTYPE html>
<html>
<head>
<title>Convert XML to JSON In Angular JS – sibeeshpassion </title>
<script src="jquery-2.1.3.min.js"></script>
<script src="angular.min.js"></script>
<script src="xml2json.js"></script>
</head>
<body>
<div ng-app="httpApp" ng-controller="httpController">
</div>
<script>
var app = angular.module(‘httpApp’, []);
app.controller(‘httpController’, function ($scope, $http) {
$http.get("Sitemap.xml",
{
transformResponse: function (cnv) {
var x2js = new X2JS();
var aftCnv = x2js.xml_str2json(cnv);
return aftCnv;
}
})
.success(function (response) {
console.log(response);
});
});
</script>
</body>
</html>
[/html]

So we have loaded our XML and converted the it to the JSON. Now we need to show this JSON response as li using ng-repeat in Angular JS. Are you ready?

For that please change your ng-app directive as follows.

[html]
<div ng-app="httpApp" ng-controller="httpController">
<ul>
<li ng-repeat="det in details"><a href="{{det.loc }}">{{det.loc }}</a>
</li>
</ul>
</div>
[/html]

And we can change our Angular script implementation as below.

[js]
<script>
var app = angular.module(‘httpApp’, []);
app.controller(‘httpController’, function ($scope, $http) {
$http.get("Sitemap.xml",
{
transformResponse: function (cnv) {
var x2js = new X2JS();
var aftCnv = x2js.xml_str2json(cnv);
return aftCnv;
}
})
.success(function (response) {
$scope.details = response.urlset.url;
console.log(response);
});
});
</script>
[/js]

So we are assigning response.urlset.url to the $scope.details so that we can simply loop through using ng-repeat as
det in details.

If you download the sitemap.xml file from the source code given you can get to know the XML structure of the data. Depends on the data structure we need to assign the response to the $scope.

I guess everything is done, now we can see the output.

Output

Load XML And Show As li In Angular JS

That’s all we have done everything. Happy coding!.

Complete Code

[html]
<!DOCTYPE html>
<html>
<head>
<title>Load XML And Show As li In Angular JS – sibeeshpassion </title>
<script src="jquery-2.1.3.min.js"></script>
<script src="angular.min.js"></script>
<script src="xml2json.js"></script>
</head>
<body>
<div ng-app="httpApp" ng-controller="httpController">
<ul>
<li ng-repeat="det in details"><a href="{{det.loc }}">{{det.loc }}</a>
</li>
</ul>
</div>
<script>
var app = angular.module(‘httpApp’, []);
app.controller(‘httpController’, function ($scope, $http) {
$http.get("Sitemap.xml",
{
transformResponse: function (cnv) {
var x2js = new X2JS();
var aftCnv = x2js.xml_str2json(cnv);
return aftCnv;
}
})
.success(function (response) {
$scope.details = response.urlset.url;
console.log(response);
});
});
</script>
</body>
</html>
[/html]

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

Introduction

In this post we will see how we can convert an XML file to JSON in Angular JS. As you all know Angular JS is a JavaScript framework for developing applications. So basically Angular JS expects the response in the form of JSON. Hence it is recommended to return the data in JSON format before you start to work on the data. Here in this post we will load a local XML file using Angular JS $http service, and we will convert the same XML file to JSON. If you are new to Angular JS, please read here: Angular JS. I hope you will like this article.

Background

I have already posted an article related to $http service in Angular JS, you can see here: $http Service In Angular JS

Source Code

Please download the source code here: XML to JSON Source Code

You can also fork this repository from GitHub. 

Using the code

Create an html page first.

Now add the needed reference as follows.

Have you noticed that I have added xml2json.js file? This is the file which is doing the conversion part. You can always download the file from https://code.google.com/p/x2js/

Now create a controller and app directive as follows.

Next thing we need to do is adding the service. You can add the $http service as follows.

Here httpApp is our app and httpController is our controller. And we are transforming our response using the function transformResponse.

Transforming Request and Response

In Angular JS, requests can be transformed using a function called transformRequest and if it is a response we can transform by function transformResponse. These functions returns the transformed values.

Here in our example we are using the transformResponse function as follows.

The x2js.xml_str2json(cnv) will return the json object and we return aftCnv from the function transformResponse. Sounds good? Once we are done everything, we are just write the JSON object in the browser console, so that we can see the object.

Output

That’s all we have done everything. Happy coding!.

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu