Creating Ignite UI Cloud Applications – Using Spatial Data with Windows Azure SQL Database (Part 1)

[Infragistics] Mihail Mateev / Saturday, November 3, 2012

Ignite UI is the brand new Infragistics jQuery & HTML5 based framework. With Ignite UI, developers can create next generation, browser based, touch-enabled tablet, mobile & desktop experiences. In a series of articles will look at how we create real-world applications using this framework. First will be discussed how to build applications in the cloud with Ignite UI.

In the near future cloud systems will have an increasing impact on our lives. Developers will focus more on building applications in the cloud.

Let's start with how we can migrate one WEB application in the cloud. Usually migration affects two issues - how to make data migration and what changes we need to do in our applications to work on cloud platform.

Sample Application.

We could use a sample application demo from my previous blog: “Creating Interactive Web Mapping Applications with Ignite UI, Entity Framework and SQL Server 2012”. The first task will be to make our application to use data from Windows Azure. Demo application that you need to start is available here. Updated sample with Windows Azure SQL Database usage you can download from this link. In this sample you have a nice dashboard with Ignite UI Map(igMap), Grid (igGrid) and Chart (igDataChart). In this sample we will use data via Entity Framework 5 from two sample databases : Northwind and SqlSpatialDemo.

Create a Database Server.

You need to have a Windows Azure subscription and to create a database server. For WEB Azure apps you also need to allow Windows Azure Services to access the server (we need to access our server via WEB Roles). If you need just to access data from other locations you will create additional firewall rules later.

Data Migration

In this article we will learn how to move Data from SQL Server 2012 to Windows Azure SQL Database (former SQL Azure). In the latest SQL Server 2012 Management Studio there are improvements related to the migration of data in the cloud - especially migration of spatial data. With previous versions of Microsoft SQL Server (2008 and 2008R2) and SQL Azure (based on MS SQL Server 2008 R2) it was not possible to copy or move spatial data directly from MS SQL Server to a cloud database.

Then we had to import spatial data to use third party tools like SQL Database Migration Wizard (SQLAzureMW).

Now you can make everything with SQL Server 2012 Management Studio

You just need to connect to your local SQL Server, select the database that you want to migrate and from the context menu select Tasks –> Deploy Database to SQL Azure… (the old name of Windows Azure SQL Database).

Follow the Deployment Wizard steps.

You need to connect to your Windows Azure SQL Database using this format: “tcp:[sql server name].database.windows.net”.

Finally you will see a deployment results.

Deployment Results

Update Ignite UI Web Application

To be possible to use data from Windows Azure SQL Database you need to change connection settings. In this sample is used Entity Framework and we will discuss how to change connection settings for EF database first.

Examine the ‘Web.Config’ of the MVC Web Project

The entityFramework section was automatically added to the configuration file of your project when you installed the EntityFramework NuGet package.

<configuration>

  <configSections>

    <!-- For more information on Entity Framework configuration, visit http://go.microsoft.com/fwlink/?LinkID=237468 -->

    <section name="entityFramework" type="System.Data.Entity.Internal.ConfigFile.EntityFrameworkSection, EntityFramework, Version=5.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" requirePermission="false" />

  </configSections>

  <!--Other configuc sections..-->

</configuration>

Connection Strings

The Database First and Model First approaches with an EDMX file use special EF connection strings. For example:

<connectionStrings>

  <add name="BlogContext" 

        connectionString="metadata=res://*/BlogModel.csdl|

                                                              res://*/BlogModel.ssdl|

                                                              res://*/BlogModel.msl;

                                           provider=System.Data.SqlClient;

                                           provider connection string=

                                               &quot;data source=.\SQLEXPRESS;

                                               initial catalog=Blogging;

                                               integrated security=True;

                                               multipleactiveresultsets=True;&quot;" 

    providerName="System.Data.EntityClient" />

</connectionStrings>

Connection strings go in the standard connectionStrings element and do not require the new entityFramework section.

You will notice that the connection string with the name 'DefaultConnection' is by default using the LocalDb database, which is installed with the visual studio 2012 itself.

When entities are created from database you will have a connection name in the constructor of ObjectContext inheritors:

/// <summary>

/// Initializes a new NorthwindEntities object using the connection string found in the 'NorthwindEntities' section of the application configuration file.

/// </summary>

public NorthwindEntities() : base("name=NorthwindEntities", "NorthwindEntities")

{

    this.ContextOptions.LazyLoadingEnabled = true;

    OnContextCreated();

}

  

/// <summary>

/// Initializes a new SpatialDemoEntities object using the connection string found in the 'SpatialDemoEntities' section of the application configuration file.

/// </summary>

public SpatialDemoEntities() : base("name=SpatialDemoEntities", "SpatialDemoEntities")

{

    this.ContextOptions.LazyLoadingEnabled = true;

    OnContextCreated();

}



Connection strings will be automatically added to connectionStrings section of your ‘Web.Config’ file.

<connectionStrings>

  <add name="DefaultConnection" providerName="System.Data.SqlClient" connectionString="Data Source=(LocalDb)\v11.0;Initial Catalog=aspnet-Mvc4EfSpatialDemo-20120708125516;Integrated Security=SSPI;AttachDBFilename=|DataDirectory|\aspnet-Mvc4EfSpatialDemo-20120708125516.mdf" />

  <add name="SpatialDemoEntities" connectionString="metadata=res://*/WorldModel.csdl|res://*/WorldModel.ssdl|res://*/WorldModel.msl;provider=System.Data.SqlClient;provider connection string=&quot;data source=(local);initial catalog=SqlSpatialDemo;integrated security=True;MultipleActiveResultSets=True;App=EntityFramework&quot;" providerName="System.Data.EntityClient" />

  <add name="NorthwindEntities" connectionString="metadata=res://*/NorthwindModel.csdl|res://*/NorthwindModel.ssdl|res://*/NorthwindModel.msl;provider=System.Data.SqlClient;provider connection string=&quot;data source=(local);initial catalog=Northwind;integrated security=True;MultipleActiveResultSets=True;App=EntityFramework&quot;" providerName="System.Data.EntityClient" />

</connectionStrings>

The modified web configuration file will look like this..

<add name="SpatialDemoEntities" 

connectionString="metadata=res://*/WorldModel.csdl|res://*/WorldModel.ssdl|res://*/WorldModel.msl;

provider=System.Data.SqlClient;provider connection string=&quot;

Data Source=tcp:[sql server name].database.windows.net;

Initial Catalog=SqlSpatialDemo;

Integrated Security=False;

User ID=[user id];Password=[user password];

MultipleActiveResultSets=True;

App=EntityFramework&quot;" 

providerName="System.Data.EntityClient" />

Demo Application

Run the application. Now your data is in the cloud and everything works pretty good.

In the next article you will learn how to deploy your Ignite UI application in the cloud (Windows Azure)

You are probably thinking, how do I get my hands on Ignite UI Map? It’s easy.

Click on this image to get a fully support trial version of Infragistics Ignite UI controls:

To view all the samples and code for HTML, MVC & ASP.NET, click there:

https://ko.infragistics.com/products/ignite-ui

Follow news from Infragistics for more information about new Infragistics products.

Source code is available here. You can also download sample databases : Northwind and SqlSpatialDemo. Demoproject is created with Visual Studio 2012, but you can use NetAdvantage 12.2 controls with both: Visual Studio 2012 and Visual Studio 2012. As always, you can follow us on Twitter @mihailmateev and @Infragistics and stay in touch on Facebook, Google+ and LinkedIn!