Click here to Skip to main content
13,003,589 members (63,080 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


7 bookmarked
Posted 13 Jun 2012


, 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.


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. 


At the time of writing this article, ASP MVC varsion 4 is labeled as RC (a release candidate) - 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" ?>
    <Continent name="Europe" area="10180000" population="739165030">
        <Country name="Poland">
            <rect id="redrect" width="50" height="30" fill="red" />
            <rect id="whiterect" width="50" height="15" fill="white" />            
        <Country name="Germany">
            <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" />
    <Continent name="Asia" area="44579000" population="3879000000">
        <Country name="Japan">
            <rect id="whitebackground" width="50" height="30" fill="white" />
            <circle id="redcircle" cx="25" cy="15" r="8" fill="red" />

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




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)
        name: "Geography",
        routeTemplate: "geography/{controller}/{id}",
        defaults: new { id = RouteParameter.Optional }
        name: "Countries",
        routeTemplate: "geography/{controller}/{continentID}/countries",
        defaults: new { controller = "Continents", action = "GetCountries" },
        constraints: new { httpMethod = new HttpMethodConstraint(new string[] { "GET" }) }
        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:


  • 13 June 2012: First version.


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


About the Author

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

You may also be interested in...

Comments and Discussions

Questionmy 2 cents Pin
Seishin#13-Jun-12 22:21
memberSeishin#13-Jun-12 22:21 

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

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

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170626.1 | Last Updated 13 Jun 2012
Article Copyright 2012 by bprochniak
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid