SimpleDashboard.md

Simplest Blazor IOT Dashboard

Recently I was learning Blazor, here is the first taste.

Demo :

Step

1. Create a “Blazor Server Application” project.
2. Named it “BlazorIOTDemo” or whatever you like.
3. Add “MyDataDto.cs” in Data folder.

   public class MyDataDto
   {
       public int Id { get; set; }
       public int Value { get; set; }
   }
   

4. Add “DataService.cs” in Data folder.

   public class DataService
    {
        public DataService()
        {
            this._timer = new Timer(UpdateValues, null, this._updateInterval, this._updateInterval);
        }
   
   
        public event EventHandler<List<MyDataDto>> DataChanged;
   
   
        private Timer _timer;
        private readonly TimeSpan _updateInterval = TimeSpan.FromMilliseconds(1000);
   
   
        private void UpdateValues(object state)
        {
            var myDataDtos = new List<MyDataDto>
            {
               new MyDataDto() { Id = 1, Value = new Random().Next(1, 80) },
               new MyDataDto() { Id = 2, Value = new Random().Next(10, 80) },
               new MyDataDto() { Id = 3, Value = new Random().Next(20, 80) },
               new MyDataDto() { Id = 4, Value = new Random().Next(30, 80) },
               new MyDataDto() { Id = 5, Value = new Random().Next(40, 80) },
               new MyDataDto() { Id = 6, Value = new Random().Next(50, 80) },
               new MyDataDto() { Id = 7, Value = new Random().Next(60, 80) }
            };
   
   
            DataChanged?.Invoke(this, myDataDtos);
        }
    }
   

5. Configure service in "Startup.cs"

   It’ll be better to use interface.

   services.AddSingleton<DataService>();
   

6. Alter the content in “Index.razor” to this

Project structure: