Web API – Sibeesh Passion

Working With Test Client In Asp Net Web API Help Page

SibeeshVenu — Tue, 31 May 2016 00:00:33 +0000

[toc]

Introduction

In this article we are going to see how we test our API with the help of a package called WebApiTestClient. As you all know, if you create a sample API project you will get a folder HelpPage in Areas. This is for adding the XML description to each controller and actions we use in our API. If you document it well, any one can understand your API, so that you don’t need to explain what your API will do and what would be the output. If you are new to HelpPage implementation in API, please see here: API help page controller action description in Web API. Here I am going to create a Web API with the help page descriptions in Visual Studio 2015. And once after the project is ready I will install the WebApiTestClient package to my solution. I hope you will like this.

Please be noted that this package is not officially released by Microsoft. This is a prototype created by Yao – MSFT

Download the source code

You can always download the source code here: API Test Client

Background

For the past few months, I had been working with API projects. Recently I was asked to create an application to test the API I created so that the testing team can test the API easily. Yes I agree that we have tools like Fiddler and Post Man for the same. Still we thought to create our own. As I started my development, I came to know about the package WebApiTestClient which does what we wanted. Finally we decided to stop developing the application and used this wonderful package. Here I am going to show you how can we use this.

Prerequisites

Visual Studio With Web API Installed

Things we are going to do

The following are the tasks we are going to do.

Setting up database
Creating an Entity Framework
Creating API controller with the Model Created
Installing WebApiTestClient
Configuring WebApiTestClient
Testing WebApiTestClient

Setting up database

Here I am going to create a database which I created for my demo purposes, you can always create this database by running the queries mentioned here.

Create database

[sql]
USE [master]
GO

/****** Object: Database [TrialsDB] Script Date: 5/12/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]

Create application

Our database is ready, now create a Web API application in visual studio and then entity with the above mentioned database.

Creating 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 and create a API controller with the entity created. If you do so, The CRUD actions will be created automatically for you. You may need to edit those actions according to your needs.

Web API 2 Controller with actions, using Entity Framework

Select the Model Class, DBContext then name your controller and click OK. I hope a controller with the CRUD actions. Now we can modify that as follows.

[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 ControllerActionDescriptions.Models;

namespace ControllerActionDescriptions.Controllers
{
public class ProductsController : ApiController
{
private TrialsDBEntities db = new TrialsDBEntities();
#region GetProducts
///

/// Get all the products available
/// GET: api/Products
///

public IQueryable GetProducts()
{
return db.Products;
}
#endregion

#region GetProductWithParameter
///

/// Get a single product by id
/// 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);
}
#endregion
// 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]

Installing WebApiTestClient

To install the package, please go to your Package Manage Console from NuGet Package Manager and run the following command.

[csharp]
Install-Package WebApiTestClient
[/csharp]

You can always get the details about the package here.

Once you install the package, you can see some files are added to your Script and Area folder as preceding.

Script and Area Folder

Configuring WebApiTestClient

To configure the WebApiTestClient, please go to the folder Areas->Views->Help and then click on Api.cshtml

Api Cshtml

This is the view shown when you click on each API in your help page. Now add the preceding code block to that view.

[html]
@Html.DisplayForModel(“TestClientDialogs”)
@section Scripts
{

@Html.DisplayForModel(“TestClientReferences”)
}
[/html]

Code Block

Testing WebApiTestClient

Now run your API application and go to the help page for any controller action, you can see a button called Test API on the bottom. If you click on that you will get a pop where you can test your API action.

Test API Client Output

Now if you send your request by clicking the send button, you will get an output as follows.

Test API Client Output With Response

You can always give id parameter as follows.

Test Client With Parameters

You can also give content-length and content-type in your post request as follows.

Test Client With Post

Test Client With PUT Request

References

Author has already posted the source code in GitHub, please check here.

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

Web API With HttpClient Or Consume Web API From Console Application

SibeeshVenu — Mon, 28 Mar 2016 00:00:37 +0000

In this article, we are going to learn how we can call Web API using HttpClient. Normally we call a Web API either from a jQuery Ajax or from Angular JS right? Recently I came across a need of calling our Web API from the server-side itself. Here I am going to use two Visual Studio applications. One is our normal Web API application in which I have a Web API controller and actions, another one is a console application where I consume my Web API. Sounds good? I am using Visual Studio 2015. You can always get the tips/tricks/blogs about these mentioned technologies from the links given below.

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.

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

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.

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.

Web API 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.

Web_API_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

Console Application

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

Add References

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

Web_API_Consumer_Get_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’.

Web_API_Consumer_Put_Output

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.

Web_API_Consumer_Delete_Output

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?

Web_API_Consumer_Post_Output

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?

Kindest Regards
Sibeesh Venu

Caching In Web API

SibeeshVenu — Thu, 24 Mar 2016 00:00:39 +0000

In this article we will are going to learn how we can use caching in Web API. Normally caching is the process of storing data somewhere for the future requests, in our case we can avoid the unwanted hit to database to get the data if we cache the data somewhere, this way we can make sure that the data is served in a faster manner. Here we are going to see the caching in our Web API controller. If you are new to caching, I have written an article about caching in MVC, please read it here: Caching In MVC. We will explain caching with the help of System.Runtime.Caching which is given by Microsoft. This DLL is not available in the default references, you may need to add that separately. I will show you how. I am creating this application in Visual Studio 2015. You can always get the tips/tricks/blogs about these mentioned technologies from the links given below.

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.

Caching In Web API

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
(
,)
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.

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

// GET: api/tblTags
public IQueryable 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 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 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?

Kindest Regards
Sibeesh Venu

Angular JS AutoComplete In MVC With Web API

SibeeshVenu — Thu, 24 Mar 2016 00:00:33 +0000

In this article we will learn how we can create Angular JS autoComplete text box with the data from SQL Server database. We use MVC architecture with Web API and Angular JS to fetch the data and do all the manipulations. I am creating this application in Visual Studio 2015. You can always get the tips/tricks/blogs about these mentioned technologies from the links given below.

AngularJS Tips, Tricks, Blogs

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.

Angular JS Autocomplete In MVC

SQL Scripts With Insert Queries

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.

Angular JS

jQuery

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

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
(
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,)
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

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.

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

// GET: api/Products
public IQueryable 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 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]

[/html]

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

[html]

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

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

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?

Kindest Regards
Sibeesh Venu

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

SibeeshVenu — Thu, 17 Mar 2016 05:33:35 +0000

In this article we will learn how we can create some client side chart widgets with the data from SQL Server database. We use MVC architecture with Web API and Angular JS to fetch the data and do all the manipulations. I am creating this application in Visual Studio 2015. In this project we covers topic of how to use HighChart with Angular JS. You can always get the tips/tricks/blogs about these mentioned technologies from the links given below.

AngularJS Tips, Tricks, Blogs

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.

Widgets With Server Side Data

SQL Scripts With Insert Queries

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.

Pie Chart

Spline Chart

Bar Chart

Line Chart

Scatter Chart

Column Chart

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.

Angular JS

jQuery

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.

SalesOrderDetail

Product

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

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
(
,
,
,
,
,
,
,
,)
GO
[/sql]

and the following query can be used for the table Product

[sql]
USE [TrialsDB]
GO

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

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

}, 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]

[/html]

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

[html]

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

[/html]

Now create elements where we can load our chart.

[html]

[/html]

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

[css]

[/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: ‘{point.name}: {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: ‘{point.name}: {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

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Fix To No Access-Control-Allow-Origin header is present Or Working With Cross Origin Request In Asp Net Web API

SibeeshVenu — Fri, 11 Mar 2016 09:28:29 +0000

[toc]

Introduction

In this article we are going to few possible fixes we can apply when we get an error “Response to the preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:58018’ is therefore not allowed access”. We get this error when we are trying to get some data from another origin may be via an AJAX call. In this post, we will discuss the solutions for this error in detail and we will also discuss Cross Origin Requests. Here I am going to use Visual Studio 2015, Web API 2. I hope you will like this.

Background

I hosted my Web API in a server, and what that API does is, it will just return the data in JSON format. But when I try to consume this Web API via an Ajax call, I was getting the error “No ‘Access-Control-Allow-Origin’ header is present on the requested resource”. I solved the same issues in different ways. Here I am going to share those.

Using the code

I assume that you have created a Web API and hosted it in your server. If you are new to Web API, you can always get some information from here Articles Related To Web API .

We all will have some situations where we need to fetch some data from another domain or another site, right? If it is from the same site, you won’t be facing any issues at all. Like you are calling an Ajax call from the page www.sibeeshpassion.com/Receiver.html to www.sibeeshpassion.com/Sender.html to get the data, here the origin is same. and therefore you will get the data. What happens is when the sender and receiver are not in the same origin. Like you need to get the data from www.Microsoft.com by an Ajax call in www.sibeeshpassion.com/Receiver.html. The browser will not allow you to get the sensitive data from other domain, for the security purpose your browser will return you “No ‘Access-Control-Allow-Origin'”. To overcome this, we have something called Cross-Origin Resource Sharing (CORS). Basically, the process of allowing other sites to call your Web API is called CORS. According to W3 Org CORS is a standard which tells the server to allow the calls from other origins given. It is much secured than using JSONP(Previously we had been using JSON for getting the data from other domains.).

Fix To No Access-Control-Allow-Origin header is present

We can fix this issue in two ways,

By using Microsoft.AspNet.WebApi.Cors
By adding header information in Web.config

We will explain both now.

By using Microsoft.AspNet.WebApi.Cors

To work with this fix, you must include the package By using Microsoft.AspNet.WebApi.Cors from Manage Nuget window.

CORS_In_Manage_NuGet_Package

Now got to App_Start folder from your solution. Then click on the file WebApiConfig.cs, this is the file where we set the configuration for our Web API.

Web_API_Config_Class_File

Then you can add the preceding codes in the static function Register.

[csharp]
var cors = new EnableCorsAttribute(“*”, “*”, “*”);
config.EnableCors(cors);
[/csharp]

IF you do this, the CORS will be applied globally for all the Web API controller you have. This is the easiest way of doing it. Now if you want to see the metadata of EnableCorsAttribute, you can see find it below.

[csharp]
// Summary:
// Initializes a new instance of the System.Web.Http.Cors.EnableCorsAttribute class.
//
// Parameters:
// origins:
// Comma-separated list of origins that are allowed to access the resource. Use
// “*” to allow all.
//
// headers:
// Comma-separated list of headers that are supported by the resource. Use “*” to
// allow all. Use null or empty string to allow none.
//
// methods:
// Comma-separated list of methods that are supported by the resource. Use “*” to
// allow all. Use null or empty string to allow none.
public EnableCorsAttribute(string origins, string headers, string methods);
[/csharp]

As it is mentioned, it accepts the parameters origins, headers, methods. Here we pass * to all the three parameters to make everything to be allowable.

You can also try the same as below in the Register function. Here we are going to apply CORS for particular controller, which means it will be applied for all the actions in the controller. Before that make sure you have added the preceding code in your WebApiConfig.cs file

[csharp]
config.EnableCors();
[/csharp]

And in the API controller you need to set the origins,headers,methods as preceding.

[csharp]
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using Newtonsoft.Json;
using Newtonsoft.Json.Converters;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Runtime.Serialization;
using System.Text;
using System.Web;
using System.Web.Http.Cors;

namespace APIServiceApplication.Controllers
{

[EnableCors(origins: “*”, headers: “*”, methods: “*”)]
public class DefaultController : ApiController
{
}
}

[/csharp]

Make sure that you have added namespace using System.Web.Http.Cors; to use CORS. You can always disable CORS in an action by using [DisableCors].

[csharp]
namespace APIServiceApplication.Controllers
{

[EnableCors(origins: “*”, headers: “*”, methods: “*”)]
public class DefaultController : ApiController
{
[DisableCors]
public string XMLData(string id)
{
return “Your requested product” + id;
}
}
}
[/csharp]

Here we have disabled CORS for the action XMLData. And again if you need to apply CORS only in a single action, you can do that as follows.

[csharp]
namespace APIServiceApplication.Controllers
{
public class DefaultController : ApiController
{
[EnableCors(origins: “*”, headers: “*”, methods: “*”)]
public string XMLData(string id)
{
return “Your requested product” + id;
}
}
}
[/csharp]

I hope you are aware of how to enable CORS now.

By adding header informations in Web.config

Another fix we can do is that add some tags in our Web.config file.

[html]

[/html]

As you can see we have added keys with value for the listed items.

Access-Control-Allow-Origin (For Origin)
Access-Control-Allow-Headers (For Headers)
Access-Control-Allow-Methods (For Methods)

Now if you go to your server and check, you can see that all the things are configured perfectly. I have configured my API in my server IIS, so I am going to see my Response Header settings in IIS.

Go to the command window and type “inetmgr” and click OK, your IIS wilbe openeded shortly, now find your Web API which you have already configured under Default Web Site. Before doing this, please make sure that you have configured IIS in your windows. If you don’t know how to configure, I strongly recommend you to read Configure IIS in Windows .

Configured_Web_API_in_IIS

Go to Features View and double click on HTTP Response Headers under IIS category.

HTTP_Response_Headers_In_IIS

You can see all the settings has been configured there.

HTTP_Response_Headers_Available

CORS in Asp.Net Core application

Though the mechanism is the same, the way you do things in Asp.Net core application. To set the CORS in asp.net application, you should add the preceding code in your ConfigureServices method in Startup.cs file before the services.AddMvc(); call.

services.AddCors(cors => cors.AddPolicy("CorsPolicy", builder => {
 builder.AllowAnyHeader()
  .AllowAnyMethod()
  .AllowAnyOrigin();
}));

You should also use this policy you have created in the Configure method in Startup.cs before the app.UseMvc(); call.

app.UseCors("CorsPolicy");

That’s all, now if you run your application, you will be able to fetch the data from your Web API.

Conclusion

Did I miss anything that you may think which is needed? Have you ever faced this issue? Did you try Web API yet? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Custom Deferred Grid Using MVC Web API And Angular JS

SibeeshVenu — Mon, 29 Feb 2016 00:00:41 +0000

[toc]

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:

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”;
}

Index

[/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> rows =
new List>();
Dictionary row = null;
foreach (DataRow dr in dt.Rows)
{
row = new Dictionary();
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

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

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:
— Create date:
— Description:
— =============================================
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”;
}

Index

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 🙂

SlNo: {{item.SlNo}}, SalesOrderID: {{item.SalesOrderID}}

SalesOrderDetailID: {{item.SalesOrderDetailID}}, CarrierTrackingNumber: {{item.CarrierTrackingNumber}}

OrderQty: {{item.OrderQty}}, ProductID: {{item.ProductID}}

UnitPrice: {{item.UnitPrice}}

[/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.

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

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

TagIt Control With Data From Database Using Angular JS In MVC Web API

SibeeshVenu — Thu, 25 Feb 2016 00:00:46 +0000

In this article we will learn how to load the tags from database in MVC Web API using Angular JS. Here we are going to use a pretty control called tagIt which does the tag part easier with a lot of configuration options. This article use a normal MVC application which includes the Web API control in it, in addition to it, we uses Angular JS for our client side operations. You can always get the tips/tricks/blogs about these mentioned technologies from the links given below.

AngularJS Tips, Tricks, Blogs

MVC Tips, Tricks, Blogs

Web API Tips, Tricks, Blogs

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.

Angular JS

TagIt Plugin

jQuery

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")

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

Nothing found!

[/html]

You can give a style as follows if you want.

[css]

[/css]

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

[html]

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

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

autocomplelte

autocomplete is a property which enables the auto complete option, when it is true user will get the items listed accordingly for each key press

beforeTagAdded

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

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

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
(
,)
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

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

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

jQuery Datatable With Server Side Data

SibeeshVenu — Thu, 25 Feb 2016 00:00:43 +0000

Introduction

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

Download the source code

You can always download the source code here:

Datatable With Server-Side Data

Create a MVC application

Datatables Package
jQuery

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

Using the code

Now let us add the needed references.

Include the references in your _Layout.cshtml

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

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

Add a normal MVC controller

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

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

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

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

Create a database

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

Now we will create a table 🙂

Create table in database

Below is the query to create table in database.

Insert data to table

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

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

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

Create Entity Data Model

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

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

using jQuery_Datatable_With_Server_Side_Data.Models;

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

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

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

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

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

Output

jQuery Datatable With Server Side Data

jQuery Datatable With Server Side Data Search

Have a happy coding.

Conclusion

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

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Web API With Angular JS

SibeeshVenu — Thu, 11 Feb 2016 00:00:23 +0000

[toc]

Introduction

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

Download the source code

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

Background

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

What is a Web API?

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

Why Web API

Image Courtesy : blogs.msdn.com

Why Web API

Image Courtesy : forums.asp.net

Using the code

Creating project

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

Web API Template

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

Web API With Angular JS Solution Explorer

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

Installing Angular JS

Install Angular JS

Now we will create a control in our project.

CRUD_in_MVC_Using_Web_API_Adding_Control

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

Create Database

Below is the query to create a database.

[sql]
USE [master]
GO

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

ALTER DATABASE [sibeeshpassion] SET COMPATIBILITY_LEVEL = 120
GO

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

ALTER DATABASE [sibeeshpassion] SET ANSI_NULL_DEFAULT OFF
GO

ALTER DATABASE [sibeeshpassion] SET ANSI_NULLS OFF
GO

ALTER DATABASE [sibeeshpassion] SET ANSI_PADDING OFF
GO

ALTER DATABASE [sibeeshpassion] SET ANSI_WARNINGS OFF
GO

ALTER DATABASE [sibeeshpassion] SET ARITHABORT OFF
GO

ALTER DATABASE [sibeeshpassion] SET AUTO_CLOSE OFF
GO

ALTER DATABASE [sibeeshpassion] SET AUTO_SHRINK OFF
GO

ALTER DATABASE [sibeeshpassion] SET AUTO_UPDATE_STATISTICS ON
GO

ALTER DATABASE [sibeeshpassion] SET CURSOR_CLOSE_ON_COMMIT OFF
GO

ALTER DATABASE [sibeeshpassion] SET CURSOR_DEFAULT GLOBAL
GO

ALTER DATABASE [sibeeshpassion] SET CONCAT_NULL_YIELDS_NULL OFF
GO

ALTER DATABASE [sibeeshpassion] SET NUMERIC_ROUNDABORT OFF
GO

ALTER DATABASE [sibeeshpassion] SET QUOTED_IDENTIFIER OFF
GO

ALTER DATABASE [sibeeshpassion] SET RECURSIVE_TRIGGERS OFF
GO

ALTER DATABASE [sibeeshpassion] SET DISABLE_BROKER
GO

ALTER DATABASE [sibeeshpassion] SET AUTO_UPDATE_STATISTICS_ASYNC OFF
GO

ALTER DATABASE [sibeeshpassion] SET DATE_CORRELATION_OPTIMIZATION OFF
GO

ALTER DATABASE [sibeeshpassion] SET TRUSTWORTHY OFF
GO

ALTER DATABASE [sibeeshpassion] SET ALLOW_SNAPSHOT_ISOLATION OFF
GO

ALTER DATABASE [sibeeshpassion] SET PARAMETERIZATION SIMPLE
GO

ALTER DATABASE [sibeeshpassion] SET READ_COMMITTED_SNAPSHOT OFF
GO

ALTER DATABASE [sibeeshpassion] SET HONOR_BROKER_PRIORITY OFF
GO

ALTER DATABASE [sibeeshpassion] SET RECOVERY SIMPLE
GO

ALTER DATABASE [sibeeshpassion] SET MULTI_USER
GO

ALTER DATABASE [sibeeshpassion] SET PAGE_VERIFY CHECKSUM
GO

ALTER DATABASE [sibeeshpassion] SET DB_CHAINING OFF
GO

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

ALTER DATABASE [sibeeshpassion] SET TARGET_RECOVERY_TIME = 0 SECONDS
GO

ALTER DATABASE [sibeeshpassion] SET DELAYED_DURABILITY = DISABLED
GO

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

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

Create table in database

Below is the query to create table in database.

[sql]
USE [sibeeshpassion]
GO

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

SET QUOTED_IDENTIFIER ON
GO

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

GO
[/sql]

Insert data to table

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

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

Creating entity model

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

Creating Entity Model 1

Creating Entity Model 2

Creating Entity Model 3

Creating Entity Model 4

Creating Entity Model 5

Creating Entity Model 6

Now it is time to create a API controller.

Select Empty API Controller as template.

Web API Contoller With Actions

Read Operation

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

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

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

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

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

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

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

Controller VS Empty API Controller

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

Find out more: Controller VS API Controller

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

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

Angular JS Operation FIles

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

Open the file Module.js and create an app.

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

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

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

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

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

Get Operation In API Controller

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

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

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

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

Updating View

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

[html]

@{
ViewBag.Title = “Welcome”;
}

Welcome to Sibeesh Passion’s Email List

ID	Email ID	Subscribed Date
{{sub.SubscriberID}}	{{sub.MailID}}	{{sub.SubscribedDate}}

[/html]

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

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

Wep API Get All Record

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

Create Operation

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

[html]

Sbscribe here

[/html]

This will give you an output as follows.

View Design For Create

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

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

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

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

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

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

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

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

Update Operation

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

[html]

ID	Email ID ( Double click to update)	Subscribed Date
{{sub.SubscriberID}}	{{sub.MailID}}	{{sub.SubscribedDate}}

Sbscribe here

[/html]

The below is the main change we did.

[html]
{{sub.MailID}}
[/html]

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

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

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

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

Add a function in Controller.js

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

Add a relative function in Service.js

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

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

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

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

Delete Operation

Make some changes in the view as follows.

[html]

{{sub.SubscriberID}}
{{sub.MailID}}
{{sub.SubscribedDate}}

[/html]

Now add the new function in Controller.js

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

Create a service in Service.js now.

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

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

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

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

Web API With Angular JS

Have a happy coding.

Conclusion

Your turn. What do you think?

Kindest Regards
Sibeesh Venu