Introduction

Here, in this post we are going to a see some LINQ queries, which covers both basics and advanced. LINQ queries are introduced few years back to offer a consistent way for working with data across many datasources and formats. In LINQ queries, you will always work with objects, which makes it simple to write. I hope you would have already written lots of LINQ queries already, if you haven’t, I strongly reccommend you to read this blog where you can find the answer for, why do we need to use LINQ?. Here I am going to create a MVC demo application. I hope you will like this. Now let’s begin.

Download Source Code

Background

Whenever I get a chance to write some server side codes in C#, I always write it using LINQ. And few weeks back, I was assigned to a training programme where my job was to teach LINQ, hence this post covers the the queries I have written for the training programme. Hope you will find it useful.

Using the code

A LINQ query can be written in two ways.

There are so many articles available in the Internet on the topic LINQ, but most of them dont cover the differences of writing the queries in two possible ways, the motive of this article is to write the queries in both ways, so that you can understand the differnces.

As I mentioned, we are going to create an MVC application, we need to create it first and then configure the entity. Let’s go and do that.

Create a database

To get started with we need to configure our database first. To do so, either you can download the Wild World Importers from here or you can run the script file included in the downlaod link above.

Once after you created the database, you can create your MVC application and Entity Data Model in it.

Configuring MVC application with Entity Data Model

By this time, I hope you would have configured your MVC application with Entity Data Model. Now it is time to create a controller and Entity object.

[csharp]
using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Windows.Forms;
using LINQ_B_to_A.Models;
namespace LINQ_B_to_A.Controllers
{
public class HomeController : Controller
{
// GET: Home

public MyDataModel DtContext { get; set; } = new MyDataModel();
}
}
[/csharp]

Now we can write some LINQ queries as everything is set to get started.

Setting up the Index view with possible actions

This is just to call the actions we are going write. Let’s see the Index page now.

[html]
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>
<input type="button" class="btn-info" onclick="location.href=’@Url.Action("LoadAll","Home")’" value="Load All – Query Expression"/>
<input type="button" class="btn-info" onclick="location.href=’@Url.Action("JoinWithWhere","Home")’" value="Join With Where" />
<input type="button" class="btn-info" onclick="location.href=’@Url.Action("LeftJoin","Home")’" value="Left Join" />
<input type="button" class="btn-info" onclick="location.href=’@Url.Action("DistinctSample","Home")’" value="Distinct Sample" />
<input type="button" class="btn-info" onclick="location.href=’@Url.Action("EqualsSamples","Home")’" value="Equals Sample" />
<input type="button" class="btn-info" onclick="location.href=’@Url.Action("NotEqualsSamples","Home")’" value="Not Equals" />
<input type="button" class="btn-info" onclick="location.href=’@Url.Action("PagingQueries","Home")’" value="Paging Queries" />
<input type="button" class="btn-info" onclick="location.href=’@Url.Action("MathQueries","Home")’" value="Math Queries" />
<input type="button" class="btn-info" onclick="location.href=’@Url.Action("StringQueries","Home")’" value="String Queries" />
<input type="button" class="btn-info" onclick="location.href=’@Url.Action("SelectMany","Home")’" value="Select Many" />
[/html]

LINQ Basic to Advanced Index View

Normal Select Query With StartWith and Take

Let’s have a look at the preceding query.

[csharp]
/// <summary>
/// Linq query with Select
/// </summary>
/// <returns></returns>
public ActionResult LoadAll()
{
var loadAllData = (from d in DtContext.Cities where d.CityName.StartsWith("C") select d).Take(10);

//Method Chain Format
var loadAllData1 = DtContext.Cities.Where(d => d.CityName.StartsWith("C")).Take(10);

return PartialView(loadAllData);
}
[/csharp]

As you can see, we are just fetching the data from Cities in both ways. And we are using StartWith as a filter, which actually looks for the city names which starts with the letter C, and finally we are taking 10 elements from it. The first query is the “Query syntax” and the second one is “Method chain”. Personally I like the second way. How about you?

[html]
@model IQueryable<LINQ_B_to_A.Models.City>
<style>
dd, dt, pre {
border: 1px solid #ccc;
padding: 5px;
margin: 5px;
width: auto;
width: 20%;
}

dd {
background-color: #a9a9a9
}
pre {
width: auto;
}
</style>
<dd>City Names</dd>
@foreach (var ctyObj in Model)
{
<dt>@ctyObj.CityName</dt>
}
<pre>
public ActionResult LoadAll()
{
var loadAllData = (from d in DtContext.Cities where d.CityName.StartsWith("C") select d).Take(10);

//Method Chain Format
var loadAllData1 = DtContext.Cities.Where(d => d.CityName.StartsWith("C")).Take(10);

return PartialView(loadAllData);
}
</pre>
[/html]

We are ready to see our first query in action now.

Let’s creat a partial view now to show the data we fetched.

JOIN Query

To write a join, the query would be as preceding.

[csharp]
/// <summary>
/// Linq query with join and where
/// </summary>
/// <returns></returns>
public ActionResult JoinWithWhere()
{
var loadAllData = (from oOrders in DtContext.Orders
join oOrderLines in DtContext.OrderLines
on oOrders.OrderID equals oOrderLines.OrderID
orderby oOrders.OrderID
select new OrderAndOrderLines()
{
OrderId = oOrders.OrderID,
Description = oOrderLines.Description,
Quantity = oOrderLines.Quantity
}).Take(10);
//Method Chain Format
var asMethodChain = DtContext.Orders.Join(DtContext.OrderLines, oOrders => oOrders.OrderID,
oOrderLines => oOrderLines.OrderID,
(oOrders, oOrderLines) => new { oOrders, oOrderLines })
.OrderBy(@o => @o.oOrders.OrderID)
.Select(@s => new OrderAndOrderLines()
{
OrderId = @s.oOrders.OrderID,
Description = @s.oOrderLines.Description,
Quantity = @s.oOrderLines.Quantity
}).Take(10);

return PartialView(loadAllData);
}
[/csharp]

In the above query we are just joining the tables Order and OrderLines with OrderID and to select we are using an another custom model OrderAndOrderLines.

[csharp]
namespace LINQ_B_to_A.Models
{
public partial class OrderAndOrderLines
{
public int OrderId { get; set; }
public string Description { get; set; }
public int? Quantity { get; set; }
}
}
[/csharp]

The view can be written as follows.

[html]
@model IEnumerable<LINQ_B_to_A.Models.OrderAndOrderLines>
<style>
td, th, thead,pre {
border: 1px solid #ccc;
padding: 5px;
margin: 5px;
width: auto;
width: 20%;
}

caption {
background-color: #a9a9a9
}
pre {
width: auto;
}
</style>

<table>
<caption>Order Details</caption>
<tr>
<th>Order ID</th>
<th>Description</th>
<th>Quantity</th>
</tr>
@foreach (var @item in Model)
{
<tr>
<td>@item.OrderId</td>
<td>@item.Description</td>
<td>@item.Quantity</td>
</tr>
}
</table>
<pre>
public ActionResult JoinWithWhere()
{
var loadAllData = (from oOrders in DtContext.Orders
join oOrderLines in DtContext.OrderLines
on oOrders.OrderID equals oOrderLines.OrderID
orderby oOrders.OrderID
select new OrderAndOrderLines()
{
OrderId = oOrders.OrderID,
Description = oOrderLines.Description,
Quantity = oOrderLines.Quantity
}).Take(10);
//Method Chain Format
var asMethodChain = DtContext.Orders.Join(DtContext.OrderLines, oOrders => oOrders.OrderID,
oOrderLines => oOrderLines.OrderID,
(oOrders, oOrderLines) => new { oOrders, oOrderLines })
.OrderBy(o => o.oOrders.OrderID)
.Select(s => new OrderAndOrderLines()
{
OrderId = s.oOrders.OrderID,
Description = s.oOrderLines.Description,
Quantity = s.oOrderLines.Quantity
}).Take(10);

return PartialView(loadAllData);
}
</pre>
[/html]

Once you run the action you can see the result as follows.

LINQ Basic to Advanced Join With Where

Left JOIN Query

To write a Left join, the query would be as preceding.

[csharp]
/// <summary>
/// Linq query with Left Join
/// </summary>
/// <returns></returns>
public ActionResult LeftJoin()
{
var loadAllData = (from oOrder in DtContext.Orders
join oOrderLine in DtContext.OrderLines
on oOrder.OrderID equals oOrderLine.OrderID
into lftOrder
from afterJoined in lftOrder.DefaultIfEmpty()
orderby oOrder.OrderID descending
select new OrderAndOrderLines()
{
OrderId = oOrder.OrderID,
Description = afterJoined.Description
}).Take(10).ToList();
//Method Chain Format
var lftJoinMethodChain = (DtContext.Orders.GroupJoin(DtContext.OrderLines,
oOrder => oOrder.OrderID, oOrderLine => oOrderLine.OrderID,
(oOrder, lftJoin) => new { oOrder, lftJoin })
.SelectMany(@sm => @sm.lftJoin.DefaultIfEmpty(), (@sm, afterJoin) => new { @sm, afterJoin })
.OrderByDescending(@o => @o.sm.oOrder.OrderID)
.Select(@s => new OrderAndOrderLines()
{
OrderId = @s.sm.oOrder.OrderID,
Description = @s.afterJoin.Description
})).Take(10).ToList();

return PartialView(loadAllData);
}
[/csharp]

In the above query we are just joining the tables Order and OrderLines with OrderID and to select we are using an another custom model OrderAndOrderLines as our previous query. The differences you could find here are, using an ‘into’ and ‘DefaultIfEmpty’ statements. The DefaultIfEmpty is making sure that it returns empty if there is no appropriate rows found in the second table.

The view can be written as follows.

[html]
@model IEnumerable<LINQ_B_to_A.Models.OrderAndOrderLines>
<style>
td, th, thead, pre {
border: 1px solid #ccc;
padding: 5px;
margin: 5px;
width: auto;
width: 20%;
}

caption {
background-color: #a9a9a9
}
pre {
width: auto;
}
</style>

<table>
<caption>Order Details</caption>
<tr>
<th>Order ID</th>
<th>Description</th>
<th>Quantity</th>
</tr>
@foreach (var @item in Model)
{
<tr>
<td>@item.OrderId</td>
<td>@item.Description</td>
<td>@item.Quantity</td>
</tr>
}
</table>
<pre>
public ActionResult LeftJoin()
{
var loadAllData = (from oOrder in DtContext.Orders
join oOrderLine in DtContext.OrderLines
on oOrder.OrderID equals oOrderLine.OrderID
into lftOrder
from afterJoined in lftOrder.DefaultIfEmpty()
orderby oOrder.OrderID descending
select new OrderAndOrderLines()
{
OrderId = oOrder.OrderID,
Description = afterJoined.Description
}).Take(10).ToList();
//Method Chain Format
var lftJoinMethodChain = (DtContext.Orders.GroupJoin(DtContext.OrderLines,
oOrder => oOrder.OrderID, oOrderLine => oOrderLine.OrderID,
(oOrder, lftJoin) => new { oOrder, lftJoin })
.SelectMany(sm => sm.lftJoin.DefaultIfEmpty(), (sm, afterJoin) => new { sm, afterJoin })
.OrderByDescending(o => o.sm.oOrder.OrderID)
.Select(s => new OrderAndOrderLines()
{
OrderId = s.sm.oOrder.OrderID,
Description = s.afterJoin.Description
})).Take(10).ToList();

return PartialView(loadAllData);
}
</pre>
[/html]

Once you run the action you can see the result as follows.

LINQ Basic to Advanced Left Join

As you can see in the image, the order id 200000 doesn’t has any appropriate rows in the second table, so it shows as empty.

Distinct Query

The below query shows how we can write simple distinct query.

[csharp]
/// <summary>
/// Linq query Distinct sample
/// </summary>
/// <returns></returns>
public ActionResult DistinctSample()
{
var distictSample = (from oOrder in DtContext.OrderLines
select oOrder.Description).Distinct().Take(10).ToList();

//Method Chain Format
var distictAsMethodChain = (DtContext.OrderLines.Select(oOrder => oOrder.Description)).Distinct().Take(10).ToList();

return PartialView(distictSample);
}
[/csharp]

In the above query we use Distinct to make sure that only distict items are selected from the result. The view can be written as follows.

[html]
@model List<string>
<style>
dd, dt, pre {
border: 1px solid #ccc;
padding: 5px;
margin: 5px;
width: auto;
width: 20%;
}

dd {
background-color: #a9a9a9
}

pre {
width: auto;
}
</style>
<dd>Order Descriptions</dd>
@foreach (var orderLinesyObj in Model)
{
<dt>@orderLinesyObj</dt>
}
<pre>
public ActionResult DistinctSample()
{
var distictSample = (from oOrder in DtContext.OrderLines
select oOrder.Description).Distinct().Take(10).ToList();

//Method Chain Format
var distictAsMethodChain = (DtContext.OrderLines.Select(oOrder => oOrder.Description)).Distinct().Take(10).ToList();

return PartialView(distictSample);
}
</pre>
[/html]

Once you run the action you can see the result as follows.

LINQ Basic to Advanced Distinct Query

Equals and Not Equals Queries

We can write the equals and not equals query as preceding.

[csharp]
/// <summary>
/// Linq query Equals sample
/// </summary>
/// <returns></returns>
public ActionResult EqualsSamples()
{
var objEquals = (from objCity in DtContext.Cities
where objCity.CityName.Equals("Troy")
select objCity).Take(2);
//Method Chain Format
var objEquals1 = DtContext.Cities.Where(d => d.CityName.Equals("Troy")).Take(2);

return PartialView("OperatorSamples", objEquals);
}

/// <summary>
/// Linq query Not Equals sample
/// </summary>
/// <returns></returns>
public ActionResult NotEqualsSamples()
{
var objNotEquals = (from objCity in DtContext.Cities
where objCity.CityName != "Troy"
select objCity).Take(5);

var objNotEquals1 = (from objCity in DtContext.Cities
where !objCity.CityName.Equals("Troy")
select objCity).Take(5);

//Method Chain Format
var objNotEquals2 = DtContext.Cities.Where(d => d.CityName != "Troy").Take(2);

var objNotEquals3 = DtContext.Cities.Where(d => !d.CityName.Equals("Troy")).Take(2);

return PartialView("OperatorSamples", objNotEquals);
}
[/csharp]

The view can be written as follows.

[html]
@model IQueryable<LINQ_B_to_A.Models.City>
<style>
td, th, thead, pre {
border: 1px solid #ccc;
padding: 5px;
margin: 5px;
width: auto;
width: 20%;
}

caption {
background-color: #a9a9a9
}

pre {
width: auto;
}
</style>

<table>
<caption>City Details</caption>
<tr>
<th>City ID</th>
<th>City Name</th>
<th>City Location</th>
</tr>
@foreach (var @item in Model)
{
<tr>
<td>@item.CityID</td>
<td>@item.CityName</td>
<td>@item.Location</td>
</tr>
}
</table>
<caption>Equals Oerator</caption>
<pre>
public ActionResult EqualsSamples()
{
var objEquals = (from objCity in DtContext.Cities
where objCity.CityName.Equals("Troy")
select objCity).Take(2);
//Method Chain Format
var objEquals1 = DtContext.Cities.Where(d => d.CityName.Equals("Troy")).Take(2);

return PartialView("OperatorSamples", objEquals);
}

public ActionResult NotEqualsSamples()
{
var objNotEquals = (from objCity in DtContext.Cities
where objCity.CityName != "Troy"
select objCity).Take(5);

var objNotEquals1 = (from objCity in DtContext.Cities
where !objCity.CityName.Equals("Troy")
select objCity).Take(5);

//Method Chain Format
var objNotEquals2 = DtContext.Cities.Where(d => d.CityName != "Troy").Take(2);

var objNotEquals3 = DtContext.Cities.Where(d => !d.CityName.Equals("Troy")).Take(2);

return PartialView("OperatorSamples", objNotEquals);
}

public ActionResult PagingQueries()
{
var objNotEquals = (from objCity in DtContext.Cities
where objCity.CityName != "Troy"
orderby objCity.CityName ascending
select objCity).Skip(5).Take(5);

//Method Chain Format
var objNotEquals2 = DtContext.Cities.Where(d => d.CityName != "Troy").Skip(5).Take(5);

return PartialView("OperatorSamples", objNotEquals);
}
</pre>
[/html]

Once you run the action you can see the result as follows.

LINQ Basic to Advanced Equals and Not Equals

LINQ Paging Queries

Paging queries are always important as we work in some grid controls, with LINQ those are very easy. Let’s see one of that query.

[csharp]
/// <summary>
/// Linq Paging Queries
/// </summary>
/// <returns></returns>
public ActionResult PagingQueries()
{
var objNotEquals = (from objCity in DtContext.Cities
where objCity.CityName != "Troy"
orderby objCity.CityName ascending
select objCity).Skip(5).Take(5);

//Method Chain Format
var objNotEquals2 = DtContext.Cities.Where(d => d.CityName != "Troy").Skip(5).Take(5);

return PartialView("OperatorSamples", objNotEquals);
}
[/csharp]

Once you run the action you can see the result as follows.

LINQ Basic to Advanced Paging Queries

LINQ Math Queries

Here we are going to write the possible Math functions in our LINQ query.

[csharp]
/// <summary>
/// Math Queries
/// </summary>
/// <returns></returns>
public ActionResult MathQueries()
{
var objMath = (from objInv in DtContext.InvoiceLines
where objInv.ExtendedPrice > 10 && objInv.Quantity < 15
orderby objInv.InvoiceLineID descending
select new MathClass()
{
Actual = objInv.ExtendedPrice,
Round = Math.Round(objInv.ExtendedPrice),
Floor = Math.Floor(objInv.ExtendedPrice),
Ceiling = Math.Ceiling(objInv.ExtendedPrice),
Abs = Math.Abs(objInv.ExtendedPrice)
}).Take(10);

//Method Chain Format
var objMath2 = DtContext.InvoiceLines
.Where(objInv => objInv.ExtendedPrice > 10 && objInv.Quantity < 15)
.OrderByDescending(o => o.InvoiceLineID)
.Select(objInv => new MathClass()
{
Actual = objInv.ExtendedPrice,
Round = Math.Round(objInv.ExtendedPrice),
Floor = Math.Floor(objInv.ExtendedPrice),
Ceiling = Math.Ceiling(objInv.ExtendedPrice),
Abs = Math.Abs(objInv.ExtendedPrice)
}).Take(10);

return PartialView("MathQueries", objMath);
}
[/csharp]

As you can see we have written most of the possible Math functions in our query and selecting with a custome model MathClass.

[csharp]
namespace LINQ_B_to_A.Models
{
public partial class MathClass
{
public decimal Actual { get; set; }
public decimal Round { get; set; }
public decimal Floor { get; set; }
public decimal Ceiling { get; set; }
public decimal Abs { get; set; }
}
}
[/csharp]

Let’s see the view now.

[html]

@model IQueryable<LINQ_B_to_A.Models.MathClass>
<style>
td, th, thead, pre {
border: 1px solid #ccc;
padding: 5px;
margin: 5px;
width: auto;
width: 20%;
}

caption {
background-color: #a9a9a9
}

pre {
width: auto;
}
</style>

<table>
<caption>Math Operators</caption>
<tr>

</tr>
@foreach (var @item in Model)
{
<tr>
<td>Actual: @item.Actual</td>
<td>Round: @item.Round</td>
<td>Floor: @item.Floor</td>
<td>Ceiling: @item.Ceiling</td>
<td>Abs: @item.Abs</td>
</tr>
}
</table>
<pre>
public ActionResult MathQueries()
{
var objMath = (from objInv in DtContext.InvoiceLines
where objInv.ExtendedPrice > 10 && objInv.Quantity < 15
orderby objInv.InvoiceLineID descending
select new MathClass()
{
Actual = objInv.ExtendedPrice,
Round = Math.Round(objInv.ExtendedPrice),
Floor = Math.Floor(objInv.ExtendedPrice),
Ceiling = Math.Ceiling(objInv.ExtendedPrice),
Abs = Math.Abs(objInv.ExtendedPrice)
}).Take(10);

//Method Chain Format
var objMath2 = DtContext.InvoiceLines
.Where(objInv => objInv.ExtendedPrice > 10 && objInv.Quantity < 15)
.OrderByDescending(o => o.InvoiceLineID)
.Select(objInv => new MathClass()
{
Actual = objInv.ExtendedPrice,
Round = Math.Round(objInv.ExtendedPrice),
Floor = Math.Floor(objInv.ExtendedPrice),
Ceiling = Math.Ceiling(objInv.ExtendedPrice),
Abs = Math.Abs(objInv.ExtendedPrice)
}).Take(10);

return PartialView("MathQueries", objMath);
}
</pre>
[/html]

See the result now.

LINQ Basic to Advanced Math Queries

LINQ String Queries

As we saw the Math queries, here we are going to write the possible String functions in our LINQ query.

[csharp]
/// <summary>
/// String Queries
/// </summary>
/// <returns></returns>
public ActionResult StringQueries()
{
var objString = (from objInv in DtContext.InvoiceLines
where objInv.ExtendedPrice > 10 && objInv.Quantity < 15
orderby objInv.InvoiceLineID descending
select new StringClass()
{
Actual = objInv.Description,
Insert = objInv.Description.Insert(2, "sibeeshpassion"),
Remove = objInv.Description.Remove(1, 1),
Substring = objInv.Description.Substring(2, 3),
ToLower = objInv.Description.ToLower(),
ToUpper = objInv.Description.ToUpper(),
TrimEnd = objInv.Description.TrimEnd(),
TrimStart = objInv.Description.TrimStart()
}).Take(2);

//Method Chain Format
var objString2 = DtContext.InvoiceLines
.Where(objInv => objInv.ExtendedPrice > 10 && objInv.Quantity < 15)
.OrderByDescending(o => o.InvoiceLineID)
.Select(objInv => new StringClass()
{
Actual = objInv.Description,
Insert = objInv.Description.Insert(2, "sibeeshpassion"),
Remove = objInv.Description.Remove(1, 1),
Substring = objInv.Description.Substring(2, 3),
ToLower = objInv.Description.ToLower(),
ToUpper = objInv.Description.ToUpper(),
TrimEnd = objInv.Description.TrimEnd(),
TrimStart = objInv.Description.TrimStart()
}).Take(2);

return PartialView("StringQueries", objString);
}
[/csharp]

As you can see, here we are using a custom model StringClass.

[csharp]
namespace LINQ_B_to_A.Models
{
public partial class StringClass
{
public string Actual { get; set; }
public string Insert { get; set; }
public string Remove { get; set; }
public string Substring { get; set; }
public string ToUpper { get; set; }
public string ToLower { get; set; }
public string TrimStart { get; set; }
public string TrimEnd { get; set; }
}
}
[/csharp]

Let’s see the view now.

[html]

@model IQueryable<LINQ_B_to_A.Models.StringClass>
<style>
td, th, thead, pre {
border: 1px solid #ccc;
padding: 5px;
margin: 5px;
width: auto;
width: 20%;
}

caption {
background-color: #a9a9a9
}

pre {
width: auto;
}
</style>

<table>
<caption>String Operators</caption>
<tr>

</tr>
@foreach (var @item in Model)
{
<tr>
<td>Actual: @item.Actual</td>
<td>Insert: @item.Insert</td>
<td>Remove: @item.Remove</td>
<td>Substring: @item.Substring</td>
<td>ToLower: @item.ToLower</td>
<td>ToUpper: @item.ToUpper</td>
<td>TrimEnd: @item.TrimEnd</td>
<td>TrimStart: @item.TrimStart</td>
</tr>
}
</table>
<pre>
public ActionResult StringQueries()
{
var objString = (from objInv in DtContext.InvoiceLines
where objInv.ExtendedPrice > 10 && objInv.Quantity < 15
orderby objInv.InvoiceLineID descending
select new StringClass()
{

Actual = objInv.Description,
Insert = objInv.Description.Insert(2,"sibeeshpassion"),
Remove = objInv.Description.Remove(1,1),
Substring = objInv.Description.Substring(2,3),
ToLower = objInv.Description.ToLower(),
ToUpper = objInv.Description.ToUpper(),
TrimEnd = objInv.Description.TrimEnd(),
TrimStart = objInv.Description.TrimStart()
}).Take(2);

//Method Chain Format
var objString2 = DtContext.InvoiceLines
.Where(objInv => objInv.ExtendedPrice > 10 && objInv.Quantity < 15)
.OrderByDescending(o => o.InvoiceLineID)
.Select(objInv => new StringClass()
{
Actual = objInv.Description,
Insert = objInv.Description.Insert(2, "sibeeshpassion"),
Remove = objInv.Description.Remove(1, 1),
Substring = objInv.Description.Substring(2, 3),
ToLower = objInv.Description.ToLower(),
ToUpper = objInv.Description.ToUpper(),
TrimEnd = objInv.Description.TrimEnd(),
TrimStart = objInv.Description.TrimStart()
}).Take(2);

return PartialView("StringQueries", objString);
}
</pre>
[/html]

Now see the result.

LINQ Basic to Advanced String Queries

SelectMany Query

A SelectMany query flattern the result to a single dimentional collection, so to loop through the result we just need only one loop.

LINQ Basic to Advanced SelectMany Tooltip

If you use the normal Select, you will be getting a list of lists, thus you will have to use two loops to get the datas.

LINQ Basic to Advanced Select Tooltip

[csharp]
/// <summary>
/// Linq query with SelectMany
/// </summary>
/// <returns></returns>
public ActionResult SelectMany()
{
var selectMany = DtContext.Orders.SelectMany(order => order.Invoices).Take(10);
var select = DtContext.Orders.Select(order => order.Invoices).Take(10);
return PartialView("SelectMany", selectMany);
}
[/csharp]

Let’s see the view now.

[html]
@model IQueryable<LINQ_B_to_A.Models.Invoice>
<style>
td, th, thead, pre {
border: 1px solid #ccc;
padding: 5px;
margin: 5px;
width: auto;
width: 20%;
}

caption {
background-color: #a9a9a9
}

pre {
width: auto;
}
</style>

<table>
<caption>Invoice Details</caption>
<tr>
<th>Order ID</th>
<th>Invoice ID</th>
<th>Invoice Date</th>
</tr>
@foreach (var @item in Model)
{
<tr>
<td>@item.OrderID</td>
<td>@item.InvoiceID</td>
<td>@item.InvoiceDate</td>
</tr>
}
</table>
<caption>Select Many</caption>
<pre>
/// <summary>
/// Linq query with SelectMany
/// </summary>
/// <returns></returns>
public ActionResult SelectMany()
{
var selectMany = DtContext.Orders.SelectMany(order => order.Invoices).Take(10);
var select = DtContext.Orders.Select(order => order.Invoices).Take(10);
return PartialView("SelectMany", selectMany);
}
</pre>
[/html]

Now see the result.

That’s all for today, I will come with another set of LINQ queries in the next part. Till then, bye.

LINQ Basic to Advanced SelectMany

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

Download source code

Introduction about Knockout JS

According to Knockout JS documentation Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainable.

It has benefits as,

Pure JavaScript library – works with any server or client-side technology
Can be added on top of your existing web application without requiring major architectural changes
Compact – around 13kb after gzipping
Works on any mainstream browser (IE 6+, Firefox 2+, Chrome, Safari, Edge, others)
Comprehensive suite of specifications (developed BDD-style) means its correct functioning can easily be verified on new browsers and platforms.

Background

As I am working on a project which uses Knockout for binding the server data, a friend of mine requested me to create a CRUD application with Knockout, so that he can easily learn it. I just accepted his request and here we are going to create a MVC CRUD application with the help of Knockout JS. I hope you will like this.

Create an Empty MVC application

To get started we will create an empty MVC application as follows.

add_new_empty_mvc_project

Creating database and Entity Data Model

Here I am creating a database with name “TrialDB”, you can always create a DB by running the query given below.

[sql]
USE [master]
GO

/****** Object: Database [TrialDB] Script Date: 20-11-2016 03:54:53 PM ******/
CREATE DATABASE [TrialDB]
CONTAINMENT = NONE
ON PRIMARY
( NAME = N’TrialDB’, FILENAME = N’C:\Program Files\Microsoft SQL Server\MSSQL13.SQLEXPRESS\MSSQL\DATA\TrialDB.mdf’ , SIZE = 8192KB , MAXSIZE = UNLIMITED, FILEGROWTH = 65536KB )
LOG ON
( NAME = N’TrialDB_log’, FILENAME = N’C:\Program Files\Microsoft SQL Server\MSSQL13.SQLEXPRESS\MSSQL\DATA\TrialDB_log.ldf’ , SIZE = 8192KB , MAXSIZE = 2048GB , FILEGROWTH = 65536KB )
GO

ALTER DATABASE [TrialDB] SET COMPATIBILITY_LEVEL = 130
GO

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

ALTER DATABASE [TrialDB] SET ANSI_NULL_DEFAULT OFF
GO

ALTER DATABASE [TrialDB] SET ANSI_NULLS OFF
GO

ALTER DATABASE [TrialDB] SET ANSI_PADDING OFF
GO

ALTER DATABASE [TrialDB] SET ANSI_WARNINGS OFF
GO

ALTER DATABASE [TrialDB] SET ARITHABORT OFF
GO

ALTER DATABASE [TrialDB] SET AUTO_CLOSE OFF
GO

ALTER DATABASE [TrialDB] SET AUTO_SHRINK OFF
GO

ALTER DATABASE [TrialDB] SET AUTO_UPDATE_STATISTICS ON
GO

ALTER DATABASE [TrialDB] SET CURSOR_CLOSE_ON_COMMIT OFF
GO

ALTER DATABASE [TrialDB] SET CURSOR_DEFAULT GLOBAL
GO

ALTER DATABASE [TrialDB] SET CONCAT_NULL_YIELDS_NULL OFF
GO

ALTER DATABASE [TrialDB] SET NUMERIC_ROUNDABORT OFF
GO

ALTER DATABASE [TrialDB] SET QUOTED_IDENTIFIER OFF
GO

ALTER DATABASE [TrialDB] SET RECURSIVE_TRIGGERS OFF
GO

ALTER DATABASE [TrialDB] SET DISABLE_BROKER
GO

ALTER DATABASE [TrialDB] SET AUTO_UPDATE_STATISTICS_ASYNC OFF
GO

ALTER DATABASE [TrialDB] SET DATE_CORRELATION_OPTIMIZATION OFF
GO

ALTER DATABASE [TrialDB] SET TRUSTWORTHY OFF
GO

ALTER DATABASE [TrialDB] SET ALLOW_SNAPSHOT_ISOLATION OFF
GO

ALTER DATABASE [TrialDB] SET PARAMETERIZATION SIMPLE
GO

ALTER DATABASE [TrialDB] SET READ_COMMITTED_SNAPSHOT OFF
GO

ALTER DATABASE [TrialDB] SET HONOR_BROKER_PRIORITY OFF
GO

ALTER DATABASE [TrialDB] SET RECOVERY SIMPLE
GO

ALTER DATABASE [TrialDB] SET MULTI_USER
GO

ALTER DATABASE [TrialDB] SET PAGE_VERIFY CHECKSUM
GO

ALTER DATABASE [TrialDB] SET DB_CHAINING OFF
GO

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

ALTER DATABASE [TrialDB] SET TARGET_RECOVERY_TIME = 60 SECONDS
GO

ALTER DATABASE [TrialDB] SET DELAYED_DURABILITY = DISABLED
GO

ALTER DATABASE [TrialDB] SET QUERY_STORE = OFF
GO

USE [TrialDB]
GO

ALTER DATABASE SCOPED CONFIGURATION SET MAXDOP = 0;
GO

ALTER DATABASE SCOPED CONFIGURATION FOR SECONDARY SET MAXDOP = PRIMARY;
GO

ALTER DATABASE SCOPED CONFIGURATION SET LEGACY_CARDINALITY_ESTIMATION = OFF;
GO

ALTER DATABASE SCOPED CONFIGURATION FOR SECONDARY SET LEGACY_CARDINALITY_ESTIMATION = PRIMARY;
GO

ALTER DATABASE SCOPED CONFIGURATION SET PARAMETER_SNIFFING = ON;
GO

ALTER DATABASE SCOPED CONFIGURATION FOR SECONDARY SET PARAMETER_SNIFFING = PRIMARY;
GO

ALTER DATABASE SCOPED CONFIGURATION SET QUERY_OPTIMIZER_HOTFIXES = OFF;
GO

ALTER DATABASE SCOPED CONFIGURATION FOR SECONDARY SET QUERY_OPTIMIZER_HOTFIXES = PRIMARY;
GO

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

Create a table

To create a table, you can run the query below.

[sql]
USE [TrialDB]
GO

/****** Object: Table [dbo].[Course] Script Date: 20-11-2016 03:57:30 PM ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[Course](
[CourseID] [int] NOT NULL,
[CourseName] [nvarchar](50) NOT NULL,
[CourseDescription] [nvarchar](100) NULL,
CONSTRAINT [PK_Course] PRIMARY KEY CLUSTERED
(
[CourseID] 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]

So our database is ready. Now we will create an Entity Data Model with the database we created.

create_entity_data_model

Install Knockout JS

To install Knockout JS in your project, please right click on your project ad click on Manage Nuget Package and search for ‘Knockout’.

install_knockout

Now let us start our coding as everything is set.

C – Create Operation

So we are going to see the create operation, as it comes first in CRUD. Let us set up our controller first. You can see the controller code for create operation here.

[csharp]
// GET: Home/Create
public ActionResult Create()
{
return View();
}

// POST: Home/Create
[HttpPost]
public string Create(Course course)
{
if (!ModelState.IsValid) return "Model is invalid";
_db.Courses.Add(course);
_db.SaveChanges();
return "Cource is created";
}
[/csharp]

Here the first action calls the view for the create operation and the second operation insert the data to database. And _db is our entity.

[csharp]
private readonly TrialDBEntities _db = new TrialDBEntities();
[/csharp]

Now let’s go ahead and create view for Create operation.

[html]
@model MVCCRUDKnockout.Models.Course

@{
ViewBag.Title = "Create";
}

<div class="form-horizontal">
<h4>Course</h4>
<hr>

<div class="form-group">
<label class="control-label col-md-2" for="CourseName">CourseName</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="CourseName" name="CourseName" type="text" value="" data-bind="value: CourseName">
</div>
</div>

<div class="form-group">
<label class="control-label col-md-2" for="CourseDescription">CourseDescription</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="CourseDescription" name="CourseDescription" type="text" value="" data-bind="value: CourseDescription">
</div>
</div>

<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="button" data-bind="click: createCourse" value="Create" class="btn btn-default">
</div>
</div>
</div>

<div>
@Html.ActionLink("Back to List", "Read")
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/knockout-3.4.0.js"></script>
<script src="~/Scripts/KOScripts/KOCreate.js"></script>
[/html]

Did you notice that we are binding data to our input controls as data-bind=”value: CourseName”? This value is related to the view model we are going to set, the interesting this is, the values in the model will get changed as you change the values in the input. You don’t need to add any kind of codes for that operations.

At last we are binding a click event as follows right?

[html]
<input type="button" data-bind="click: createCourse" value="Create" class="btn btn-default">
[/html]

This will call the function createCourse which we are going to specify in our view model. Now you may be thinking what is this view model? This knockout uses MVVM pattern and now let us read some basic information provided in Knockout JS documentation.

MVVM and View Models

Model-View-View Model (MVVM) is a design pattern for building user interfaces. It describes how you can keep a potentially sophisticated UI simple by splitting it into three parts:

A model: your application’s stored data. This data represents objects and operations in your business domain (e.g., bank accounts that can perform money transfers) and is independent of any UI. When using KO, you will usually make Ajax calls to some server-side code to read and write this stored model data.

A view model: a pure-code representation of the data and operations on a UI. For example, if you’re implementing a list editor, your view model would be an object holding a list of items, and exposing methods to add and remove items.

Note that this is not the UI itself: it doesn’t have any concept of buttons or display styles. It’s not the persisted data model either – it holds the unsaved data the user is working with. When using KO, your view models are pure JavaScript objects that hold no knowledge of HTML. Keeping the view model abstract in this way lets it stay simple, so you can manage more sophisticated behaviors without getting lost.

A view: a visible, interactive UI representing the state of the view model. It displays information from the view model, sends commands to the view model (e.g., when the user clicks buttons), and updates whenever the state of the view model changes.

When using KO, your view is simply your HTML document with declarative bindings to link it to the view model. Alternatively, you can use templates that generate HTML using data from your view model.

Now back to our Create operation, KOCreate.js is the file we are going to write our operation. Now please open that file and bind view model as follows.

[js]
$(function () {
ko.applyBindings(modelCreate);
});
[/js]

knockout_apply_bindings

Now preceding is our view model and associated functions.

[js]
var modelCreate = {
CourseName: ko.observable(),
CourseDescription: ko.observable(),
createCourse: function () {
try {
$.ajax({
url: ‘/Home/Create’,
type: ‘post’,
dataType: ‘json’,
data: ko.toJSON(this), //Here the data wil be converted to JSON
contentType: ‘application/json’,
success: successCallback,
error: errorCallback
});
} catch (e) {
window.location.href = ‘/Home/Read/’;
}
}
};

function successCallback(data) {
window.location.href = ‘/Home/Read/’;
}
function errorCallback(err) {
window.location.href = ‘/Home/Read/’;
}
[/js]

Here ko.observable() are special objects which can notify the changes and update the model accordingly. So if you need to update your UI automatically when the view model changes, you can use observable().Now please run your view and check whether it is working fine.

create_page

R – Read operation

As we have completed our Create operation, now it is time for Read. Please open your controller and write the actions as follows.

[csharp]
// GET: Home
public ActionResult Read()
{
return View();
}

//GET All Courses
public JsonResult ListCourses()
{
return Json(_db.Courses.ToList(), JsonRequestBehavior.AllowGet);
}
[/csharp]

You can create your Read view as preceding.

[html]
@{
ViewBag.Title = "Read";
}

<h2>Index</h2>

<p>
@Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
Course Name
</th>
<th>
Course Description
</th>
<th></th>
</tr>
<tbody data-bind="foreach: Courses">
<tr>
<td data-bind="text: CourseName"></td>
<td data-bind="text: CourseDescription"></td>
<td>
<a data-bind="attr: { ‘href’: ‘@Url.Action("Edit", "Home")/’ + CourseID }" class="btn-link">Edit</a>
<a data-bind="attr: { ‘href’: ‘@Url.Action("Delete", "Home")/’ + CourseID }" class="btn-link">Delete</a>
</td>
</tr>
</tbody>
</table>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/knockout-3.4.0.js"></script>
<script src="~/Scripts/KOScripts/KORead.js"></script>
[/html]

Here we are using data-bind=”foreach: Courses” for looping through our model we are going to create now. So shall we do that? Please create a JS file with name KORead.js and add the following code.

[js]
$(function () {
ko.applyBindings(modelView);
modelView.viewCourses();
});

var modelView = {
Courses: ko.observableArray([]),
viewCourses: function () {
var thisObj = this;
try {
$.ajax({
url: ‘/Home/ListCourses’,
type: ‘GET’,
dataType: ‘json’,
contentType: ‘application/json’,
success: function (data) {
thisObj.Courses(data); //Here we are assigning values to KO Observable array
},
error: function (err) {
alert(err.status + " : " + err.statusText);
}
});
} catch (e) {
window.location.href = ‘/Home/Read/’;
}
}
};
[/js]

Here goes the output.

read_page

Now it is time for Update operation. Are you ready?

U – Update operation

As we did for the above two operation, let us create some actions in our controller first.

[csharp]
// GET: Home/Edit/5
public ActionResult Edit(int? id)
{
if (id == null)
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
var course = _db.Courses.Find(id);
if (course == null)
return HttpNotFound();
var serializer = new JavaScriptSerializer();
ViewBag.SelectedCourse = serializer.Serialize(course);
return View();
}

// POST: Home/Update/5
[HttpPost]
public string Update(Course course)
{
if (!ModelState.IsValid) return "Invalid model";
_db.Entry(course).State = EntityState.Modified;
_db.SaveChanges();
return "Updated successfully";
}
[/csharp]

Here the first action with parameter ID is called whenever a user click on Edit link from the table we created. And we are setting the queried data to ViewBag so that we can use it for our related operation. For now, we can create a view as follows.

[html]
@{
ViewBag.Title = "Edit";
}

<h2>Edit</h2>

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
<h4>Course</h4>

<div class="form-group">
<label class="control-label col-md-2" for="CourseName">CourseName</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="CourseName" name="CourseName" type="text" value="" data-bind="value: CourseName">
</div>
</div>

<div class="form-group">
<label class="control-label col-md-2" for="CourseDescription">CourseDescription</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="CourseDescription" name="CourseDescription" type="text" value="" data-bind="value: CourseDescription">
</div>
</div>

<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="button" data-bind="click: updateCourse" value="Update" class="btn btn-default">
</div>
</div>
</div>
}
<script type="text/javascript">
var selectedCourse = ‘@Html.Raw(ViewBag.selectedCourse)’;
</script>
<div>
@Html.ActionLink("Back to List", "Read")
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/knockout-3.4.0.js"></script>
<script src="~/Scripts/KOScripts/KOUpdate.js"></script>
[/html]

And create a JS with name KOUpdate.js and add the following code.

[js]
var parsedSelectedCourse = $.parseJSON(selectedCourse);
$(function () {
ko.applyBindings(modelUpdate);
});

var modelUpdate = {
CourseID: ko.observable(parsedSelectedCourse.CourseID),
CourseName: ko.observable(parsedSelectedCourse.CourseName),
CourseDescription: ko.observable(parsedSelectedCourse.CourseDescription),
updateCourse: function () {
try {
$.ajax({
url: ‘/Home/Update’,
type: ‘POST’,
dataType: ‘json’,
data: ko.toJSON(this),
contentType: ‘application/json’,
success: successCallback,
error: errorCallback
});
} catch (e) {
window.location.href = ‘/Home/Read/’;
}
}
};

function successCallback(data) {
window.location.href = ‘/Home/Read/’;
}
function errorCallback(err) {
window.location.href = ‘/Home/Read/’;
}
[/js]

Now, run your application and see the Edit/Update operation.

edit_page

D – Delete operation

So our last operation, Delete. Let’s edit our controller as follows.

[csharp]
// GET: Home/Delete/5
public ActionResult Delete(int? id)
{
if (id == null)
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
var course = _db.Courses.Find(id);
if (course == null)
return HttpNotFound();
var serializer = new JavaScriptSerializer();
ViewBag.SelectedCourse = serializer.Serialize(course);
return View();
}

// POST: Home/Delete/5
[HttpPost, ActionName("Delete")]
public string Delete(Course course)
{
if (course == null) return "Invalid data";
var getCourse = _db.Courses.Find(course.CourseID);
_db.Courses.Remove(getCourse);
_db.SaveChanges();
return "Deleted successfully";
}
[/csharp]

The code looks exactly same as our update operation, so no explanation. Still if you get any issues, please ask. Now let us create our view.

[html]
@model MVCCRUDKnockout.Models.Course

@{
ViewBag.Title = "Delete";
}

<h2>Delete</h2>

<h3>Are you sure you want to delete this?</h3>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
<h4>Course</h4>

<div class="form-group">
<label class="control-label col-md-2" for="CourseName">CourseName</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="CourseName" name="CourseName" type="text" value="" data-bind="value: CourseName">
</div>
</div>

<div class="form-group">
<label class="control-label col-md-2" for="CourseDescription">CourseDescription</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="CourseDescription" name="CourseDescription" type="text" value="" data-bind="value: CourseDescription">
</div>
</div>

<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="button" data-bind="click: deleteCourse" value="Delete" class="btn btn-default">
</div>
</div>
</div>
}
<script type="text/javascript">
var selectedCourse = ‘@Html.Raw(ViewBag.selectedCourse)’;
</script>
<div>
@Html.ActionLink("Back to List", "Read")
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/knockout-3.4.0.js"></script>
<script src="~/Scripts/KOScripts/KODelete.js"></script>
[/html]

And you can always create our knockout codes as preceding.

[js]
var parsedSelectedCourse = $.parseJSON(selectedCourse);
$(function () {
ko.applyBindings(modelDelete);
});

var modelDelete = {
CourseID: ko.observable(parsedSelectedCourse.CourseID),
CourseName: ko.observable(parsedSelectedCourse.CourseName),
CourseDescription: ko.observable(parsedSelectedCourse.CourseDescription),
deleteCourse: function () {
try {
$.ajax({
url: ‘/Home/Delete’,
type: ‘POST’,
dataType: ‘json’,
data: ko.toJSON(this),
contentType: ‘application/json’,
success: successCallback,
error: errorCallback
});
} catch (e) {
window.location.href = ‘/Home/Read/’;
}
}
};

function successCallback(data) {
window.location.href = ‘/Home/Read/’;
}
function errorCallback(err) {
window.location.href = ‘/Home/Read/’;
}
[/js]

If everything goes fine, you will get a page as follows.

delete_page

That’s all for today. You can always download the source code attached to see the complete code and application. Happy coding!.

References

See also

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

Download source code

Background

I hope you have already gone though my previous article about IgniteUI grid control. You can consider that as an introduction to the control kit. Now as I mentioned, we will try to create a chart using the chart control. Is that fine?

Prerequisites

As I said in the introduction part, we are going to create an IgniteUI grid in MVC application, so you must have a visual studio installed in your machine.

Table of Contents

Download and install IgniteUI

Please see my previous post to see the steps to install the Ignite UI in your machine.

Set up database

[sql]
USE [master]
GO

/****** Object: Database [TrialsDB] Script Date: 07/14/2016 10:56:41 AM ******/
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]

Create table with data

[sql]
USE [TrialsDB]
GO
/****** Object: Table [dbo].[Product] Script Date: 5/12/2016 10:54:48 AM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Product](
[ProductID] [int] NOT NULL,
[Name] [nvarchar](max) NOT NULL,
[ProductNumber] [nvarchar](25) NOT NULL,
[MakeFlag] [bit] NOT NULL,
[FinishedGoodsFlag] [bit] NOT NULL,
[Color] [nvarchar](15) NULL,
[SafetyStockLevel] [smallint] NOT NULL,
[ReorderPoint] [smallint] NOT NULL,
[StandardCost] [money] NOT NULL,
[ListPrice] [money] NOT NULL,
[Size] [nvarchar](5) NULL,
[SizeUnitMeasureCode] [nchar](3) NULL,
[WeightUnitMeasureCode] [nchar](3) NULL,
[Weight] [decimal](8, 2) NULL,
[DaysToManufacture] [int] NOT NULL,
[ProductLine] [nchar](2) NULL,
[Class] [nchar](2) NULL,
[Style] [nchar](2) NULL,
[ProductSubcategoryID] [int] NULL,
[ProductModelID] [int] NULL,
[SellStartDate] [datetime] NOT NULL,
[SellEndDate] [datetime] NULL,
[DiscontinuedDate] [datetime] NULL,
[rowguid] [uniqueidentifier] ROWGUIDCOL NOT NULL,
[ModifiedDate] [datetime] NOT NULL
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO
INSERT [dbo].[Product] ([ProductID], [Name], [ProductNumber], [MakeFlag], [FinishedGoodsFlag], [Color], [SafetyStockLevel], [ReorderPoint], [StandardCost], [ListPrice], [Size], [SizeUnitMeasureCode], [WeightUnitMeasureCode], [Weight], [DaysToManufacture], [ProductLine], [Class], [Style], [ProductSubcategoryID], [ProductModelID], [SellStartDate], [SellEndDate], [DiscontinuedDate], [rowguid], [ModifiedDate]) VALUES (1, N’Adjustable Race’, N’AR-5381′, 0, 0, NULL, 1000, 750, 0.0000, 0.0000, NULL, NULL, NULL, NULL, 0, NULL, NULL, NULL, NULL, NULL, CAST(0x0000921E00000000 AS DateTime), NULL, NULL, N’694215b7-08f7-4c0d-acb1-d734ba44c0c8′, CAST(0x00009A5C00A53CF8 AS DateTime))
INSERT [dbo].[Product] ([ProductID], [Name], [ProductNumber], [MakeFlag], [FinishedGoodsFlag], [Color], [SafetyStockLevel], [ReorderPoint], [StandardCost], [ListPrice], [Size], [SizeUnitMeasureCode], [WeightUnitMeasureCode], [Weight], [DaysToManufacture], [ProductLine], [Class], [Style], [ProductSubcategoryID], [ProductModelID], [SellStartDate], [SellEndDate], [DiscontinuedDate], [rowguid], [ModifiedDate]) VALUES (2, N’Bearing Ball’, N’BA-8327′, 0, 0, NULL, 1000, 750, 0.0000, 0.0000, NULL, NULL, NULL, NULL, 0, NULL, NULL, NULL, NULL, NULL, CAST(0x0000921E00000000 AS DateTime), NULL, NULL, N’58ae3c20-4f3a-4749-a7d4-d568806cc537′, CAST(0x00009A5C00A53CF8 AS DateTime))
INSERT [dbo].[Product] ([ProductID], [Name], [ProductNumber], [MakeFlag], [FinishedGoodsFlag], [Color], [SafetyStockLevel], [ReorderPoint], [StandardCost], [ListPrice], [Size], [SizeUnitMeasureCode], [WeightUnitMeasureCode], [Weight], [DaysToManufacture], [ProductLine], [Class], [Style], [ProductSubcategoryID], [ProductModelID], [SellStartDate], [SellEndDate], [DiscontinuedDate], [rowguid], [ModifiedDate]) VALUES (3, N’BB Ball Bearing’, N’BE-2349′, 1, 0, NULL, 800, 600, 0.0000, 0.0000, NULL, NULL, NULL, NULL, 1, NULL, NULL, NULL, NULL, NULL, CAST(0x0000921E00000000 AS DateTime), NULL, NULL, N’9c21aed2-5bfa-4f18-bcb8-f11638dc2e4e’, CAST(0x00009A5C00A53CF8 AS DateTime))
INSERT [dbo].[Product] ([ProductID], [Name], [ProductNumber], [MakeFlag], [FinishedGoodsFlag], [Color], [SafetyStockLevel], [ReorderPoint], [StandardCost], [ListPrice], [Size], [SizeUnitMeasureCode], [WeightUnitMeasureCode], [Weight], [DaysToManufacture], [ProductLine], [Class], [Style], [ProductSubcategoryID], [ProductModelID], [SellStartDate], [SellEndDate], [DiscontinuedDate], [rowguid], [ModifiedDate]) VALUES (4, N’Headset Ball Bearings’, N’BE-2908′, 0, 0, NULL, 800, 600, 0.0000, 0.0000, NULL, NULL, NULL, NULL, 0, NULL, NULL, NULL, NULL, NULL, CAST(0x0000921E00000000 AS DateTime), NULL, NULL, N’ecfed6cb-51ff-49b5-b06c-7d8ac834db8b’, CAST(0x00009A5C00A53CF8 AS DateTime))
INSERT [dbo].[Product] ([ProductID], [Name], [ProductNumber], [MakeFlag], [FinishedGoodsFlag], [Color], [SafetyStockLevel], [ReorderPoint], [StandardCost], [ListPrice], [Size], [SizeUnitMeasureCode], [WeightUnitMeasureCode], [Weight], [DaysToManufacture], [ProductLine], [Class], [Style], [ProductSubcategoryID], [ProductModelID], [SellStartDate], [SellEndDate], [DiscontinuedDate], [rowguid], [ModifiedDate]) VALUES (316, N’Blade’, N’BL-2036′, 1, 0, NULL, 800, 600, 0.0000, 0.0000, NULL, NULL, NULL, NULL, 1, NULL, NULL, NULL, NULL, NULL, CAST(0x0000921E00000000 AS DateTime), NULL, NULL, N’e73e9750-603b-4131-89f5-3dd15ed5ff80′, CAST(0x00009A5C00A53CF8 AS DateTime))
INSERT [dbo].[Product] ([ProductID], [Name], [ProductNumber], [MakeFlag], [FinishedGoodsFlag], [Color], [SafetyStockLevel], [ReorderPoint], [StandardCost], [ListPrice], [Size], [SizeUnitMeasureCode], [WeightUnitMeasureCode], [Weight], [DaysToManufacture], [ProductLine], [Class], [Style], [ProductSubcategoryID], [ProductModelID], [SellStartDate], [SellEndDate], [DiscontinuedDate], [rowguid], [ModifiedDate]) VALUES (317, N’LL Crankarm’, N’CA-5965′, 0, 0, N’Black’, 500, 375, 0.0000, 0.0000, NULL, NULL, NULL, NULL, 0, NULL, N’L ‘, NULL, NULL, NULL, CAST(0x0000921E00000000 AS DateTime), NULL, NULL, N’3c9d10b7-a6b2-4774-9963-c19dcee72fea’, CAST(0x00009A5C00A53CF8 AS DateTime))
INSERT [dbo].[Product] ([ProductID], [Name], [ProductNumber], [MakeFlag], [FinishedGoodsFlag], [Color], [SafetyStockLevel], [ReorderPoint], [StandardCost], [ListPrice], [Size], [SizeUnitMeasureCode], [WeightUnitMeasureCode], [Weight], [DaysToManufacture], [ProductLine], [Class], [Style], [ProductSubcategoryID], [ProductModelID], [SellStartDate], [SellEndDate], [DiscontinuedDate], [rowguid], [ModifiedDate]) VALUES (318, N’ML Crankarm’, N’CA-6738′, 0, 0, N’Black’, 500, 375, 0.0000, 0.0000, NULL, NULL, NULL, NULL, 0, NULL, N’M ‘, NULL, NULL, NULL, CAST(0x0000921E00000000 AS DateTime), NULL, NULL, N’eabb9a92-fa07-4eab-8955-f0517b4a4ca7’, CAST(0x00009A5C00A53CF8 AS DateTime))
[/sql]

Creating models and entity

If you don’t know how to create an entity in your solution, please read that here. I have mentioned the steps to be followed in that article. Once you have created the entity, you are good to go.

Here I am assuming that you have created an entity and got a model class as preceding.

[csharp]
//——————————————————————————
// <auto-generated>
// This code was generated from a template.
//
// Manual changes to this file may cause unexpected behavior in your application.
// Manual changes to this file will be overwritten if the code is regenerated.
// </auto-generated>
//——————————————————————————

namespace IgniteUI.Models
{
using System;
using System.Collections.Generic;

public partial class Product
{
public int ProductID { get; set; }
public string Name { get; set; }
public string ProductNumber { get; set; }
public bool MakeFlag { get; set; }
public bool FinishedGoodsFlag { get; set; }
public string Color { get; set; }
public short SafetyStockLevel { get; set; }
public short ReorderPoint { get; set; }
public decimal StandardCost { get; set; }
public decimal ListPrice { get; set; }
public string Size { get; set; }
public string SizeUnitMeasureCode { get; set; }
public string WeightUnitMeasureCode { get; set; }
public Nullable<decimal> Weight { get; set; }
public int DaysToManufacture { get; set; }
public string ProductLine { get; set; }
public string Class { get; set; }
public string Style { get; set; }
public Nullable<int> ProductSubcategoryID { get; set; }
public Nullable<int> ProductModelID { get; set; }
public System.DateTime SellStartDate { get; set; }
public Nullable<System.DateTime> SellEndDate { get; set; }
public Nullable<System.DateTime> DiscontinuedDate { get; set; }
public System.Guid rowguid { get; set; }
public System.DateTime ModifiedDate { get; set; }
}
}
[/csharp]

Configure MVC application

As you have finished your installing, we can create a MVC application now. Open your Visual Studio and click on new project. Name your project, here I am going to name my project as IgniteUIGrid. Select MVC template and click OK.

Click on the reference and add DLL reference of IgiteUI from C:\Program Files (x86)\Infragistics\2016.1\Ignite UI\MVC\MVC6\Bin\dnx451 or from which ever the folder you installed IgniteUI.

Create controller and actions

Now create a controller as follows.

[csharp]
using System.Web.Mvc;

namespace IgniteUI.Controllers
{
public class ChartController : Controller
{
private IgniteUI.Models.TrialsDBEntities db = new IgniteUI.Models.TrialsDBEntities();

public ActionResult Index()
{
return View();
}
}
}
[/csharp]

Now we will create a JsonResult action for fetching the products from database.

[csharp]
[HttpGet]
public JsonResult Getproducts()
{
var model = db.Products.AsQueryable().GroupBy(g => g.Name, g => g.ReorderPoint, (key, g) => new
{
Name = key,
ReorderPoint = g.Take(1)
}).Take(10);
return Json(model, JsonRequestBehavior.AllowGet);
}
[/csharp]

Here I am just grouping the items together and taking the first value for Y axis. And as you know we will we setting ‘Name’ as X axis value in chart.

Now shall we create a view?

Create view

[html]
@using Infragistics.Web.Mvc;
@using IgniteUI.Models;
@model IQueryable<IgniteUI.Models.Product>
[/html]

Creating IgniteUI Chart

So our view is ready, now we will create an element where we can render our chart.

[html]
<div style="width: 100%;">
<div id="chart"></div>
</div>
[/html]

What is next? Yes you are right. We need an ajax call.

[js]
<script>
$(function () {
$.ajax({
type: ‘GET’,
url: ‘http://localhost:39044/chart/Getproducts’,
beforeSend: function () {
},
success: function (data) {
GenerateChart(data);
},
error: function (e) {
console.log(‘Error occured: ‘ + e.message);
}
});
});
</script>
[/js]

Here GenerateChart is where we actually build our chart.

[js]
function GenerateChart(chartData) {
$("#chart").igDataChart({
width: "100%",
height: "500px",
title: "Product vs Reorder Point",
subtitle: "Final products and reorder Point",
dataSource: chartData,
axes: [
{
name: "NameAxis",
type: "categoryX",
title: "Product Name",
label: "Name"
},
{
name: "YAxisReorderPoint",
type: "numericY",
minimumValue: 0,
title: "Reorder Point",
}
],
series: [
{
name: "NameReorderPoint",
type: "column",
isHighlightingEnabled: true,
isTransitionInEnabled: true,
xAxis: "NameAxis",
yAxis: "YAxisReorderPoint",
valueMemberPath: "ReorderPoint"
}
]
});
}
[/js]

Go to your shared view folder, open _Layout.cshtml and add the following references to the view.

[html]
<!– Ignite UI Required Combined CSS Files –>
<link href="http://cdn-na.infragistics.com/igniteui/2016.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2016.1/latest/css/structure/infragistics.css" rel="stylesheet" />
<!–CSS file specific for chart styling –>
<link href="http://cdn-na.infragistics.com/igniteui/2016.1/latest/css/structure/modules/infragistics.ui.chart.css" rel="stylesheet" />

<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

<!– Ignite UI Required Combined JavaScript Files –>
<script src="http://cdn-na.infragistics.com/igniteui/2016.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2016.1/latest/js/infragistics.lob.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2016.1/latest/js/infragistics.dv.js"></script>
[/html]

Now please run your application and go to the http://localhost:39044/Chart, there you can see a chart with the data you have given.

Ignite_UI_Chart_Control

Sounds good? I hope you have got some knowledge about the Ignite UI chart control. That’s all for today. See you soon with other Ignite UI controls.

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

Background

Recently I hosted one of my MVC application to Microsoft Azure cloud. And we usually publish our application in release mode right? So here the problem comes. You can replicate the same issue in your local machine itself. Just make the debug attribute to false in your Web.config as follows.

[xml]
<compilation debug="false" targetFramework="4.5" />
[/xml]

And when you run, you will get a prompt as follows.

Run without debugging

Just select Run without debugging option. Now once after your application is run, you can see some script errors in your browser console saying that the references are not loaded correctly.

Release more error in console

And finally I could find the solution. Here we will see that.

Bundles Are Not Working After Hosting To MVC Application

As I said, the problem is with your bundle config settings. There are few things you must check before going to the last fix.

If none of the above solution works, you can try the last one.

I will explain it. In my case my bundles were as follows.

[html]
@Styles.Render("~/Scripts/JQWidgets/CSS")
@Scripts.Render("~/Scripts/JQWidgets")
[/html]

And I have the folders JQWidgets in my root script folder. This was making the issue.

Folder structure

Now what I did is, I just changed my bundle config settings in BundleConfig.cs as follows(Renaming the folder)

[csharp]
bundles.Add(new ScriptBundle("~/Scripts/Grid")
bundles.Add(new StyleBundle("~/Scripts/Grid/Styles")
[/csharp]

And I referenced the same bundles as follows in my views.

[csharp]
@Styles.Render("~/Scripts/Grid/Styles")
@Scripts.Render("~/Scripts/Grid")
[/csharp]

Please try these steps and build your application. Once that is done you can publish your application to cloud. I hope this will solve your issue. Have a 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

• MVC Tips, Tricks, Blogs
• Web API Tips, Tricks, Blogs

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.

• Web API Application and Consumer

Background

We all use Web API in our applications to implement HTTP services. HTTP services are much simpler than ever if we use Web API. But the fact is, the benefits of a Web API is not limited to that. Previously we use WCF services instead of Web API, where we were working with endpoints and all. Here I am going to explain an important feature of a Web API that we can call Web API from our server itself instead of using an Ajax Call. That is pretty cool, right? Now we will create our application.

First, we will create our Web API application.

Creating Web API application

Click File-> New-> Project then select MVC application. We will select the template as empty from the following pop-up and select the core references and folders for MVC.

Once you click OK, a project with MVC like folder structure with core references will be created for you.

Using the code

We will set up our database first so that we can create an Entity Model for our application later.

Create a database

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

Now we will create the table we needed. As of now, I am going to create the table tblTags

Create tables in the database

Below is the query to create the table tblTags.

Can we insert some data into the tables now?

Insert data to the table

You can use the below query to insert the data to the table tblTags

The next thing we are going to do is creating an 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. Here I gave Dashboard for our Entity data model name. Now you can see a file with an edmx extension has been created.
Now will create our Web API controller.

Create Web API Controller

To create a Web API controller, just right click on your controller folder and click Add -> Controller -> Select Web API 2 controller with actions, using Entity Framework.

Now select tblTag (WebAPIWithHttpClient.Models) as our Model class and TrialsDBEntities (WebAPIWithHttpClient.Models) as data context class. This time we will select controller with async actions.

As you can see It has been given the name of our controller as tblTags. Here I am not going to change that, if you wish to change, you can do that.

Now you will be given the following codes in our new Web API controller.

As you can see, we have actions for,

• Get
• Post
• Put
• Delete

So the coding part to fetch the data from the database is ready, now we need to check whether our Web API is ready for action!. To check that, you just need to run the URL http://localhost:7967/api/tbltags. Here tblTags is our Web API controller name. I hope you get the data as a result.

As of now, our Web API application is ready, and we have just tested whether it is working or not. Now we can move on to create a console application where we can consume this Web API with the help of HttpClient. So shall we do that?

Create Console Application To Consume Web API

To create a console application, Click File -> New -> Click Windows -> Select Console application -> Name your application -> OK

I hope now you have a class called Program. cs with the below codes.

Now we will start our coding, We will create a class called tblTag with some properties so that we can use those when we need them.

To get started using the class HttpClient, you must import the namespace as follows.

using System.Net.Http;

Once you have imported the namespaces, we will set our HttpClient and the properties as follows.

As you can see we are just giving the base address of our API and setting the response header. Now we will create an async action to get the data from our database by calling our Web API.

Get operation using HttpClient

MyAPIGet(cons).Wait();

Following is the definition of the MyAPIGet function.

Here res.EnsureSuccessStatusCode(); ensure that it throws errors if we get any. If you don’t need to throw the errors, please remove this line of code. If the async call is a success, the value in IsSuccessStatusCode will be true.

Now when you run the above code, there are chances to get an error as follows.

Error CS1061 ‘HttpContent’ does not contain a definition for ‘ReadAsAsync’ and no extension method ‘ReadAsAsync’ accepting a first argument of type ‘HttpContent’ could be found (are you missing a using directive or an assembly reference?)

This is just because the ReadAsAsync is a part of System.Net.Http.Formatting.dll which we have not added to our application as a reference yet. Now we will do that? Sounds OK?

Just right click on the references and click add reference -> Click browse -> search for System.Net.Http.Formatting.dll – Click OK

Please add Newtonsoft.Json also. Now let us run our project and see our output.

Now shall we create a function for updating the record? Yes, we are going to create a function with the ‘Put’ request. Please copy and paste the preceding code for that.

Put operation using HttpClient

As you can see, we are updating the record as below once we get the response from await cons.GetAsync(“api/tblTags/2”) .

Again, run your application and check whether the tag name has been changed to ‘New Tag’.

Now did you see that your tag name has been changed? If yes, we are ready to go for our next operation. Are you ready?

Delete operation using HttpClient

We will follow the same procedure for delete operation too. Please see the code for the delete operation below.

To delete a record we uses res = await cons.DeleteAsync(“api/tblTags/2”); method. Now run your application and see the result.

What action is pending now? Yes, it is Post.

Post-operation using HttpClient

Please add the below function to your project for the post-operation.

We are just creating a new tblTag and assign some values, once the object is ready we are calling the method PostAsJsonAsync as follows.

As you have noticed, I have not provided the tagId in the object, do you know why? I have already set Identity Specification with Identity Increment 1 in my table tblTags in the SQL database.

Now we will see the output. Shall we?

We have done everything!. That’s fantastic right? Have a happy coding.

You can always use WebClient also for this requirement, that I will share in an another article.

Conclusion

Did I miss anything that you may think is needed? Did you try Web API yet? Have you ever wanted to call a Web API from the server itself or any console application? Could you find this post 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

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.

Background

For the past few days I am working with Web API.Here we are going to see a demo of how to use Caching in Web API in our MVC application. We are going to use the DLL System.Runtime.Caching.dll, which you need to add as reference.

Create a MVC application

Click File-> New-> Project then select MVC application. From the following pop up we will select the template as empty and select the core references and folders for MVC.

Empty Template With MVC And Web API Folders

Once you click OK, a project with MVC like folder structure with core references will be created for you.

Folder Structure And References For Empty MVC Project

Once your application is ready, we can add the reference for System.Runtime.Caching

Add reference for System.Runtime.Caching

To add the reference, right click on References and click Add reference.

Add_References

Now click on the browse button, and search for System.Runtime.Caching

References_Found_

And the click OK, the DLL will be added to your references now.

Using the code

We will set up our database first so that we can create Entity Model for our application later.

Create a database

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

[sql]
USE [master]
GO

/****** Object: Database [TrialsDB]
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 the table we needed. As of now I am going to create the table tblTags

Create tables in database

Below is the query to create the table tblTags.

[sql]
USE [TrialsDB]
GO

/****** Object: Table [dbo].[tblTags] Script Date: 23-Mar-16 5:01:22 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 tables now?

Insert data to table

You can use the below query to insert the data to the table tblTags

[sql]
USE [TrialsDB]
GO

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

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. Here I gave Dashboard for our Entity data model name. Now you can see a file with edmx extension have been created.
Now will create our Web API controller.

Create Web API Controller

To create a Web API controller, just right click on your controller folder and click Add -> Controller -> Select Web API 2 controller with actions, using Entity Framework.

Web API 2 Controller With Actions Using Entity Framework

Now select tblTag (CachingInWebAPI.Models) as our Model class and TrialsDBEntities (CachingInWebAPI.Models) as data context class.

As you can see It has been given the name of our controller as tblTags. Here I am not going to change that, if you wish to change, you can do that.

Now you will be given the following codes in our new Web API controller.

[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.Http;
using System.Web.Http.Description;
using CachingInWebAPI.Models;

namespace CachingInWebAPI.Controllers
{
public class tblTagsController : ApiController
{
private TrialsDBEntities db = new TrialsDBEntities();

// GET: api/tblTags
public IQueryable<tblTag> GettblTags()
{
return db.tblTags;
}

// GET: api/tblTags/5
[ResponseType(typeof(tblTag))]
public IHttpActionResult GettblTag(int id)
{
tblTag tblTag = db.tblTags.Find(id);
if (tblTag == null)
{
return NotFound();
}

return Ok(tblTag);
}

// PUT: api/tblTags/5
[ResponseType(typeof(void))]
public IHttpActionResult PuttblTag(int id, tblTag tblTag)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}

if (id != tblTag.tagId)
{
return BadRequest();
}

db.Entry(tblTag).State = EntityState.Modified;

try
{
db.SaveChanges();
}
catch (DbUpdateConcurrencyException)
{
if (!tblTagExists(id))
{
return NotFound();
}
else
{
throw;
}
}

return StatusCode(HttpStatusCode.NoContent);
}

// POST: api/tblTags
[ResponseType(typeof(tblTag))]
public IHttpActionResult PosttblTag(tblTag tblTag)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}

db.tblTags.Add(tblTag);
db.SaveChanges();

return CreatedAtRoute("DefaultApi", new { id = tblTag.tagId }, tblTag);
}

// DELETE: api/tblTags/5
[ResponseType(typeof(tblTag))]
public IHttpActionResult DeletetblTag(int id)
{
tblTag tblTag = db.tblTags.Find(id);
if (tblTag == null)
{
return NotFound();
}

db.tblTags.Remove(tblTag);
db.SaveChanges();

return Ok(tblTag);
}

protected override void Dispose(bool disposing)
{
if (disposing)
{
db.Dispose();
}
base.Dispose(disposing);
}

private bool tblTagExists(int id)
{
return db.tblTags.Count(e => e.tagId == id) > 0;
}
}
}
[/csharp]

As we are not going to use only read operation, you can remove other functionalities and keep only Get methods for now.

[csharp]
// GET: api/tblTags
public IQueryable<tblTag> GettblTags()
{
return db.tblTags;
}
[/csharp]

So the coding part to fetch the data from database is ready, now we need to check whether our Web API is ready for action!. To check that, you just need to run the URL http://localhost:4832/api/tblTags. Here tblTags is our Web API controller name. I hope you get the data as a result.

Web_API_Result

Now we will start testing our caching. For that please import the namespace System.Runtime.Caching;

[csharp]
using System.Runtime.Caching;
[/csharp]

Next we will create an instance of MemoryCache class.

MemoryCache_Tooltip_

As you can see there are four possible settings we can set in MemoryCache class.

MemoryCache_Settings

Now we can add MemoryCache as follows.

[csharp]
public IQueryable<tblTag> GettblTags()
{
var ca = db.tblTags;
memCache.Add("tag", ca, DateTimeOffset.UtcNow.AddMinutes(5));
return db.tblTags;
}
[/csharp]

MemoryCache_Add

Here “tag” is my key and “ca” is my values and DateTimeOffset.UtcNow.AddMinutes(5) is for setting the cache for five minutes from now.

Shall we check how it works now? To check whether the content has been added to the cache we need to use the Get method, please see the code block below.

[csharp]
var res = memCache.Get("tag");
if (res != null)
{
return res;
}
else {
var ca = db.tblTags;
memCache.Add("tag", ca, DateTimeOffset.UtcNow.AddMinutes(5));
return db.tblTags;
}
[/csharp]

We will get the cache values in the variable res, remember this values will be there only for five minutes. You can always change that as per need. If the value is not null, we will just return it and do the manipulation and if it is null we will go ahead and fetch the data from database and add the value to cache. Now please run your API by running the URL http://localhost:4832/api/tblTags.

Cache_Value_Null

You can see that we are setting the value to memCache as the memCache.Get(“tag”) is null.

Cache_Value_Not_Null

So we just tried to load the same Web API URL within five minutes, so we gets values from memCache.Get(“tag”). Sounds good?

There is an option to remove our cache too, we will see that now. We will use the Remove function for the same. First we will check whether the key is available in the MemoryCache, if it is available we will remove that.

[csharp]
//This is to remove the MemoryCache – start
if (memCache.Contains("tag"))
{
memCache.Remove("tag");
}
//This is to remove the MemoryCache – end
[/csharp]

MemoryCache_Remove

We have done everything!. That’s fantastic right? 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 caching in Web API? 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

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.

Background

For the past few days I am experiment few things in Angular JS. Here we are going to see a demo of how to use Angular JS autocomplete in MVC with Web API to fetch the data from database. Once we are done, this is how our applications output will be.

Angular_JS_Autocomplete_In_MVC_With_Web_API_Output_

Angular_JS_Autocomplete_In_MVC_With_Web_API_Output_With_Filter_

Create a MVC application

Click File-> New-> Project then select MVC application. From the following pop up we will select the template as empty and select the core references and folders for MVC.

Empty Template With MVC And Web API Folders

Once you click OK, a project with MVC like folder structure with core references will be created for you.

Folder Structure And References For Empty MVC Project

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) are loaded in your scripts folder.

Using the code

As I have said before, we are going to use Angular JS for our client side operations, so it is better to create the Angular JS script files first right? Just to make sure that we have got all the required things :). For that I am going to create a script file called Home.js in which we will write our scripts. Sounds good? Yes, we have set everything to get started our coding. Now we will create a Web API controller and get the data from database in JSON format. Let’s start then.

We will set up our database first so that we can create Entity Model for our application later.

Create a database

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

[sql]
USE [master]
GO

/****** Object: Database [TrialsDB]
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 the table we needed. As of now I am going to create the table Products

Create tables in database

Below is the query to create the table Product.

[sql]
USE [TrialsDB]
GO

/****** Object: Table [dbo].[Product]
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[Product](
[ProductID] [int] NOT NULL,
[Name] [nvarchar](max) NOT NULL,
[ProductNumber] [nvarchar](25) NOT NULL,
[MakeFlag] [bit] NOT NULL,
[FinishedGoodsFlag] [bit] NOT NULL,
[Color] [nvarchar](15) NULL,
[SafetyStockLevel] [smallint] NOT NULL,
[ReorderPoint] [smallint] NOT NULL,
[StandardCost] [money] NOT NULL,
[ListPrice] [money] NOT NULL,
[Size] [nvarchar](5) NULL,
[SizeUnitMeasureCode] [nchar](3) NULL,
[WeightUnitMeasureCode] [nchar](3) NULL,
[Weight] [decimal](8, 2) NULL,
[DaysToManufacture] [int] NOT NULL,
[ProductLine] [nchar](2) NULL,
[Class] [nchar](2) NULL,
[Style] [nchar](2) NULL,
[ProductSubcategoryID] [int] NULL,
[ProductModelID] [int] NULL,
[SellStartDate] [datetime] NOT NULL,
[SellEndDate] [datetime] NULL,
[DiscontinuedDate] [datetime] NULL,
[rowguid] [uniqueidentifier] ROWGUIDCOL NOT NULL,
[ModifiedDate] [datetime] NOT NULL
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

GO
[/sql]

Can we insert some data to the tables now?

Insert data to table

You can use the below query to insert the data to the table Product

[sql]
USE [TrialsDB]
GO

INSERT INTO [dbo].[Product]
([ProductID]
,[Name]
,[ProductNumber]
,[MakeFlag]
,[FinishedGoodsFlag]
,[Color]
,[SafetyStockLevel]
,[ReorderPoint]
,[StandardCost]
,[ListPrice]
,[Size]
,[SizeUnitMeasureCode]
,[WeightUnitMeasureCode]
,[Weight]
,[DaysToManufacture]
,[ProductLine]
,[Class]
,[Style]
,[ProductSubcategoryID]
,[ProductModelID]
,[SellStartDate]
,[SellEndDate]
,[DiscontinuedDate]
,[rowguid]
,[ModifiedDate])
VALUES
(<ProductID, int,>
,<Name, nvarchar(max),>
,<ProductNumber, nvarchar(25),>
,<MakeFlag, bit,>
,<FinishedGoodsFlag, bit,>
,<Color, nvarchar(15),>
,<SafetyStockLevel, smallint,>
,<ReorderPoint, smallint,>
,<StandardCost, money,>
,<ListPrice, money,>
,<Size, nvarchar(5),>
,<SizeUnitMeasureCode, nchar(3),>
,<WeightUnitMeasureCode, nchar(3),>
,<Weight, decimal(8,2),>
,<DaysToManufacture, int,>
,<ProductLine, nchar(2),>
,<Class, nchar(2),>
,<Style, nchar(2),>
,<ProductSubcategoryID, int,>
,<ProductModelID, int,>
,<SellStartDate, datetime,>
,<SellEndDate, datetime,>
,<DiscontinuedDate, datetime,>
,<rowguid, uniqueidentifier,>
,<ModifiedDate, datetime,>)
GO
[/sql]

So let us say, we have inserted the data as follows. If you feel bored of inserting data manually, you can always run the SQL script file attached which has the insertion queries. Just run that, you will be all OK. If you don’t know how to generate SQL scripts with data, I strongly recommend you to have a read here

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. Here I gave Dashboard for our Entity data model name. Now you can see a file with edmx extension have been created. If you open that file, you can see as below.

Entity Data Model Product Table

Now will create our Web API controller.

Create Web API Controller

To create a Web API controller, just right click on your controller folder and click Add -> Controller -> Select Web API 2 controller with actions, using Entity Framework.

Web API 2 Controller With Actions Using Entity Framework

Now select Product (AngularJSAutocompleteInMVCWithWebAPI.Models) as our Model class and TrialsDBEntities (AngularJSAutocompleteInMVCWithWebAPI.Models) as data context class.

Model Class And Data Context Class

As you can see It has been given the name of our controller as Products. Here I am not going to change that, if you wish to change, you can do that.

Now you will be given the following codes in our new Web API controller.

[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.Http;
using System.Web.Http.Description;
using AngularJSAutocompleteInMVCWithWebAPI.Models;

namespace AngularJSAutocompleteInMVCWithWebAPI.Controllers
{
public class ProductsController : ApiController
{
private TrialsDBEntities db = new TrialsDBEntities();

// GET: api/Products
public IQueryable<Product> GetProducts()
{
return db.Products;
}

// GET: api/Products/5
[ResponseType(typeof(Product))]
public IHttpActionResult GetProduct(int id)
{
Product product = db.Products.Find(id);
if (product == null)
{
return NotFound();
}

return Ok(product);
}

// PUT: api/Products/5
[ResponseType(typeof(void))]
public IHttpActionResult PutProduct(int id, Product product)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}

if (id != product.ProductID)
{
return BadRequest();
}

db.Entry(product).State = EntityState.Modified;

try
{
db.SaveChanges();
}
catch (DbUpdateConcurrencyException)
{
if (!ProductExists(id))
{
return NotFound();
}
else
{
throw;
}
}

return StatusCode(HttpStatusCode.NoContent);
}

// POST: api/Products
[ResponseType(typeof(Product))]
public IHttpActionResult PostProduct(Product product)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}

db.Products.Add(product);

try
{
db.SaveChanges();
}
catch (DbUpdateException)
{
if (ProductExists(product.ProductID))
{
return Conflict();
}
else
{
throw;
}
}

return CreatedAtRoute("DefaultApi", new { id = product.ProductID }, product);
}

// DELETE: api/Products/5
[ResponseType(typeof(Product))]
public IHttpActionResult DeleteProduct(int id)
{
Product product = db.Products.Find(id);
if (product == null)
{
return NotFound();
}

db.Products.Remove(product);
db.SaveChanges();

return Ok(product);
}

protected override void Dispose(bool disposing)
{
if (disposing)
{
db.Dispose();
}
base.Dispose(disposing);
}

private bool ProductExists(int id)
{
return db.Products.Count(e => e.ProductID == id) > 0;
}
}
}
[/csharp]

As we are not going to use only read operation, you can remove other functionalities and keep only Get methods.

[csharp]
// GET: api/Products
public IQueryable<Product> GetProducts()
{
return db.Products;
}
[/csharp]

So the coding part to fetch the data from database is ready, now we need to check whether our Web API is ready for action!. To check that, you just need to run the URL http://localhost:9038/api/products. Here products is our Web API controller name. I hope you get the data as a result.

Web API Result

Now we will go back to our angular JS file and consume this Web API. You need to change the scripts in the Home.js as follows.

[js]
(function () {
‘use strict’;
angular
.module(‘MyApp’, [‘ngMaterial’, ‘ngMessages’, ‘material.svgAssetsCache’])
.controller(‘AutoCompleteCtrl’, AutoCompleteCtrl);
function AutoCompleteCtrl($http, $timeout, $q, $log) {
var self = this;
self.simulateQuery = true;
self.products = loadAllProducts($http);
self.querySearch = querySearch;
function querySearch(query) {
var results = query ? self.products.filter(createFilterFor(query)) : self.products, deferred;
if (self.simulateQuery) {
deferred = $q.defer();
$timeout(function () { deferred.resolve(results); }, Math.random() * 1000, false);
return deferred.promise;
} else {
return results;
}
}
function loadAllProducts($http) {
var allProducts = [];
var url = ”;
var result = [];
url = ‘api/products’;
$http({
method: ‘GET’,
url: url,
}).then(function successCallback(response) {
allProducts = response.data;
angular.forEach(allProducts, function (product, key) {
result.push(
{
value: product.Name.toLowerCase(),
display: product.Name
});
});
}, function errorCallback(response) {
console.log(‘Oops! Something went wrong while fetching the data. Status Code: ‘ + response.status + ‘ Status statusText: ‘ + response.statusText);
});
return result;
}
function createFilterFor(query) {
var lowercaseQuery = angular.lowercase(query);
return function filterFn(product) {
return (product.value.indexOf(lowercaseQuery) === 0);
};

}
}
})();
[/js]

Here MyApp is our module name and AutoCompleteCtrl is our controller name. The function loadAllProducts is for loading the products from database using $http in Angular JS.

Once our service is called, we will get the data in return. We will parse the same and store it in a variable for future use. We will loop through the same using angular.forEach and format as needed.

[js]
angular.forEach(allProducts, function (product, key) {
result.push(
{
value: product.Name.toLowerCase(),
display: product.Name
});
});
[/js]

The function querySearch will be called when ever user search for any particular products. This we will call from the view as follows.

[html]
md-items="item in ctrl.querySearch(ctrl.searchText)"
[/html]

Now we need a view to show our data right? Yes, we need a controller too!.

Create a MVC controller

To create a controller, we need to right click on the controller folder, Add – Controller. I hope you will be given a controller as follows.

[csharp]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace AngularJSAutocompleteInMVCWithWebAPI.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
}
}
[/csharp]

Here Home is our controller name.

Now we need a view right?

Creating a view

To create a view, just right click on your controller name -> Add View -> Add.

Creating a view

Now in your view add the needed references.

[html]
<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/Home.js"></script>
[/html]

Once we add the references, we can call our Angular JS controller and change the view code as follows.

[html]
<div ng-controller="AutoCompleteCtrl as ctrl" layout="column" ng-cloak="" class="autocompletedemoBasicUsage" ng-app="MyApp" style="width: 34%;">
<md-content class="md-padding">
<form ng-submit="$event.preventDefault()">
<md-autocomplete md-no-cache="false" md-selected-item="ctrl.selectedItem" md-search-text="ctrl.searchText" md-items="item in ctrl.querySearch(ctrl.searchText)" md-item-text="item.display" md-min-length="0" placeholder="Search for products here!.">
<md-item-template>
<span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
</md-item-template>
<md-not-found>
No matching "{{ctrl.searchText}}" were found.
</md-not-found>
</md-autocomplete>
</form>
</md-content>
</div>
[/html]

Here md-autocomplete will cache the result we gets from database to avoid the unwanted hits to the database. This we can disable/enable by the help of md-no-cache. Now if you run your application, you can see our Web API call works fine and successfully get the data. But the page looks clumsy right? For this you must add a style sheet angular-material.css.

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

Now run your page again, I am sure you will get the output as follows.

Output

Angular_JS_Autocomplete_In_MVC_With_Web_API_Output_

Angular_JS_Autocomplete_In_MVC_With_Web_API_Output_With_Filter_

We have done everything!. That’s fantastic right? Have a happy coding.

Reference

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

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.

Background

I am working now in a personal dashboard application in which I uses HighChart products for the chart integration. We can always load the chart widgets with server side data and Angular JS right? Here we will discuss that. We are going to create the preceding charts for our dashboard.

Once we are done, this is how our applications output will be.

Chart Widgets With Server Side Data In MVC Using Angular JS And Web API Output

Create a MVC application

Click File-> New-> Project then select MVC application. From the following pop up we will select the template as empty and select the core references and folders for MVC.

MVC Project With Empty Template

Once you click OK, a project with MVC like folder structure with core references will be created for you.

Folder Structure And References For Empty MVC Project

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) are loaded in your scripts folder.

Using the code

As I have said before, we are going to use Angular JS for our client side operations, so it is better to create the Angular JS script files first right? Just to make sure that we have got all the required things :). For that, create a folder named Widget in script folder and right click -> Add -> New Item -> Select AngularJS Module and enter the module name -> Click Add.

Creating Angular JS Modue In MVC Application

Follow the same procedure to create Angular JS factory and Angular JS controller. Yes, we have set everything to get started our coding. Now we will create a Web API controller and get the data from database in JSON format. Let’s start then.

Create Web API Controller

To create a Web API controller, just right click on your controller folder and click Add -> Controller -> Select Web API controller – Empty ( We will create our own actions later) -> Name the controller (Here I am giving the controller name as Widget).

So our controller is ready, now we need to set up our database so that we can create Entity Model for our application later.

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: 16-Mar-16 4:08:15 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 the tables we needed. As of now I am going to create two tables.

These tables are having relationship by the key ProductID.

Create tables in database

Below is the query to create SalesOrderDetail table in database.

[sql]
USE [TrialsDB]
GO

/****** Object: Table [dbo].[SalesOrderDetail] Script Date: 16-Mar-16 4:10:22 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]

Now we will create the table Product.

[sql]
USE [TrialsDB]
GO

/****** Object: Table [dbo].[Product] Script Date: 16-Mar-16 4:11:29 PM ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[Product](
[ProductID] [int] NOT NULL,
[Name] [nvarchar](max) NOT NULL,
[ProductNumber] [nvarchar](25) NOT NULL,
[MakeFlag] [bit] NOT NULL,
[FinishedGoodsFlag] [bit] NOT NULL,
[Color] [nvarchar](15) NULL,
[SafetyStockLevel] [smallint] NOT NULL,
[ReorderPoint] [smallint] NOT NULL,
[StandardCost] [money] NOT NULL,
[ListPrice] [money] NOT NULL,
[Size] [nvarchar](5) NULL,
[SizeUnitMeasureCode] [nchar](3) NULL,
[WeightUnitMeasureCode] [nchar](3) NULL,
[Weight] [decimal](8, 2) NULL,
[DaysToManufacture] [int] NOT NULL,
[ProductLine] [nchar](2) NULL,
[Class] [nchar](2) NULL,
[Style] [nchar](2) NULL,
[ProductSubcategoryID] [int] NULL,
[ProductModelID] [int] NULL,
[SellStartDate] [datetime] NOT NULL,
[SellEndDate] [datetime] NULL,
[DiscontinuedDate] [datetime] NULL,
[rowguid] [uniqueidentifier] ROWGUIDCOL NOT NULL,
[ModifiedDate] [datetime] NOT NULL
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

GO
[/sql]

Can we insert some data to the tables now?

Insert data to table

You can use the below query to insert the data to SalesOrderDetail.

[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]

and the following query can be used for the table Product

[sql]
USE [TrialsDB]
GO

INSERT INTO [dbo].[Product]
([ProductID]
,[Name]
,[ProductNumber]
,[MakeFlag]
,[FinishedGoodsFlag]
,[Color]
,[SafetyStockLevel]
,[ReorderPoint]
,[StandardCost]
,[ListPrice]
,[Size]
,[SizeUnitMeasureCode]
,[WeightUnitMeasureCode]
,[Weight]
,[DaysToManufacture]
,[ProductLine]
,[Class]
,[Style]
,[ProductSubcategoryID]
,[ProductModelID]
,[SellStartDate]
,[SellEndDate]
,[DiscontinuedDate]
,[rowguid]
,[ModifiedDate])
VALUES
(<ProductID, int,>
,<Name, nvarchar(max),>
,<ProductNumber, nvarchar(25),>
,<MakeFlag, bit,>
,<FinishedGoodsFlag, bit,>
,<Color, nvarchar(15),>
,<SafetyStockLevel, smallint,>
,<ReorderPoint, smallint,>
,<StandardCost, money,>
,<ListPrice, money,>
,<Size, nvarchar(5),>
,<SizeUnitMeasureCode, nchar(3),>
,<WeightUnitMeasureCode, nchar(3),>
,<Weight, decimal(8,2),>
,<DaysToManufacture, int,>
,<ProductLine, nchar(2),>
,<Class, nchar(2),>
,<Style, nchar(2),>
,<ProductSubcategoryID, int,>
,<ProductModelID, int,>
,<SellStartDate, datetime,>
,<SellEndDate, datetime,>
,<DiscontinuedDate, datetime,>
,<rowguid, uniqueidentifier,>
,<ModifiedDate, datetime,>)
GO
[/sql]

So let us say, we have inserted the data as follows. If you feel bored of inserting data manually, you can always tun the SQL script file attached which has the insertion queries. Just run that, you will be all OK. If you don’t know how to generate SQL scripts with data, I strongly recommend you to have a read here

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. Here I gave Dashboard for our Entity data model name. Now you can see a file with edmx extension have been created. If you open that file, you can see as below.

Entity Data Model

Now go back our Web API controller. Please change the code as below.

[csharp]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using MyDashboard.Models;
using Newtonsoft.Json;
namespace MyDashboard.Controllers
{
public class WidgetController : ApiController
{
public DashboardEntities de = new DashboardEntities();
Retriever ret = new Retriever();
public string getWidgetData()
{
var dataList = ret.GetWidgetData(de);
return dataList;
}
}
}
[/csharp]

Here we have created a new model class Retriever and we have added a method GetWidgetData in that class. Now let us see what I have coded in that.

[csharp]
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MyDashboard.Models
{
public class Retriever
{
public string GetWidgetData(DashboardEntities de)
{
try
{
using (de)
{
var resList = (from sales in de.SalesOrderDetails
join prod in de.Products
on sales.ProductID equals prod.ProductID
select new
{
ProductName = prod.Name,
QuantityOrdered = sales.OrderQty
});
var res = resList.GroupBy(d => d.ProductName).Select(g => new
{
name = g.FirstOrDefault().ProductName,
y = g.Sum(s => s.QuantityOrdered)
});
return JsonConvert.SerializeObject(res, Formatting.None, new JsonSerializerSettings()
{
ReferenceLoopHandling = ReferenceLoopHandling.Ignore
});
}
}
catch (Exception)
{
throw new NotImplementedException();
}

}
}
}
[/csharp]

Here we are using LINQ to fetch the data, We uses JOIN in the query to find the Name from the table Products. Once the data is ready, we are just do group by the column ProductName and sum of QuantityOrdered.

[csharp]
var res = resList.GroupBy(d => d.ProductName).Select(g => new
{
name = g.FirstOrDefault().ProductName,
y = g.Sum(s => s.QuantityOrdered)
});
[/csharp]

So the coding part to fetch the data from database is read, now we need to check whether our Web API is ready for action!. To check that, you just need to run the URL http://localhost:1646/Api/Widget. Here Widget is our Web API controller name. I hope you get the data as a result. If you are getting the error Server Error in ‘/’ Application The resource cannot be found, you need to configure your Web API in Global.asax.cs. You got this error just because you created an Empty project with only needed references. So here we need to do his step by our own. No worries, we will do it now. Just change the Global.asax.cs as follows.

[csharp]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Routing;

namespace MyDashboard
{
public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
GlobalConfiguration.Configure(WebApiConfig.Register);//This is for setting the configuration
RouteConfig.RegisterRoutes(RouteTable.Routes);
}
}
}
[/csharp]

Now build your application and run the same URL again, you will get the output as follows.

Web API Output

Now we will go back to our angular JS files and consume this Web API. You need to change the scripts in the app.js, controller.js, factory.js as follows.

app.js

[js]
(function () {
‘use strict’;
angular.module(‘WidgetsApp’, []);
})();
[/js]

controller.js

[js]
(function () {
‘use strict’;
angular
.module(‘WidgetsApp’)
.controller(‘WidgetsController’, function ($scope, factory) {
var res = factory.getData();
var options;
if (res != undefined) {
res.then(function (d) {
var data = JSON.parse(d.data);

}, function (error) {
console.log(‘Oops! Something went wrong while fetching the data.’);
});
}
});
})();

[/js]

Once our service is called, we will get the data in return. We will parse the same and store it in a variable for future use.

[js]
var data = JSON.parse(d.data);
[/js]

factory.js

[js]
(function () {
‘use strict’;
angular
.module(‘WidgetsApp’)
.service(‘factory’, function ($http) {
this.getData = function () {
var url = ‘Api/Widget’;
return $http({
type: ‘get’,
url: url
});
}
});
})();
[/js]

AS you can see we are just calling our Web API Api/Widget with the help of Angular $http.

Now we a view to show our data right? Yes, we need a controller too!.

Create a MVC controller

To create a controller, we need to right click on the controller folder, Add – Controller. I hope you will be given a controller as follows.

[csharp]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MyDashboard.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
}
}
[/csharp]

Here Home is our controller name.

Now we need a view right?

Creating a view

To create a view, just right click on your controller name -> Add View -> Add.

Creating a view

Now in your view add the needed references.

[html]
<script src="~/scripts/jquery-1.10.2.min.js"></script>
<script src="~/scripts/jquery-ui-1.11.4.min.js"></script>
<script src="~/scripts/angular.min.js"></script>
<script src="~/scripts/angular-aria.js"></script>
<script src="~/scripts/angular-route.js"></script>
<script src="~/scripts/Widgets/app.js"></script>
<script src="~/scripts/Widgets/controller.js"></script>
<script src="~/scripts/Widgets/factory.js"></script>
[/html]

Once we add the references, we can call our Angular JS controller as follows.

[html]
<div ng-app="WidgetsApp">
<div ng-controller="WidgetsController">
</div>
</div>
[/html]

Now if you run your application, you can see our Web API call works fine and successfully get the data. Next thing we need to do is creating charts with the data we get.

Create chart widgets with the data

As I said, we are going to to create HighChart chart widgets, we need to add a reference to use that plug in.

[html]
<script src="https://code.highcharts.com/highcharts.js"></script>
[/html]

Now create elements where we can load our chart.

[html]
<div ng-app="WidgetsApp">
<div ng-controller="WidgetsController">
<div id="widgetPie" class="widget">Placeholder for chart</div>
<div id="widgetspline" class="widget">Placeholder for chart</div>
<div id="widgetBar" class="widget">Placeholder for chart</div>
<div id="widgetLine" class="widget">Placeholder for chart</div>
<div id="widgetScatter" class="widget">Placeholder for chart</div>
<div id="widgetColumn" class="widget">Placeholder for chart</div>
</div>
</div>
[/html]

You can style your elements as follows if you want, but this is optional.

[css]
<style>
.widget {
width: 30%;
border: 1px solid #ccc;
padding: 10px;
margin: 5px;
border-radius: 3px;
transition: none;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
cursor: move;
display: inline-block;
float:left;
}
</style>
[/css]

Go back to our Angular JS controller and add the below codes right after we get the data from server.

Pie Chart

[js]
var data = JSON.parse(d.data);
var categories = [];
for (var i = 0; i < data.length; i++) {
categories.push(data[i].name)
}
options = new Highcharts.chart(‘widgetPie’, {
credits: {
enabled: false
},
chart: {
type: ‘pie’,
renderTo: ”
},
title: {
text: ‘Product VS Quantity – Pie Chart’
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: ‘pointer’,
dataLabels: {
enabled: false,
format: ‘<b>{point.name}</b>: {point.y:,.0f}’
}
}
},
series: [{
name:’Quantity’,
data: data
}]
});
[/js]

Now run your application, you can see a pie chart with the data given.

Pie Chart In MVC With Angular JS And Web API

Column Chart

[js]
options = new Highcharts.chart(‘widgetColumn’, {
credits: {
enabled: false
},
chart: {
type: ‘column’,
renderTo: ”
},
title: {
text: ‘Product VS Quantity – Column Chart’
},
series: [{
name: ‘Quantity’,
data: data
}]
});
[/js]

Now run your application, you can see a column chart with the data given.

Column Chart In MVC With Angular JS And Web API

Bar Chart

[js]
options = new Highcharts.chart(‘widgetBar’, {
credits: {
enabled: false
},
chart: {
type: ‘bar’,
renderTo: ”
},
title: {
text: ‘Product VS Quantity – Bar Chart’
},
series: [{
name: ‘Quantity’,
data: data
}]
});
[/js]

Now run your application, you can see a Bar chart with the data given.

Bar Chart In MVC With Angular JS And Web API

Line Chart

[js]
options = new Highcharts.chart(‘widgetLine’, {
credits: {
enabled: false
},
chart: {
type: ‘line’,
renderTo: ”
},
title: {
text: ‘Product VS Quantity – Line Chart’
},
series: [{
name: ‘Quantity’,
data: data
}]
});
[/js]

Now run your application, you can see a Line chart with the data given.

Line Chart In MVC With Angular JS And Web API

Spline Chart

[js]
options = new Highcharts.chart(‘widgetspline’, {
credits: {
enabled: false
},
chart: {
type: ‘spline’,
renderTo: ”
},
title: {
text: ‘Product VS Quantity – Spline Chart’
},
series: [{
name: ‘Quantity’,
data: data
}]
});
[/js]

Now run your application, you can see a Spline chart with the data given.

Spline Chart In MVC With Angular JS And Web API

Scatter Chart

[js]
options = new Highcharts.chart(‘widgetScatter’, {
credits: {
enabled: false
},
chart: {
type: ‘scatter’,
renderTo: ”
},
title: {
text: ‘Product VS Quantity – Scatter Chart’
},
series: [{
name: ‘Quantity’,
data: data
}]
});
[/js]

Now run your application, you can see a Scatter chart with the data given.

Scatter Chart In MVC With Angular JS And Web API

Now this is how complete code for our controller.js file looks like.

[js]
(function () {
‘use strict’;
angular
.module(‘WidgetsApp’)
.controller(‘WidgetsController’, function ($scope, factory) {
var res = factory.getData();
var options;
if (res != undefined) {
res.then(function (d) {
var data = JSON.parse(d.data);
var categories = [];
for (var i = 0; i < data.length; i++) {
categories.push(data[i].name)
}
options = new Highcharts.chart(‘widgetPie’, {
credits: {
enabled: false
},
chart: {
type: ‘pie’,
renderTo: ”
},
title: {
text: ‘Product VS Quantity – Pie Chart’
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: ‘pointer’,
dataLabels: {
enabled: false,
format: ‘<b>{point.name}</b>: {point.y:,.0f}’
}
}
},
series: [{
name:’Quantity’,
data: data
}]
});
options = new Highcharts.chart(‘widgetColumn’, {
credits: {
enabled: false
},
chart: {
type: ‘column’,
renderTo: ”
},
title: {
text: ‘Product VS Quantity – Column Chart’
},
series: [{
name: ‘Quantity’,
data: data
}]
});
options = new Highcharts.chart(‘widgetBar’, {
credits: {
enabled: false
},
chart: {
type: ‘bar’,
renderTo: ”
},
title: {
text: ‘Product VS Quantity – Bar Chart’
},
series: [{
name: ‘Quantity’,
data: data
}]
});
options = new Highcharts.chart(‘widgetLine’, {
credits: {
enabled: false
},
chart: {
type: ‘line’,
renderTo: ”
},
title: {
text: ‘Product VS Quantity – Line Chart’
},
series: [{
name: ‘Quantity’,
data: data
}]
});
options = new Highcharts.chart(‘widgetspline’, {
credits: {
enabled: false
},
chart: {
type: ‘spline’,
renderTo: ”
},
title: {
text: ‘Product VS Quantity – Spline Chart’
},
series: [{
name: ‘Quantity’,
data: data
}]
});
options = new Highcharts.chart(‘widgetScatter’, {
credits: {
enabled: false
},
chart: {
type: ‘scatter’,
renderTo: ”
},
title: {
text: ‘Product VS Quantity – Scatter Chart’
},
series: [{
name: ‘Quantity’,
data: data
}]
});
}, function (error) {
console.log(‘Oops! Something went wrong while fetching the data.’);
});
}
});
})();
[/js]

If you have configured all the chart types, we can see the output now 🙂

We have done everything!. That’s fantastic right? 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

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