Thanks for attending workshop on AngularJS at Infragistics Day

You can view photos from of Infragistics Day here

I will start with thanking Jaosn Beres and Infragistics for letting me do it.

Can you see any one tired in below photo? This was the group photo taken after marathon 8 hrs coding done by 140+ developers at Infragistics Day. Yes these smiling faces say a lot about the Infragistics Day.


It was an overwhelming response for first ever Infragistics Day. We hosted Infragistics day with the help of in their Noida office. There were more than 450 developers registered to learn – “AngularJS step by step” at Infragistics Day. Due to space constraint, we could only accommodate 143 developers in the workshop. Developers were asked to bring their laptop since it was all about “each developer is coding “at Infragistics Day.


We started the day with setting of development environment, understanding basics of SPA and further proceeded to roughly code on the following topics,

  • $scope object
  • Controllers
  • Service
  • Factory
  • Forms
  • Routings
  • Calling web API and REST services
  • Performing CRUD operations
  • Introduction of Directives


There were developers from the esteem companies like Accenture, HCL, NIIT, Magic Software etc. attending the workshop. We were surprised to see that developers travelled from far cities like Ahmedabad, Mumbai, and Chandigarh to attend the Infragistics Day. For example Jinal Shah and Dhriti Shah came to attend from the Ahmedabad.


Developers got a chance to interact with Infragistics India director Rohit Gaur as well. Rohit gave a brief introduction about Infragistics. He also invited interns starting next January.


Developers were requested to tweet about their experience with hashtag #InfragisticsDay or #Infragistics. It turned out to be good buzz on social media about the day. At the end of the day some of the developers got @csharpcorner and @infragistics tshirts and bags also.


Some of the tweets and Facebook updates about the event was like below:






Last but not least, a huge thanks to CSharpCorner team for great help. Without them it was not possible.


Once again thank you so much everyone for joining the Infragistics Day. We are planning to bring Infragistics day to your city soon. And yes thanks Jaosn Beres and Infragistics for letting me do it.


You can view photos from of Infragistics Day here

Thanks everyone !

How to Enable CORS in the ASP.NET Web API

Have you ever come across the following error:

Cross-origin Request Blocked. The same origin policy disallows reading the resource”.

Us to! It turns out, we get this error due to lack of CORS support while sharing resources. When we try to consume the Web API from origin A in a web application residing in origin B, we get the above error. To solve this error, we need to have a good understanding of CORS.

Although the purpose of this article is to learn the practical implementation of enabling CORS in the ASP.NET Web API, we will give a fair amount of weight to the theoretical concept also. CORS stands for Cross-Origin Resource-Sharing. For various security reasons user agents cannot share resources if they are not from the same origin. Various examples of user agents are browsers, HTML documents, scripts, and XMLHttpRequest.

Let us try to understand the concepts of Cross-Origin and Same-Origin. The concept of Origin was described by RF 6454. Two URLs would be called of the same origin, if they have:

  1. Scheme (http)
  2. Host (server)
  3. Port (8888)

The Origin consists of the Scheme, Host, and the Port number.


If two resources have the same combination of scheme, host, and port then they are considered of the same origin, else of the cross origin. Let us consider the following two URI and are not of the same origin since their host and port are not the same. For the security reason resource sharing between these two URL may be restricted. Let us try to understand CORS with the example of XMLHttpRequest. We use the XMLHttpRequest to perform the HTTP operation on the server from the HTML document. There are two URLs used in the XMLHttpRequest:

  1. Requested URL or URL of the server
  2. URL of the document which initiated the request

If both URLs have the same scheme, host, and port then XMLHttpRequest object will perform the operation else it will block the HTTP operation for security reasons.

Both the server and the browser must have the support of the CORS. By default all recent browsers have CORS support, but as an API developer we need to enable support of CORS in the Web API.


Here we have created a very simple ASP.NET Web API which returns an array of classes as shown in the image below:

As you can see that Web API is running on port 8458. Next we are trying to get the data in a JavaScript application which is running on the URI with the port 5901:

Read the full article on the Infragistics blog

How to work with the Ignite UI Chart in an AngularJS application

In this post we will learn how to work with the Ignite UI chart in an AngularJS application. Although I will use the ASP.NET Web API to pull data from the database, you can use REST service or a Web API created on any stack with the Ignite UI charts in your AngularJS application. This article is divided in two sections:

  1. Section 1 : creating ASP.NET Web API using Code First approach
  2. Section 2 : using Ignite UI in AngularJS application

If you already have or know how to create the Web API REST Service (Note: from here on out in this post, we’ll use the term “Web API” to refer both to REST Service and Web API), you can jump to section 2 of this article. On the other hand if you need help in how to create ASP.NET Web API start from the section 1. Here’s a high level flow of diagram of an application::


Read full article on the Infragistics blog

Validating User Input on a Form in Angular JS

I have often seen entry level developers struggling with user input validation in AngularJS single page applications. In this post, I will give a quick but useful introduction of validations in AngularJS; consider this post as a base learning document from which you can do further learning.

Let’s start with an example as shown in the image below. You have a registration form with three fields with the following restrictions.

  1. Name : Required
  2. Email : Required and type Email
  3. Password : Required , type password and minimum length 6

We want to validate the rules mentioned above at the client side. There are two ways client side validation can be done in an AngularJS based single page application:

  1. Using the HTML5 validations
  2. Using the AngularJS validation directives
  3. A Combination of both

HTML5 validation

Here we’ve created the Add user form shown above using the mark up listed below:


Read full article on the Infragistics blog

Creating an ASP.NET Web API using the Entity Framework Code First approach and the Repository pattern

In this article, we will learn how to create an ASP.NET Web API using the Repository pattern and the Entity Framework code first approach. Essentially you’ll learn how to:

  1. Create a core project which will contain entity and the repository interface;
  2. Create an Infrastructure project which will contain database operations code using the Entity Framework code first approach;
  3. Create a Web API to perform CRUD operations on the entity;
  4. Consume the Web API in a jQuery application and render the data in the Ignite UI Chart.

What is a Repository pattern?

Let us first understand why we need a Repository pattern. If you do not follow a Repository pattern and directly use the data then the following problems may arise-

  • Duplicate code
  • Difficulty implementing any data related logic or policies such that caching
  • Difficulty in unit testing the business logic without having the data access layer
  • Tightly coupled business logic and database access logic

By implementing a repository pattern we can avoid the above problems and get the following advantages:

Business logic can be unit tested without data access logic

  • Database access code can be reused
  • Database access code is centrally managed so easy to implement any database access policies such that caching
  • Easy to implement domain logics
  • Domain entities or business entities are strongly typed with the annotations.

Now that we’ve listed how great they are, let’s go ahead and start implanting a repository pattern in the ASP.NET Web API.

Create the Core project

In the core project you should keep the entities and the repository interfaces. In this example we are going to work with the City entity. So let us create a class City as shown in the listing below:

Read the full article on the Infragistics blog