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.
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)
Ü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
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" />
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; }
}
}
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; }
}
}
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();
}
}
Wir erstellen einen weiteren Controller, welcher die Requests vom Client entgegennimmt.
Dieser wird von BaseController abgeleitet, damit der DBContext vorhanden ist.
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.
[HttpGet]
public List<Item> GetItems()
{
return dbContext.Items.ToList();
}
[HttpPost]
public void AddItem(Item itemDto)
{
dbContext.Items.Add(itemDto);
dbContext.SaveChanges();
}
[HttpPut]
public void UpdateItem(Item itemDto)
{
var item = dbContext.Items.First(i => i.id == itemDto.id);
item.title = itemDto.title;
dbContext.SaveChanges();
}
[HttpDelete]
public void DeleteItem(int id)
{
dbContext.Items.Remove(dbContext.Items.First(i => i.id == id));
dbContext.SaveChanges();
}
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.
Die 4 Haupt Funktionen sehen runtergebrochen wie folgt aus:
$http.get(ApiUrl + "/Item/GetItems") ...
$http.post(ApiUrl + "/Item/AddItem", data) ...
$http.put(ApiUrl + "/Item/UpdateItem", data) ...
$http.delete(ApiUrl + "/Item/DeleteItem", id) ...
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.
Ersteller der Webseite MuchaDev. Selbstständiger IT Constultant für Frontend Technologien.