How do I display a custom bootstrap alert from backend in blazor server

Question

Hi,

In my Blazor Server App, I want to display any kind of success alert after saving it into the database. How can I do this with the bootstrap alert in the example below? (Similarly, the error message may be.)

async Task SaveRow(Order? order)  
    {  
        if (order == _orderToInsert)  
        {  
            _orderToInsert = null;  
        }  
  
        await _grid.UpdateRow(order);  
  
        _orders = await ViewAllOrdersUseCase.ExecuteAsync();  
       StateHasChanged();  
    }  

Answer 1

on the view that define the alerts use an if with a component variable.

@code {     
    [Parameter]     
    public bool DisplayAlert { get; set; }     
}     
   
   
   
   
@if (DisplayAlert) {   
    <div class="alert alert-success fade-in" role="alert">   
      This is a success alert—check it out!   
    </div>   
}   
   

   


   

Answer 2

Basic Example.

@page "/alert"  
  
<h3>Bootstrap Alert Example</h3>  
  
<div>  
    <button @onclick="@DoSomthing">Show/Hide</button>  
</div>  
  
<div class="alert alert-primary @HideAlert" role="alert" >  
  @AlertContent  
</div>  
  
@code {  
    private string HideAlert {get; set;} = "d-none";  
    private string AlertContent { get; set; } = "This is a primary alert—check it out!";  
    private void DoSomthing()  
    {  
        if (HideAlert == "")  
        {  
            HideAlert = "d-none";  
            AlertContent = "This is a primary alert—check it out!";  
        }  
        else  
        {  
            HideAlert = "";  
            AlertContent = "Hello World";  
        }     
    }    
}  

Going forward, share the code you've tried.