10.13.2021

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:

沒有留言:

張貼留言