How To Create TreeMap With ASP.NET MVC 4

Introduction

In this post, I will explain how to create TreeMap, using jqxTreeMap Plugin with ASP.NET MVC 4, C#, and Entity Framework.

What is jqxTreeMap?

jqxTreeMap displays hierarchical data as a set of nested rectangles. Each branch of the tree is given a rectangle, which is then tiled with smaller rectangles representing sub-branches. A leaf node's rectangle has an area proportional to a specified dimension on the data.

First, let’s start downloading libraries from jqwidgets.

SQL Database part

Create Table

You will find the table, given below, used in our application:



After creating the table, you can fill it using the data, as shown below:



Create your MVC application

Open Visual Studio. Click on File > New > Project and name your project, as shown below:




Now, we need to create an Entity Data Model which allows us to retrieve data from the database.

Right click on the project name. Click Add > Add New Item. In the dialog box displayed, select Data > Click Add button.





After clicking Next button, the dialog box will be displayed, as shown below. You need to choose your server name and select your database.



Finally, we see that EDMX model generates CountryPopulation class.



Create a controller

Now, we proceed to create a controller. Right click on controller folder > Add > Controller > Enter Controller name (‘Home Controller’).



HomeController.cs