نمایش پیام هشدار در Blazor با استفاده از کامپوننت Alert بوت استرپ ۵
اندازه‌ی قلم متن
تخمین مدت زمان مطالعه‌ی مطلب: چهار دقیقه

بر اساس آموزش مدیریت حالت در 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);
    }
این کامپوننت‌ها هم الزاما در یک سلسله مراتب قرار ندارند و ارسال پارامترهای آبشاری به آن‌ها صدق نمی‌کند. به همین جهت یک سرویس Scoped را طراحی کرده‌ایم که در برنامه‌های Blazor WASM، طول عمر آن، با طول عمر برنامه یکی است؛ یعنی به صورت Singleton عمل می‌کند و در تمام کامپوننت‌ها و سرویس‌های دیگر نیز در دسترس خواهد بود. زمانیکه متد AlertService.ShowAlert فراخوانی می‌شود، سبب بروز رویداد OnChange خواهد شد و تمام گوش دهندگان به آن که در اینجا تنها کامپوننت Alert سفارشی ما است (برای مثال آن‌را در MainLayout.razor قرار می‌دهیم )، مطلع شده و بلافاصله محتوایی را نمایش می‌دهند.

کدهای کامپوننت 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>
و سپس با تزریق AlertService در کامپوننت مورد نظر (که محل آن مهم نیست) و اجرای متد ShowAlert آن به‌همراه پارامترهای آن، پیام هشداری را که توسط MainLayout نمایش داده می‌شود، مشاهده خواهیم کرد.

دریافت کدهای کامل برنامه:  BlazorBootstrapAlert.zip
  • #
    ‫۳ سال و ۳ ماه قبل، شنبه ۲۵ اردیبهشت ۱۴۰۰، ساعت ۱۶:۴۱
    روش دوم پیاده سازی این مثال: ارسال یک کامپوننت محصور کننده‌ی سراسری، به صورت پارامتر آبشاری، به تمام زیر کامپوننت‌ها

    با استفاده از پارامترهای آبشاری می‌توان شیءای را در اختیار تمام کامپوننت‌های قرار گرفته شده‌ی در سلسله مراتب آن‌ها قرار داد. برای مثال اگر در فایل Client\Shared\MainLayout.razor، جائیکه سایر کامپوننت‌ها قرار است رندر شوند را توسط یک کامپوننت سطح بالا محصور کنیم:
    <Alert>
      @Body
    </Alert>
    در این حالت هر کامپوننتی که بجای Body درج شود، می‌تواند به پارامترهای آبشاری Alert دسترسی پیدا کند؛ یعنی تمام کامپوننت‌های نمایشی برنامه. یا حتی می‌توان این Alert را در فایل Client\App.razor نیز در بالاترین سطح قرار داد و کل Router را توسط آن محصور کرد.
    بنابراین طراحی ساده‌ی کامپوننت Alert ای (Client\Shared\Alert.razor) که تامین کننده‌ی یک پارامتر آبشاری سراسری است، به صورت زیر می‌تواند باشد:
    <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">&times;</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;
        }
    }
    که البته در همان پوشه به همراه فایل Client\Shared\AlertType.cs نیز هست:
    namespace BlazorWasmAlert.Client.Shared
    {
        public enum AlertType
        {
            Success,
            Info,
            Danger,
            Warning
        }
    }
    در کامپوننت ویژه‌ی Alert، دو قابلیت استاندارد Blazor بکار گرفته شده‌اند:
    الف) وجود یک CascadingValue که اینبار Value آن به خود کامپوننت اشاره می‌کند (Value=this). یعنی پارامتر آبشاری که در اختیار سایر کامپوننت‌های محصور شده‌ی توسط آن ارسال می‌شود، دقیقا وهله‌ای از کامپوننت Alert است که توسط آن می‌توان برای مثال، متد عمومی ShowAlert آن‌را فراخوانی کرد:
    <CascadingValue Value=this>
    ب) چون کامپوننت Alert قرار است کامپوننت‌هایی را که بجای body@ درج می‌شوند را نمایش دهد، اینکار را توسط یک RenderFragment انجام داده‌است.


    پس از درج این کامپوننت در فایل layout، روش استفاده‌ی از آن برای مثال در کامپوننت Index به صورت زیر است:
    @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);
        }
    }
    در اینجا پارامتر آبشاری که دریافت می‌شود، دقیقا به کلاس و شیء Alert (وهله‌ای از کامپوننت Alert) اشاره می‌کند. به همین جهت می‌توان متد عمومی ShowAlert آن‌را در اینجا فراخوانی کرد.


    پ.ن.
    در طراحی Blazor، از طراحی React الهام گرفته شده‌است و CascadingValue آن دقیقا معادل Context API جدید React است.
    • #
      ‫۲ سال و ۹ ماه قبل، پنجشنبه ۲۰ آبان ۱۴۰۰، ساعت ۱۴:۴۳
      معرفی کامپوننت Error Boundaries در Blazor 6x

      شبیه به کامپوننت Alert ای که در اینجا ملاحظه می‌کنید و امکان دسترسی به آن توسط یک CascadingValue در سایر کامپوننت‌ها میسر شده، در Blazor 6x، کامپوننت جدید ErrorBoundary اضافه شده‌است که می‌توان همانند مثال فوق، آن‌را در بالاترین سطح ممکن در فایل MainLayout.razor، جهت محصور سازی Body به صورت زیر معرفی کرد:
      <ErrorBoundary> 
          <ChildContent> 
              @Body 
          </ChildContent> 
          <ErrorContent> 
              <p>Whoa, sorry about that! While we fix this problem, buy some shirts!</p> 
          </ErrorContent> 
      </ErrorBoundary>
      کار آن نمایش خطایی در زمان بروز یک استثنای مدیریت نشده، در کامپوننت‌های ذیل این سلسله مراتب است و قالب ErrorContent آن، امکان سفارشی سازی پیامی را جهت نمایش به کاربر میسر می‌کند. اگر از این قالب استفاده نشود، فقط پیام «An error has occurred» نمایش داده خواهد شد. بنابراین دیگر بروز استثناءها، سبب خاتمه‌ی کل برنامه و نیاز به ری‌استارت آن نمی‌شوند.

      روش دسترسی به اصل استثناء: قالب محتوای آن به صورت جنریک، یعنی <RenderFragment<Exception تعریف شده‌است. بنابراین می‌توان به اصل استثنای رخ داده به صورت زیر دسترسی یافت:
      <ErrorContent Context="exception"> 
        @exception
      </ErrorContent>

      روش پاک کردن استثنای نمایش داده شده: اطلاعات نمایش داده شده چون در بالاترین سطح (در layout برنامه) رندر می‌شوند، تا زمانیکه مرورگر باز است به همان نحو باقی می‌مانند و تغییر نمی‌کنند. البته خود این کامپوننت به همراه خاصیت MaximumErrorCount است که به صورت پیش‌فرض به 100 تنظیم شده‌است و پس از وقوع 100 استثناء، ریست می‌شود. اگر می‌خواهید این ریست، پس از هدایت به صفحات دیگر صورت گیرد و در صفحه‌ی جدید، خطای صفحه‌ی قبلی را مشاهده نکنید، خودتان باید به صورت دستی آن‌را ریست کنید:
      <ErrorBoundary @ref="errorBoundary">
          @Body
      </ErrorBoundary>
      
      @code {
          ErrorBoundary errorBoundary;
          protected override void OnParametersSet()
          {
              // On each page navigation, reset any error state
              errorBoundary?.Recover();
          }
      }
      در اینجا با استفاده از یک ref@، به وهله‌ای از کامپوننت، دسترسی یافته و سپس می‌توان متد Recover آن‌را جهت پاک کردن سابقه‌ی استثناءهای رخ داده فراخوانی کرد.


      پ.ن.
      این کامپوننت جدید از امکان مشابهی در React ایده گرفته شده‌است.