Web user interfaces for .NET applications – with just C# and HTML

• One code base for desktop and web

  The application opens in its own window of an installed browser – Chrome, Edge, Brave, Firefox or Safari – or runs as a web server for many users.

• No hand-written API

  Public properties and methods marked with [ActionMethod] are bound to the view automatically. No REST controller, no client proxy, no JSON mapping.

• Live updates from the server

  Server-sent events or polling: when a value in the view model changes, the browser shows it at once. An update timer delivers readings and status at a steady pace.

• Authentication built in

  Basic auth with an .htpasswd file (bcrypt, Apache MD5, SHA), NTLM on Windows and Keycloak – each with a single host option.

• Multilingual, with themes

  Texts from .resx resources, the language taken from the browser if you like. Themes as CSS files, selectable via the subdomain as well.

• Kestrel, IIS or reverse proxy

  Self-hosted with Kestrel or behind IIS; the base path and X-Forwarded headers are respected. Sessions without any cookies.

1. 1

   Create the project, add the package

   Create an empty web project and add the NuGet package IctBaden.Stonehenge4. To ship the views with the application, add the app folder to the project file.

   Terminal*.csproj

   Terminal

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

   *.csproj

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

2. 2

   Start the server

   Program.cs picks Vue.js as the client framework and Kestrel as the host. HostWindow opens the application as a desktop window; to run it as a web server, the program waits for Ctrl+C instead.

   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 = "Hello 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;
   
   // As a desktop app: own window, exits when closed
   using var window = new HostWindow(logger, host.BaseUrl, options.Title);
   window.Open();
   
   host.Terminate();
   return 0;

3. 3

   Write the view and the view model

   By convention the view app/start.html belongs to the class StartVm. Then dotnet run – the application is available at http://localhost:32000.

   app/start.htmlViewModels/StartVm.cs

   app/start.html

   <!--ViewModel:StartVm-->
   <div>
       <p>Hello from {{ComputerName}}!</p>
       <p>Clicked: {{CountPressed}}</p>
   
       <button class="btn btn-primary"
               @click="ButtonPressed()">
           Click me
       </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++;
       }
   }

More in the “Getting started” guide and the reference in the repository. Read the guide (external link)