بر اساس آموزش مدیریت حالتدر 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/"
}
]
}در ادامه کلاس سرویس پیام را پیاده سازی و آن‌را با طول عمر Scopedبه سیستم
تزریق وابستگی‌های برنامه، معرفی میکنیم:
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);
}
}همانطور که مشاهده می‌کنید، کامپوننت Alert، از سرویس تزریق شده‌ی AlertServiceاستفاده می‌کند. بنابراین در هرجائی از برنامه که AlertService.ShowAlertفراخوانی شود، سبب بروز رویداد OnChange شده و به این ترتیب کامپوننت فوق، Alert ای را نمایش می‌دهد که البته نمایش آن به همراه یک Timeout و محو شدن خودکار نیز هست.برای استفاده از کامپوننت Alert.razor، آن‌را در صفحه اصلی MainLayout یا هرجای دلخواهی قرار می‌دهیم:
<div><Alert></Alert>
دریافت کدهای کامل برنامه: BlazorBootstrapAlert.zip