ASP.NET Api w/ Angular6+

Noted.md

CRUD w/ ASP.NET and Angular6+

From this tutorial

1. API setup: New Project -> ASP.NET Web Application -> Web API

2. Remove some boilerplate:

App_Start/BundleConfig.cs Areas/ Content/ font/ Scripts/ Views/ ApplicationInsights.config

3. In Global.asax, remove using System.Web.Optimization and BundleConfig.RegisterBundles(BundleTable.Bundles);

4. Remove unneeded NuGet packages with this script:

Uninstall-Package Microsoft.ApplicationInsights.Web
Uninstall-Package Microsoft.ApplicationInsights.WindowsServer
Uninstall-Package Microsoft.ApplicationInsights.WindowsServer.TelemetryChannel
Uninstall-Package Microsoft.ApplicationInsights.PerfCounterCollector
Uninstall-Package Microsoft.ApplicationInsights.DependencyCollector
Uninstall-Package Microsoft.ApplicationInsights.Agent.Intercept
Uninstall-Package Microsoft.ApplicationInsights
Uninstall-Package Microsoft.AspNet.Web.Optimization
Uninstall-Package bootstrap
Uninstall-Package jQuery
Uninstall-Package WebGrease
Uninstall-Package Antlr
Uninstall-Package Modernizr

5. Install ASP.NET API Dependencies:

Install-Package Microsoft.Owin.Host.SystemWeb -Version 4.0.0
Install-Package Microsoft.IdentityModel.Protocols.OpenIdConnect -Version 5.2.1
Install-Package Microsoft.IdentityModel.Tokens -Version 5.2.1
Install-Package Microsoft.Owin.Security.Jwt -Version 4.0.0
Install-Package EntityFramework -Version 6.2.0
Install-Package Microsoft.AspNet.WebApi.Cors -Version 5.2.6
Install-Package Microsoft.AspNet.Identity.Owin -Version 2.2.1

6. Connect with EF6:

Add connection string to Web.config:

<connectionStrings>
  <add name="OktaConnectionString" providerName="System.Data.SqlClient" connectionString="Server=.;Database=Okta; Integrated Security=True;" />
</connectionStrings>

(For mine, so far I have "Data Source=localhost;Integrated Security=True;" as the connections tring. Dunno if this'll work)

Models and DB Context

Example Model:

using System;
using System.ComponentModel.DataAnnotations;

namespace ToDoLister_API.Models
{
    public class User
    {
        [Key]
        public int Id { get; set; }

        [Required]
        public string Name { get; set; }

        [Required]
        public string Email { get; set; }

        [Required]
        public string  Password { get; set; }
    }
}

Example DB Context:

using System.Data.Entity;
using ToDoLister_API.Models;

namespace ToDoLister_API.Data
{
    public class ApplicationDbContext : DbContext
    {
        public ApplicationDbContext() : base("DbConnectionString")
        {

        }

        public static ApplicationDbContext Create()
        {
            return new ApplicationDbContext();
        }

        public DbSet<User> Users { get; set; }
        public DbSet<List> Lists{ get; set; }
        public DbSet<Item> Items{ get; set; }

    }
}

Migrations

Run these commands:

Enable-Migrations

Add-Migration Initial

Update-Database -Verbose

Enable CORS:

In App_start/WebApiConfig.cs add:

using System.Web.Http.Cors;

[...]

[...] Register() 
{
[...]

var cors = new EnableCorsAttribute("http://localhost:4200", "*", "*");
config.EnableCors(cors);

}

Port :4200 is default port for Angular CLI apps

Set default format for JSON instead of XML

In WebApiConfig.cs

using Newtonsoft.Json.Serialization;

[...]
Register() {
  [...]
var jsonFormatter = config.Formatters.JsonFormatter;
jsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
config.Formatters.Remove(config.Formatters.XmlFormatter);
jsonFormatter.SerializerSettings.DateTimeZoneHandling = Newtonsoft.Json.DateTimeZoneHandling.Utc;
}