Click here to Skip to main content
Click here to Skip to main content

Tagged as

HTML5 SVG + ASP MVC Web API

, 13 Jun 2012
Rate this:
Please Sign up or sign in to vote.
A quick article regarding new features in HTML5 and ASP MVC 4.

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

bprochniak
Software Developer
Poland Poland
I've been programming since 2004. Delphi, C, C++. Now I'm a big fan of C# and ASP MVC.

Comments and Discussions

 
Questionmy 2 cents PinmemberSeishin#13-Jun-12 22:21 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140827.1 | Last Updated 13 Jun 2012
Article Copyright 2012 by bprochniak
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid