HTML5 SVG + ASP MVC Web API

• Download demo project - 5.3 MB

Introduction

This article is a quick introduction to the new feature in HTML5: SVG and ASP MVC 4: Web API. Further, the attached demo project takes advantage of jQuery functionality. The demo project has been created using MS Visual Studio 11 Beta. 

Background 

At the time of writing this article, ASP MVC varsion 4 is labeled as RC (a release candidate) - http://www.asp.net/mvc/mvc4. One of its features is the Web Api. As Microsoft's Website declares:

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.  

In this article we'll use the ASP MVC 4 Web API Framework to create a Web API that returns a list of Continents and Counties. In order to display a flag, we'll take advantage of a new feature of HTML5: SVG (Scalable Vector Graphics). 

Using the code 

The "App_Data folder" contains "Geography.xml" file that contains all the data:

<?xml version="1.0" encoding="utf-8" ?>
<Geography>
  <Continents>
    <Continent name="Europe" area="10180000" population="739165030">
      <Countries>
        <Country name="Poland">
          <svg>
            <rect id="redrect" width="50" height="30" fill="red" />
            <rect id="whiterect" width="50" height="15" fill="white" />            
          </svg>
        </Country>
        <Country name="Germany">
          <svg>
            <rect id="yellowrect" width="50" height="30" fill="yellow" />
            <rect id="redrect" width="50" height="20" fill="red" />
            <rect id="blackrect" width="50" height="10" fill="black" />
          </svg>
        </Country>
      </Countries>  
    </Continent>
    <Continent name="Asia" area="44579000" population="3879000000">
      <Countries>
        <Country name="Japan">
          <svg>
            <rect id="whitebackground" width="50" height="30" fill="white" />
            <circle id="redcircle" cx="25" cy="15" r="8" fill="red" />
          </svg>
        </Country>
      </Countries>
    </Continent>
  </Continents>
</Geography>  

As you can see every "Country" node contains a SVG Tag. This tag is responsible for displaying a flag.

Poland:

Germany:

Japan:

The next step is to create the model classes: 

public class Continent
{
    public string Name { get; set; }
    public Int64 Population { get; set; }
    public Int32 Area { get; set; }
    public IEnumerable<Country> Countries { get; set; }
}

public class Country
{
    public string Name { get; set; }
    public string Flag { get; set; }
}

and a class that fetches the data from the Geography.xml file.  

public static class Geography
{
    public static IList<Continent> Continents { get; private set; }

    static Geography()
    {
        var xmlFile = HttpContext.Current.Server.MapPath("~/App_Data/Geography.xml");
        var xml = XDocument.Load(xmlFile);
        var continents = from continent in xml.Root.Elements("Continents").Elements()
                         select new Continent
                         {
                             Area = Int32.Parse(continent.Attribute("area").Value),
                             Name = continent.Attribute("name").Value,
                             Population = Int64.Parse(continent.Attribute("population").Value),
                             Countries = from country in continent.Elements("Countries").Elements()
                                         select new Country
                                         {
                                             Name = country.Attribute("name").Value,
                                             Flag = country.Elements("svg").First().ToString()
                                         }
                         };
        Continents = continents.ToList();
    }
}

Now we need to add a API Controller that returns a list of Continents and Counties: 

public class ContinentsController : ApiController
{
    //GET /geography/continents
    public IQueryable<Continent> Get()
    {
        return Geography.Continents.AsQueryable();
    }
    //GET /geography/continents/{id}
    public Continent Get(string id)
    {
        Continent continent = Geography.Continents.Where(c => string.Compare(c.Name, id, true) == 0).Single();
        return continent;
    }
    //GET /geography/continents/{continentID}/countries
    public IQueryable<Country> GetCountries(string continentID)
    {  
        Continent continent = Geography.Continents.Where(c => string.Compare(c.Name, continentID, true) == 0).Single(); 
        return continent.Countries.AsQueryable();
    }
}

The last step we need to do on the server side is to map the specific route template (in file Global.asax.cs):

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
    routes.MapHttpRoute(
        name: "Geography",
        routeTemplate: "geography/{controller}/{id}",
        defaults: new { id = RouteParameter.Optional }
    );
    routes.MapHttpRoute(
        name: "Countries",
        routeTemplate: "geography/{controller}/{continentID}/countries",
        defaults: new { controller = "Continents", action = "GetCountries" },
        constraints: new { httpMethod = new HttpMethodConstraint(new string[] { "GET" }) }
    );
    routes.MapRoute(
        name: "Default",
        url: "{controller}/{action}/{id}",
        defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
    );
}

All the client code (jQuery) is included in the Index.cshtml file. 

Points of Interest 

We have touched the very basic of ASP.NET Web API and HTML5 SVG. SVG is mostly useful for vector type diagrams and it can displays very complex shapes. More information on SVG you can find on: http://www.tutorialspoint.com/html5/html5_svg.htm.

History 

• 13 June 2012: First version.