نمایش پیام هشدار در Blazor با استفاده از کامپوننت Alert بوت استرپ ۵
نویسنده: ع ابراهیمی
تاریخ: ۱۴۰۰/۰۲/۲۲ ۲۲:۳۰
آدرس: www.dntips.ir
| مطالب | ۳۶۹۴ |
| نویسندگان | ۲۷۶ |
| گروههای مطالب | ۱۰۲۴ |
| نقشههای راه | ۱۱۹ |
| دورهها | ۱۴ |
| اشتراکها | ۱۷۹۱۴ |
بر اساس آموزش مدیریت حالت در Blazor، قصد داریم یک سرویس پیام هشدار ساده، ولی زیبا را بوسیله کامپوننت Alert بوت استرپ ۵ ، بدون استفاده از توابع جاوا اسکریپتی، طراحی کنیم.
در ابتدا کتابخانههای css زیر را بوسیله LibMan به پروژه اضافه کرده و مداخل فایلهای را css نیز اضافه میکنیم:
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
{
"provider": "unpkg",
"library": "bootstrap@5.0.0",
"destination": "wwwroot/lib/bootstrap"
},
{
"provider": "unpkg",
"library": "open-iconic@1.1.1",
"destination": "wwwroot/lib/open-iconic"
},
{
"provider": "unpkg",
"library": "animate.css@4.1.1",
"destination": "wwwroot/lib/animate"
},
{
"provider": "unpkg",
"library": "bootstrap-icons@1.5.0",
"destination": "wwwroot/lib/bootstrap-icons/"
}
]
} public enum AlertType
{
Success,
Info,
Danger,
Warning
}
public class AlertService
{
public void ShowAlert(string message, AlertType alertType, string animate = "animate__fadeIn")
{
OnChange?.Invoke(message, alertType,animate);
}
public event Action<string,AlertType, string> OnChange;
} services.AddScoped<AlertService>();
توضیحات:
در کدهای نهایی برنامه قرار است به این نحو کار نمایش Alertها را در کامپوننتهای مختلف انجام دهیم:
@inject AlertService AlertService
@code {
private void Success()
{
AlertService.ShowAlert("Success!", AlertType.Success);
} کدهای کامپوننت Alert.razor
@inject AlertService AlertService
@implements IDisposable
<style>
.alert-show {
display: flex;
flex-direction: row;
}
.alert-hide {
display: none;
}
</style>
<div style="z-index: 5">
<div " + "alert-show" :"alert-hide")">
<i width="24" height="24"></i>
<div>
@Message
</div>
<button type="button" data-bs-dismiss="alert" aria-label="Close" @onclick="CloseClick"></button>
</div>
</div>
@code {
AlertType AlertType { get; set; }
string Icon { get; set; }
string Css { get; set; }
string Animation { get; set; }
private bool IsVisible { get; set; }
private string Message { get; set; }
System.Timers.Timer _alertTimeOutTimer;
protected override void OnInitialized()
{
AlertService.OnChange += ShowAlert;
}
private void ShowAlert(string message, AlertType alertType, string animate)
{
_alertTimeOutTimer = new System.Timers.Timer
{
Interval = 5000,
Enabled = true,
AutoReset = false
};
_alertTimeOutTimer.Elapsed += HideAlert;
Message = message;
switch (alertType)
{
case AlertType.Success:
Css = "bg-success";
Icon = "bi-check-circle";
break;
case AlertType.Info:
Css = "bg-info";
Icon = "bi-info-circle-fill";
break;
case AlertType.Danger:
Css = "bg-danger";
Icon = "bi-exclamation-circle";
break;
case AlertType.Warning:
Css = "bg-warning";
Icon = "bi-exclamation-triangle-fill";
break;
default:
Css = Css;
break;
}
AlertType = alertType;
Animation = animate;
IsVisible = true;
InvokeAsync(StateHasChanged);
}
private void HideAlert(Object source, System.Timers.ElapsedEventArgs e)
{
IsVisible = false;
InvokeAsync(StateHasChanged);
_alertTimeOutTimer.Close();
}
public void Dispose()
{
if (AlertService != null) AlertService.OnChange -= ShowAlert;
if (_alertTimeOutTimer != null)
{
_alertTimeOutTimer.Elapsed -= HideAlert;
_alertTimeOutTimer?.Dispose();
}
}
private void CloseClick()
{
IsVisible = false;
_alertTimeOutTimer.Close();
InvokeAsync(StateHasChanged);
}
} <div>
<Alert></Alert> <Alert> @Body </Alert>
<CascadingValue Value=this>
@if(IsVisible)
{
<div class="alert @Css" role="alert">
@Message
<button type="button" class="close" data-dismiss="alert" aria-label="Close" @onclick="HideAlert">
<span aria-hidden="true">×</span>
</button>
</div>
}
@ChildContent
</CascadingValue>
@code {
[Parameter]
public RenderFragment ChildContent { get; set; }
private bool IsVisible;
private string Message;
private string Css = "alert-primary";
public void ShowAlert(string message, AlertType alertType)
{
IsVisible = true;
Message = message;
Css = alertType switch
{
AlertType.Success => "alert-success",
AlertType.Info => "alert-primary",
AlertType.Danger => "alert-danger",
AlertType.Warning => "alert-warning",
_ => "alert-primary"
};
StateHasChanged();
}
public void HideAlert()
{
IsVisible = false;
}
} namespace BlazorWasmAlert.Client.Shared
{
public enum AlertType
{
Success,
Info,
Danger,
Warning
}
} <CascadingValue Value=this>
@page "/"
<h1>Hello, world!</h1>
<button class="btn btn-primary" @onclick="ShowAlert">Show Alert!</button>
@code
{
[CascadingParameter]
public Alert Alert { get; set; }
private void ShowAlert()
{
Alert.ShowAlert("This is a test!", AlertType.Info);
}
} <ErrorBoundary>
<ChildContent>
@Body
</ChildContent>
<ErrorContent>
<p>Whoa, sorry about that! While we fix this problem, buy some shirts!</p>
</ErrorContent>
</ErrorBoundary> <ErrorContent Context="exception"> @exception </ErrorContent>
<ErrorBoundary @ref="errorBoundary">
@Body
</ErrorBoundary>
@code {
ErrorBoundary errorBoundary;
protected override void OnParametersSet()
{
// On each page navigation, reset any error state
errorBoundary?.Recover();
}
}