Skip to content

Web DOM with the Built in Web Server

Frank A. Krueger edited this page Mar 14, 2018 · 1 revision

1. Create a new app

dotnet new console

2. Reference Ooui

dotnet add package Ooui

3. Write an app

Edit Program.cs to be:

using System;
using Ooui;

namespace CounterApp
{
    class Program
    {
        static void Main(string[] args)
        {
            UI.Publish ("/counter", CreateCounter);

            Console.ReadLine ();
        }
        static Element CreateCounter ()
        {
            var count = 0;
            var countLabel = new Span(count.ToString());
            var upButton = new Button("Increase");
            var downButton = new Button("Decrease");

            var counter =
                new Div(new Div(upButton),
                        new Div(countLabel),
                        new Div(downButton));

            void ChangeCount(int amount) {
                count += amount;
                countLabel.Text = count.ToString();
            }
            upButton.Click += (s, e) => ChangeCount(1);
            downButton.Click += (s, e) => ChangeCount(-1);

            return counter;
        }
    }
}

This is a simple web app with one page /counter that contains two button to increase and decrease the displayed count.

4. Run the app

dotnet run

The web server will run and use port 8080 by default.

To use the app, open http:https://localhost:8080/counter