A Step-by-Step Guide to Working with the ASP.NET Web API and AngularJS

Read full article on the Infragistics blog

In this post we will learn to work with AngularJS and ASP.NET Web API in a step by step manner. I’ll assume that you are already familiar with some of the basic terms like what AngularJS and a Web API is, and we’ll work in a hands-on way, fetching data from the database and displaying that in an AngularJS application using the following:

  • Database in the SQL Server
  • Data model using Entity Framework database-first approach
  • The ASP.NET Web API
  • Using the Web API in an AngularJS application

Essentially, data resides in the SQL Server database and is exposed as JSON data using the ASP.NET Web API. We then consume the JSON data from the ASP.NET Web API in the AngularJS application.

Setting up the Database

Here we have a table named city with the following columns:

The table is populated with the following data:

This table is inside the SQL Server, and we’ll connect to SQL Server using the Entity Framework database first approach.

ASP.NET Web API

Let us go ahead and create a Web API project in Visual Studio. To do this, select File->New Project-> Web Application>Web API as shown in the image below.

On clicking Ok, we can verify in the solution explorer that a web API project has been created.

Creating the Data Model

Next, to create the data model we’re going to follow the Entity Framework database first approach. To do this, right click on the Model folder in the project and select Add new item.

Read full article on the Infragistics blog

Free Infragistics Live Webinar – Learning SOLID Principles Using C#

 

Reserve your seat here

As part of the webinar series in the India time zone, Infragistics is hosting another webinar on the –Learning SOLILD principles using C# . I am excited to share that I will be hosting this webinar along with my colleague Anand.

Webinar is on 19th June from 3 PM to 4 PM IST.

Register for the webinar here

About the Topic

SOLID principles are the five basic principles of object-oriented programming and design. Systems created using these principles are easy to extend and maintain over time, making them a wise choice. But where do you begin to learn about them?

In this upcoming webinar, we’ll explore all of the basic SOLID principles, including:

  • The Single responsibility principle;
  • The Open Closed principle;
  • The Liskov substitution principle;
  • The Interface segregation principle; and
  • The Dependency Inversion

Additionally, you’ll learn how to create a system by adhering to the SOLID principles we explore, using C# as a language to understand the principles.

Register for the webinar here. I am excited to see you in the webinar.

Teaching AngularJS and Ignite UI in Chandigarh- Join me on Saturday 13th June for Free

Learn more about Ignite UI here

image

I am excited to share that,

For free I am going to teach you AngularJS and Ignite UI with the help of C-Sharpcorner chapters in the beautiful city Chandigarh. You can attend the class for free.

To attend register here

It is scheduled to happen at – Kisan Bhawan Sector 35A, Chandigarh, 160036

In my talk I will cover the following topics,

Ignite UI

  • What is Ignite UI
  • Why you need Ignite UI
  • Exploring different controls
  • Exploring Ignite UI with HTML5 and jQuery
  • Exploring Ignite UI with MVC

AngularJS

  • Setting up Visual Studio for AngularJS
  • Understanding $scope, $rootScope, and scope hierarchy
  • Controller and nested controllers
  • Services
  • Routing in AngularJS
  • Custom Directives with isolated scopes
  • IgniteUI and AngularJS

I am excited to see you in Chandigarh. Happy Coding.

Don’t Create REST APIs with WCF REST Services…use Web API Instead

There was time when developers used to create Web Service using the WCF. Their argument was using basicHttpBinding makes a WCF service as a Web Service. Yes that ASMX based web service. I never agree to this argument.

image

Clearly WCF was an evolvement over ASMX Web Service. Now let us talk about purpose of this article, that saga of Web API and REST Service. To start with let us understand the background.

REST SERVICE

image

A typical REST Service in WCF would look like as follows:

clip_image002

Point to be noticed here is that while creating the service we are defining the resource type. Since in above service we want to work with both JSON and XML message format, we are creating two services for the same.

EndPoint for REST Service can be created using the factor as shown in the snippet below,

clip_image004

This is the simplest WCF REST Service one could create. We can have different HTTP operations on the same URL. We can perform HTTP GET, POST, PUT, DELETE on the same resource URL in the WCF REST service. However while creating the service, we need to take care of the message format. WCF REST service use the WCF channel and messaging architecture which is used in the WCF SOAP service.

ASP.NET WEB API

This is based on the ASP.NET MVC architecture to create an API for the web. We can create a RESTful API using the ASP.NET Web API. A simple Web API is a class which inherits ApiController class.

clip_image006

Keep in mind that ASP.NET Web APIs does not have the EndPoints and bindings. It utilizes the ASP.NET MVC routings to resolve the resources. Here resource describes their own capabilities and interactions.

To understand difference between REST Service and ASP.NET Web API, let us try to understand The Richardson Maturity Model.

RMM: Richardson Maturity Model classify an API into different levels on the basis of how well they use or take advantage of the web.

image

There are four levels in the RMM from level 0 to level 3.

image

Now we know different levels of RMM, so let us try to map WCF REST Service and the ASP.NET Web API to RMM.

In WCF REST Service

  • Can have multiple URI
  • Can have multiple HTTP methods
  • Operations are defined by the URI
  • Each operation has its own URI
  • Each URI cross ponds to a method on the server.

Let us examine nature of REST Service. Let us assume we want to perform CRUD operation on the BloodDonor table. WCF REST Service allows us to have different methods on the same URI. So it is very much resource oriented. Resource is uniquely identified by the URI and we can have multiple HTTP method on the same resource or URI. A WCF REST Service for CRUD operation may look like as shown in the listing below,

image

Before we conclude that WCF REST Service can be placed in the level 2, there is a catch in it. Above created WCF REST does not know the content negotiation. Client cannot request for a particular type of content and can only work with the XML message format (in this case). WCF REST service cannot negotiate with the resource on the same URI in the multiple message format.

image

Now let us focus on the ASP.NET Web API. It can be also be placed in the level 2 with content negotiation and the support for multiple message format on the same URI.

image

A typical ASP.NET Web API may look as shown in the listing below,

clip_image002[6]

ASP.NET Web API have single URI for multiple operations working on different HTTP methods. However unlikely WCF REST, while accessing ASP.NET Web API, client can negotiate the content. Client can pass the message formant want to work with.

Let us see this in action using the Fiddler. In the fiddler when we pass content type as XML, ASP.NET Web API will return response in XML message format as shown in the image below,

clip_image004[6]

In the fiddler when we pass content type as JSON, ASP.NET Web API will return response in JSON message format as shown in the image below,

clip_image006[6]

Clearly in the ASP.NET Web API client can pass the message format in the request header. Some other characteristics of the ASP.NET Web API over the WCF REST Service is as follows:

  • Unit Testability
  • Support for multiple format
  • Symmetric programming experience at client and server
  • Multiple hosting options

By discussion so far we can say you don’t create REST Service using the Web API. Web API is has more features to put itself in the level 2 of the Richardson Maturity Model.

image I am sure this is a subjective discussion, so would love to read your thought on the same. Feel free to comment your view on my understanding.

Happy coding.

Simplifying Routing in AngularJS

Usually AngularJS is used to create a single page application with multiple views. But we can create multiple views in an AngularJS-based single page application by using routing – and in this post we’ll learn how to do that!

What is Routing?

Routing allows us to logically divide the application in the multiple logical views to be loaded asynchronously. Let’s take, for example, a single page Product application. We can break the various tasks that can be performed on that product into separate logical views as shown below,

  • · View to add a product
  • · View to delete a product
  • · View to edit a product
  • · View to display the products.

In AngularJS routing, each view has its own URL. For example, the four views of a single page product application as listed above may have URLs as shown below:

Read full article on the Infragistics blog