Web-Oberflächen für .NET-Anwendungen – nur mit C# und HTML

• Ein Code für Desktop und Web

  Die Anwendung öffnet sich in einem eigenen Fenster des installierten Browsers – Chrome, Edge, Brave, Firefox oder Safari – oder läuft als Web-Server für viele Nutzer.

• Keine API von Hand

  Öffentliche Properties und mit [ActionMethod] markierte Methoden sind automatisch an die View gebunden. Kein REST-Controller, kein Client-Proxy, kein JSON-Mapping.

• Live-Updates vom Server

  Server-Sent Events oder Polling: Ändert sich ein Wert im ViewModel, sieht der Browser es sofort. Ein Update-Timer liefert Messwerte und Status im Takt.

• Anmeldung eingebaut

  Basic Auth mit .htpasswd-Datei (bcrypt, Apache MD5, SHA), NTLM unter Windows und Keycloak – jeweils mit einer Host-Option.

• Mehrsprachig, mit Themes

  Texte aus .resx-Ressourcen, die Sprache auf Wunsch aus dem Browser. Themes als CSS-Dateien, wählbar auch über die Subdomain.

• Kestrel, IIS oder Reverse-Proxy

  Selbst gehostet mit Kestrel oder hinter IIS; Basispfad und X-Forwarded-Header werden berücksichtigt. Sitzungen ganz ohne Cookies.

1. 1

   Projekt anlegen, Paket hinzufügen

   Ein leeres Web-Projekt anlegen und das NuGet-Paket IctBaden.Stonehenge4 hinzufügen. Damit die Views mit ausgeliefert werden, kommt der Ordner app in die Projektdatei.

   Terminal*.csproj

   Terminal

   dotnet new web -n HalloStonehenge
   cd HalloStonehenge
   dotnet add package IctBaden.Stonehenge4

   *.csproj

   <ItemGroup>
     <Content Include="app\**\*">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
     </Content>
   </ItemGroup>

2. 2

   Server starten

   Program.cs wählt Vue.js als Client-Framework und Kestrel als Host. HostWindow öffnet die Anwendung als Desktop-Fenster; für den Betrieb als Web-Server wartet das Programm stattdessen auf Strg+C.

   Program.cs

   using IctBaden.Stonehenge.Hosting;
   using IctBaden.Stonehenge.Kestrel;
   using IctBaden.Stonehenge.Resources;
   using IctBaden.Stonehenge.Vue;
   
   using var loggerFactory = LoggerFactory.Create(b => b.AddConsole());
   var logger = loggerFactory.CreateLogger("stonehenge");
   
   var options = new StonehengeHostOptions
   {
       Title = "Hallo Stonehenge",
       ServerPushMode = ServerPushModes.ServerSentEvents
   };
   
   var vue = new VueResourceProvider(logger);
   var loader = StonehengeResourceLoader.CreateDefaultLoader(logger, vue);
   var host = new KestrelHost(loader, options);
   if (!host.Start("localhost", 32000)) return 1;
   
   // Als Desktop-Anwendung: eigenes Fenster, Ende beim Schließen
   using var window = new HostWindow(logger, host.BaseUrl, options.Title);
   window.Open();
   
   host.Terminate();
   return 0;

3. 3

   View und ViewModel schreiben

   Zur View app/start.html gehört per Konvention die Klasse StartVm. Danach dotnet run – die Anwendung läuft unter http://localhost:32000.

   app/start.htmlViewModels/StartVm.cs

   app/start.html

   <!--ViewModel:StartVm-->
   <div>
       <p>Hallo von {{ComputerName}}!</p>
       <p>Geklickt: {{CountPressed}}</p>
   
       <button class="btn btn-primary"
               @click="ButtonPressed()">
           Klick mich
       </button>
   </div>

   ViewModels/StartVm.cs

   public class StartVm : ActiveViewModel
   {
       public string ComputerName => Environment.MachineName;
   
       public int CountPressed { get; private set; }
   
       [ActionMethod]
       public void ButtonPressed()
       {
           CountPressed++;
       }
   }

Mehr in der Anleitung „Getting started“ und in der Referenz im Repository. Zur Anleitung (externer Link)