AngularJs – C# Web Api Server

Tutorial AngularJs

von Ardian Shala, 11.01.2017 - update: 22.08.2017
C# Web Api mit Entity Framework als Server Applikation, die über HTTP Requests von einer AngularJs Single Page Application angesteuert wird.
Vorraussetzung:
  • AngularJs 1.5.x - link
  • Visual Studio 2015 Community - link
  • Entity Framework - link

Downloads:

SPA + API

C# Web API Projekt erstellen

Visual Studio starten und ein neues leeres C# Web Api Projekt wie folgt anlegen:
Datei / Neu / Projekt / Web / Asp.Net Webanwendung / OK.
Nun setzen wir den Haken bei WebApi und wählen das Template „Empty“ aus.
Dies erstellt ein minimalistisches C# Web Api Projekt mit allen benötigten Verweisen.

Server Cors erlauben

Damit wir von außen auf die API zugreifen können, müssen wir ein Package installieren:
Install-Package Microsoft.AspNet.WebApi.Cors

Außerdem passen wir eine Kleinigkeit in der Global.asax.cs Datei an.
In der Application_Start Funktion fügen wir folgende Zeile hinzu:

GlobalConfiguration.Configuration.EnableCors(new EnableCorsAttribute("*","*","*"));
GlobalConfiguration.Configuration.Routes.MapHttpRoute("Default", "{controller}/{action}/{id}", new { id = RouteParameter.Optional });

Das sorgt dafür, dass sämtliche Origins, Header und Methoden erlaubt sind. (dies kann und sollte man bei Bedarf einschränken)

Entity Framework integrieren

Über Nuget installieren wir nun Entity Framework, welches das Laden und Speichern von Datensätzen aus einer Datenbank vereinfacht.
Dafür geben wir im Package Manager folgenden Befehl ein:
Install-Package EntityFramework

Connection String erstellen

Damit Entity Framework mit der Datenbank kommunizieren kann, ergänzen wir in der webconfig unter der connectionStrings Section folgenden Eintrag:

<add name="DefaultConnection" connectionString="Data Source=(LocalDb)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\APIDB.mdf;Initial Catalog=APIDB;Integrated Security=True"
     providerName="System.Data.SqlClient" />

Model für Datenbank Tabelle erstellen

Wir gehen hier von einem einfachen Model aus, welches die Properties „id“ und „title“ hat.

namespace API.Models
{
    public class Item
    {
        public int id { get; set; }
        public string title { get; set; }
    }       
}

DBContext definieren

Nun erstellen wir den DBContext, welcher von System.Data.Entity.DbContext abgeleitet ist.
Im Konstruktor muss deshalb auch von „base“ abgeleitet werden und als Parameter der Connection String Name mitgeliefert werden.
In diesem Fall „DefaultConnection“ (siehe Webconfig).
Damit wir auf unsere Items zugreifen können, erhählt der Context eine Property vom Typ DbSet mit unserem zuvor erstellten Item Model als generische Entität.

using System.Data.Entity;
namespace API.Models
{
    public class DBContext : DbContext
    {
        public DBContext() : base("DefaultConnection") { }
        public DbSet<Item> Items { get; set; }
    }           
}

Basis Controller erstellen

Der Basis Controller wird Zwecks Vererbung erstellt. Zusätzlich initialisieren wir hier den DbContext.

using API.Models;
using System.Web.Http;

namespace API.Controllers
{
    public class BaseController : ApiController
    {
        public DBContext dbContext = new DBContext();
    }
}

Item Api Controller erstellen

Wir erstellen einen weiteren Controller, welcher die Requests vom Client entgegennimmt.
Dieser wird von BaseController abgeleitet, damit der DBContext vorhanden ist.

Item Controller Funktionen

Folgend definieren wir die Funktionen für get, post, put und delete mit den jeweiligen Attributen.
Wir arbeiten hier für das Verständnis direkt mit den DbContext Items, statt DTO (Data Transfer Objects) zu definieren.

get:

[HttpGet]
public List<Item> GetItems()
{
    return dbContext.Items.ToList();
}

post:

[HttpPost]
public void AddItem(Item itemDto)
{
    dbContext.Items.Add(itemDto);
    dbContext.SaveChanges();
}

put:

[HttpPut]
public void UpdateItem(Item itemDto)
{
    var item = dbContext.Items.First(i => i.id == itemDto.id);
    item.title = itemDto.title;
    dbContext.SaveChanges();
}

delete:

[HttpDelete]
public void DeleteItem(int id)
{
    dbContext.Items.Remove(dbContext.Items.First(i => i.id == id));
    dbContext.SaveChanges();
}

Client Applikation

Für den folgenden Anwendungsfall habe ich eine Client-Applikation erstellt, die Item Einträge anzeigen, anlegen, editieren und löschen soll.
Folgend werden die AngularJs Funktionen get, post, put und delete kurz angeschnitten. Die komplette Anwendung kann unter Downloads runtergeladen werden.

Client Requests

Die 4 Haupt Funktionen sehen runtergebrochen wie folgt aus:

get:

$http.get(ApiUrl + "/Item/GetItems") ...

post:

$http.post(ApiUrl + "/Item/AddItem", data) ...
put:
$http.put(ApiUrl + "/Item/UpdateItem", data) ...

delete:

$http.delete(ApiUrl + "/Item/DeleteItem", id) ...

Fazit

Startet man nun mit der Client Applikation z.B.: per get Request eine Anfrage, erhält man von der C# Web Api alle Item Einträge aus der Datenbank.
So lässt sich mit wenig Aufwand die Grundstruktur für eine Client Server Anwendung erstellen.

Autor: Ardian Shala

Ersteller der Webseite MuchaDev. Frontend Entwickler mit Angular, Ionic und Backend Entwickler mit C#.