30 Days of Zumo.v2 (Azure Mobile Apps): Day 17 – ASP.NET Backend Introduction

I have concentrated on the Node.js backend for Azure Mobile Apps thus far. However, Azure Mobile Apps also supports an ASP.NET 4.6 (not ASP.NET core) backend. I’m going to start exploring the ASP.NET backend in this article, looking at a lot of the same functionality as I did for the Node.js backend.

Why use the ASP.NET backend?

Given the functionality of the Node.js backend, you may be wondering why you would even consider the ASP.NET backend. Well, there are a few reasons:

  1. You are more familiar with C# and ASP.NET in general.
  2. You want to utilize the large package library available via NuGet.
  3. You are doing cross-platform development in Xamarin and want to share code between backend and client apps.
  4. You want to use more complex types than a string, number, date or boolean.

Similarly, there are good reasons to use the Node.js backend:

  1. You are more familiar with Javascript and/or node programming.
  2. You want to utilize the large package library available via npm.
  3. You are primarily a frontend developer, don’t care about the schema and want to use the dynamic schema feature.

I find Node.js to be simpler to write – it requires less code to write functionally identical backends. I find ASP.NET to be easier to debug a lot of the time, with many errors being found at compile time (something that doesn’t exist in Node) rather than run time.

Starting with an ASP.NET MVC application

When kicking off a new project, I’d normally tell you to start with an example or template that is close to the pattern you want to deploy. Azure Mobile Apps has templates for the ASP.NET backend in the Azure SDK. Why not start with one of those?

Great question and you can certainly start with a specific Azure Mobile Apps project template. However, I want to show off how you can add Azure Mobile Apps to any ASP.NET application. Azure Mobile Apps is a good platform for exposing SQL data to a web or mobile application. There is nothing magical about the Azure Mobile Apps templates – they are really just ASP.NET templates with some in-built code. So I’ve started my code with the standard ASP.NET 4.6 MVC template. I’ve done some changes to it – most notably removing the built-in identity manager (which creates a database table for handling sign-ins) and removing Application Insights.

You might be wondering how I get two backends in the same solution and choose which one to deploy. The .deployment file has a project property that tells Azure App Service which project to deploy.

You can find my initial code at my GitHub Repository, tagged as pre-day-17.

Introducing the Azure Mobile Apps .NET Server SDK

Did you know the Azure Mobile Apps team develops all their SDKs as open source on GitHub? Here is a complete list of the SDKs, together with their links:

In addition, the Azure Mobile Apps team publishes the SDKs in “the normal places” – that depends on the client language – npm for JavaScript, for example, or NuGet for the .NET Server SDKs. That means you can generally just work with the SDKs as you normally would.

There are several parts to installing the Server SDK into an ASP.NET application:

  1. Configure Entity Framework for your database
  2. Configure Azure Mobile Apps Server SDK
  3. Create your model
  4. Create a table controller

I’m going to do the basic one today – starting where I did with the Node.js backend – at the beginning, configuring the server to handle the TodoItem model and table.

Configuring Entity Framework

My first stop is to the web.config file. In the standard template, the connection string is called DefaultConnection – I need to change it to match the connection string that is used by Azure Mobile Apps:

  <connectionStrings>
    <add name="MS_TableConnectionString" connectionString="Data Source=(LocalDb)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\aspnet-backend.dotnet-20160417041539.mdf;Initial Catalog=aspnet-backend.dotnet-20160417041539;Integrated Security=True" providerName="System.Data.SqlClient" />
  </connectionStrings>

Just the name needs to change here. I don’t need to do any other changes because the Azure Mobile Apps Server SDK takes care of it for me.

Configuring Azure Mobile Apps

First stop – I need to add some NuGet packages. Here is the list:

  • Microsoft.Azure.Mobile.Server
  • Microsoft.Azure.Mobile.Server.Entity
  • Microsoft.WindowsAzure.ConfigurationManager
  • Microsoft.AspNet.WebApi.Owin

To install the NuGet packages, right-click on the References node and select Manage NuGet Packages… Click on Browse and then search for the packages. Once you’ve found one, click on the Install button:

day-17-nuget

This list is a minimal list – I haven’t included items that are in the dependencies.
Pretty much any plugin of this magnitude has a startup process. I am placing mine in App_Start/AzureMobile.cs:

using Owin;
using System.Data.Entity;
using System.Web.Http;
using Microsoft.Azure.Mobile.Server.Config;
using Microsoft.Azure.Mobile.Server.Tables.Config;
using backend.dotnet.Models;

namespace backend.dotnet
{
    public partial class Startup
    {
        public static void ConfigureMobileApp(IAppBuilder app)
        {
            HttpConfiguration config = new HttpConfiguration();

            // Configure the Azure Mobile Apps section
            new MobileAppConfiguration()
                .AddTables(
                    new MobileAppTableConfiguration()
                        .MapTableControllers()
                        .AddEntityFramework())
                .MapApiControllers()
                .ApplyTo(config);

            // Initialize the database with EF Code First
            Database.SetInitializer(new AzureMobileInitializer());

            // Link the Web API into the configuration
            app.UseWebApi(config);
        }
    }

    public class AzureMobileInitializer : CreateDatabaseIfNotExists<MyDbContext>
    {
        protected override void Seed(MyDbContext context)
        {
            // You can seed your database here
            base.Seed(context);
        }
    }
}

The major work here is done after the MobileAppConfiguration(). I add any table controllers that are defined and hook them up to the data source defined via the DbContext. Once that is done, I call the database initializer, which will create the database and tables that I need. For that, I need a database context, which is defined in Models/MyDbContext.cs:

using backend.dotnet.DataObjects;
using Microsoft.Azure.Mobile.Server.Tables;
using System.Data.Entity;
using System.Data.Entity.ModelConfiguration.Conventions;
using System.Linq;

namespace backend.dotnet.Models
{
    public class MyDbContext : DbContext
    {
        private const string connectionStringName = "Name=MS_TableConnectionString";

        public MyDbContext() : base(connectionStringName)
        {

        }

        public DbSet<TodoItem> TodoItems { get; set; }

        protected override void OnModelCreating(DbModelBuilder modelBuilder)
        {
            modelBuilder.Conventions.Add(
                new AttributeToColumnAnnotationConvention<TableColumnAttribute, string>(
                    "ServiceTableColumn",
                    (property, attributes) => attributes.Single().ColumnType.ToString()
                )
            );
        }
    }
}

This is fairly standard stuff. I set the connection string name to the MS_TableConnectionString – which I am using because that’s the connection string that Azure App Service creates when adding a data connection. The OnModelCreating() method is boilerplate for Azure Mobile Apps – just go with it.

Finally, don’t forget to link the configuration into the Startup.cs file:

using Microsoft.Owin;
using Owin;

[assembly: OwinStartupAttribute(typeof(backend.dotnet.Startup))]

namespace backend.dotnet
{
    public partial class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            ConfigureMobileApp(app);
        }
    }
}

If you find yourself not able to query anything at all and are getting 404 responses to everything, then it’s likely you missed this step.

Create a Model (or DTO)

Normally, I would be talking about models here. Azure Mobile Apps uses things called “Data Transfer Objects” or DTOs for short. They inherit from EntityData – this adds the five system columns to my table. Here is my DataObjects/TodoItem.cs file:

using Microsoft.Azure.Mobile.Server;

namespace backend.dotnet.DataObjects
{
    public class TodoItem : EntityData
    {
        public string Text { get; set; }

        public bool Complete { get; set; }
    }
}

Want a different field name on the remote end? Just use a JsonProperty transform – like this:

using Microsoft.Azure.Mobile.Server;
using Newtonsoft.Json;

namespace backend.dotnet.DataObjects
{
    public class TodoItem : EntityData
    {
        public string Text { get; set; }

        [JsonProperty(PropertyName = "complete")]
        public bool IsComplete { get; set; }
    }
}

I’m not doing this since I’m reusing the database I used for the Node.js backend. At this point, everything should compile, so you can do some sanity checks on your code – are you missing the NuGet packages, for example?

Create a Table Controller

A Table Controller looks just like a regular controller. In fact, there is some scaffolding help you get from the Azure SDK. Just right-click on the Controllers folder in the Solution Explorer and select Add -> Controller… – the Azure Mobile Apps Table Controller will be listed:

day-17-add-new-controller

On the next screen, you will be asked for the model class and the DbContext – I’ve conveniently just completed those:

day-17-add-new-controller-2

Click on OK and that’s it – you don’t need to do anything else.

Running locally

You can just press F5 to run this now (or right-click on the project, use Set As Startup Project… and then run it). Test it with Postman:

day-1-postman

Next Steps

I’m not ready to deploy this to Azure yet. I’ve got just a basic ASP.NET backend running. My Node.js backend handled authentication and provided a unique view of the data based on the users email address. I want to implement that capability before I deploy to Azure. That will be the topic next time.

Until then, you can get my code from my GitHub Repository.

One thought on “30 Days of Zumo.v2 (Azure Mobile Apps): Day 17 – ASP.NET Backend Introduction

Comments are closed.