Monthly Archives: September 2012

Visual Studio 2012 and Web API

By Tim Daniels
Visual Studio 2012 recently became available, so I decided to download the Express for Web edition from the Microsoft Products Store. Here is a snapshot of the new look and feel of Visual Studio 2012. See what else is new in Visual Studio 2012.

Visual Studio 2012

Visual Studio 2012 – New look and Feel

Within Visual Studio 2012, I have discovered a new technology called Web API. According to ASP.net website, ASP.NET Web API is a framework that makes it easy to build HTTP services that reach a broad range of clients, including browsers and mobile devices. ASP.NET Web API is an ideal platform for building RESTful applications on the .NET Framework. The Web API framework appears to be a subset of the MVC 4 design pattern, which is also included in Visual Studio Express 2012. ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that enables a clean separation of concerns and that gives you full control over markup for enjoyable, agile development. ASP.NET MVC includes many features that enable fast, Test Driven Development (TDD) for creating sophisticated applications that use the latest web standards.

As you know from my most recent articles, I’ve been focusing on developing web services based on the Microsoft Windows Communication Foundation (WCF). You may also recall that the web service I developed is based on the REST architectural model. Since the Web API technology is also based on REST, I have decided to add this technology to my repertoire. My objectives are the following;

  • Learn Web API from the online tutorials at the ASP.Net website
  • Develop a prototype web service with Visual Studio 2012
  • Deploy the web service to the could using Microsoft Azure
  • Develop a client app for mobile devices like IPad to consume the web service
  • If all of this works as expected, I will develop a new web service for the World of Art Web App based on Web API

Evolution of the User Interface

By Tim Daniels
At this time I have demonstrated three iterations of the Artist web page in The World of Art Web App. The first iteration, simply called the Artist page, was designed with the ASP.Net Web Form model. In this example, I developed the user interface with three ASP.Net server side controls;

The ASP.Net Web Form model depends on the ASP.Net Engine, in the web server, to generate the actual HTML rendered by the client. The input to the ASP.Net engine is the XHTML elements and attributes defined in the .aspx web form file. This model supports a very rapid development process. However, it is a poor architectural design for a distributed web app, because the user interface and database access are tightly coupled. This tight coupling of architectural elements, makes long term maintenance and further development of the app more complicated, because the impact of change has a broad affect across the application. Here is the XHTML source code of the first iteration of the Artist page;

In the second iteration of the Artist page, which I called Art Entities, I eliminated the SqlDataSource web server control, and created a separation of concerns between the user interface and data access. This is where I introduced the concept of a layered architectural design, with the development of the Data Access Layer, and the Data Model Layer. In the Data Model Layer, I developed an Entity Relationship Model with the ADO.Net Entity Framework, which created a line of clear separation, and decoupling, between data access functions and the SQL Server database.

In this phase of development, the user interface evolved into an external layer of the overall web app design. However, the user interface is still based on server side ASP.Net web server controls. I simply exploited the data binding methods, built into these controls, to create an API to the data access layer. Here is the XHTML and C# source code used to render the Art Entities page of the World of Art Web App;

The ASP.Net Web server controls, used in the first two iterations of the user interface, is a suitable design solution for an enterprise level application, which is running internally to the enterprise. The number of users is limited to the employee and associates base, the application is supported by the internal IT infrastructure of the enterprise as an intranet appliation. The view state and post back model, supported by these web server controls, performs very well in this environment. However, if the application is to be distributed over a wide range of clients, and accessible from the world wide web, a much leaner and flexible architectural model is required. This is a requirement for the World of Art Web App. Therefore, in this latest iteration of the app, I added a web service layer to the architecture, based on the Microsoft Windows Communication Foundation (WCF). Accessing the service layer of the World of Art Web app, was a driving factor behind the design of the third iteration of the user interface.

Accessing the service layer, reverses the flow of content between the client and the server. In the previous versions, where server side controls were used, content was pushed from the server to the client. However, acquiring content from the service layer, requires the client to pull content from the server through an HTTP request.

The third iteration of the artists page, which I called Art Entities from Service, is a very minimal and efficient design, utilizing an HTTP GET Request to retrieve artist data from the web service, and JavaScript to render the artist result set in HTML. I also employed a CSS 3 cascading style sheet to complete the look and feel of the page.

Here is the XHTML source code of the ASP.net web form and the JavaScript source code used in the third iteration of the user interface;

Here is the cascading style sheet. You will notice some of the new CSS 3 attributes like “border-radius”, which is used to form the rounded corners of the artist grid in the Entities From Service page.

The AJAX Client and Cross-Domain GET Requests

By Tim Daniels
In developing the client to consume the World of Art Web Service, I decided to stick with the ASP.Net Web Form (.aspx). This allowed me to take advantage of the master page concept already implemented in the World of Art Web App. Following is the markup source code of the .ASPX page. As you can see it has some very basic ingredients;

  • Page declaration with a reference to the web site master page
  • HTML Heading Tag
  • A script tag pointing to a JavaScript source code file called GetArtists.js

Here is the XHTML mark up code of the .aspx web form;

The heart of the client application is the JavaScript in the GetArtists.js file. There are two primary functions;

  • getArtistsAjax() – Requests artist data from the World Of Art Web Service
  • updateArtists() – Dynamically generates the user interface

Here is the JavaScript source code of the client.

Lets first examine the getArtistsAjax() function. There are many different ways to perform an HTTP GET request. After trying a number of different combinations, I found this implementation to be a straightforward and flexible solution. The getArtistsAjax() function uses the JQuery.ajax() method, to perform the asynchronous HTTP(Ajax) request for artist data from the ArtService. The jQuery.ajax() method can be configured with a multitude of settings and parameters. However, for the simple HTTP GET request required by this application, I found it necessary to only pass five arguments to the jQuery.ajax() method, which are coded as key/value pairs;

  • type: “GET” – The type of request to make (“POST” or “GET”)
  • url: ‘http://lexicon-software-apps.com/ArtService.svc/GetArtists’ – A string containing the URL to which the request is sent.
  • dataType: “jsonp” – Loads in a JSON block using JSONP. Adds an extra “?callback=?” to the end of your URL to specify the callback. Disables caching by appending a query string parameter, “_=[TIMESTAMP]“, to the URL unless the cache option is set to true.
  • success: function() – A function to be called if the request succeeds.
  • error: function() – A function to be called if the request fails.

The most interesting setting is the dataType set to “jsonP”. This gives the client flexibility to perform a “GET” request from a domain other than the one that served the original page request. The following illustrates an example of this. I setup an alternate domain at Winhost called Lexicon-Software-Learning.com. I published the World of Art Web Service at Lexicon-Software-Learning.com. I then changed the url setting to point to the learning domain. Here is the result;

Cross Domain Get Request

The artists entity web page is served from Lexicon-Software-Apps.com domain and the get artists data request is served from Lexicon-Software-Learning.com.

The other primary JavaScript function in GetArtists.js is the updateArtists() function. It receives the JSON formatted data result set from the HTTP GET request. The JSON data is basically an array of artist objects. This function simply iterates through the array of artist objects, and adds them as elements to the web pages’ Document Object Model (DOM) object. I also applied some new CSS 3 style sheet elements, to finish off the look and feel, of the list of artists page.

I will cover the user interface in more detail in my next post. We will also look at the evolution of the user interface in the World of Art Web App, from the first iteration which was server side generated, to this latest iteration which is client side generated.

Here is the CSS 3 Cascading Style Sheet