Blazor | Remove dynamically added Message RSS

• • Reply
  fazioliamboi...

  Member

  5 Points

  159 Posts

  Blazor | Remove dynamically added Message

  Jul 17, 2020 03:51 PM|fazioliamboina|LINK

  with blazer, i can loop trough a collection of Messages, and then print them to the screen. no problem.

  if i was going to Remove 1 message, by having a  "X" delete button in every message. how do i get blazor to know which message to remove?

  @page "/Chat"
  <h1>Chat</h1>
  <input type="text" maxlength="32" @bind="@WrittenMessage" />
  <button class="btn btn-primary" @onclick="Send">Send</button>
  
  
  <ul>
      @foreach (var item in Messages)
      {
          <li>
              @item.Body <input type="text" />
          </li>
      }
  </ul>
  @code {
      //chat
      public static string WrittenMessage;
      public static List<Message> Messages = new List<Message>();
  
      public class Message { public string Body; }
  
      private void Send() { Messages.Add(new Message() { Body = WrittenMessage }); }
  
      //This code makes sure that the messages are constantly updating
      public async void StartTimerAsync()
      {
          while (true)
          {
              this.StateHasChanged();
              await Task.Delay(1);
          }
      }
  
      protected override void OnInitialized() => StartTimerAsync();
  }
  

• • Reply
  Bradly

  Member

  41 Points

  129 Posts

  Re: Blazor | Remove dynamically added Message

  Jul 19, 2020 05:31 PM|Bradly|LINK

  You can do it like this

  @page "/Chat"
  <h1>Chat</h1>
  <input type="text" maxlength="32" @bind="@WrittenMessage" />
  <button class="btn btn-primary" @onclick="Send">Send</button>
  
  
  <ul>
      @foreach (var item in Messages)
      {
          <li>
              @item.Body <button class="btn btn-sm" id="@item.ChatId" @onclick="@(e => Delete(item.ChatId))">Delete</button>
          </li>
      }
  </ul>
  @code {
      //chat
      private int currentCount = 0;
      public static string WrittenMessage;
      public static List<Message>
      Messages = new List<Message>
          ();
  
      public class Message { public string Body; public int ChatId; }
  
      private void Send() { Messages.Add(new Message() { Body = WrittenMessage, ChatId = currentCount }); currentCount++; }
      private void Delete(int ChatId)
      {
          Messages.Remove(Messages.Where(Message => Message.ChatId == ChatId).First());
      }
  
      //This code makes sure that the messages are constantly updating
      public async void StartTimerAsync()
      {
          while (true)
          {
              this.StateHasChanged();
              await Task.Delay(1);
          }
      }
  
      protected override void OnInitialized() => StartTimerAsync();
  }
  

• • Reply
  Bradly

  Member

  41 Points

  129 Posts

  Re: Blazor | Remove dynamically added Message

  Jul 27, 2020 09:04 AM|Bradly|LINK

  Hi Fazio, i was wondering if my answer did help you ?

  Br, Bradly

• • Reply
  lxman

  None

  0 Points

  1 Post

  Re: Blazor | Remove dynamically added Message

  Jul 28, 2020 08:00 AM|lxman|LINK

  Try this:

  <h1>Chat</h1>
  <input type="text" maxlength="32" @bind="@WrittenMessage" />
  <button class="btn btn-primary" @onclick="Send">Send</button>
  
  
  <ul>
      @foreach (var item in Messages)
      {
          <li>
              @item.Body <button class="btn btn-sm" id="@item.ChatId" @onclick="@(e => Delete(item.ChatId))">Delete</button>
          </li>
      }
  </ul>
  @code {
      //chat
      private int currentCount = 0;
      public static string WrittenMessage;
      public static List<Message>
      Messages = new List<Message>();
  
      public class Message
      {
          public string Body;
          public int ChatId;
      }
  
      private void Send()
      {
          Messages.Add(new Message() { Body = WrittenMessage, ChatId = currentCount });
          currentCount++;
      }
  
      private void Delete(int ChatId)
      {
          Messages.Remove(Messages.Where(Message => Message.ChatId == ChatId).First());
      }
  }