Beranda>Kode sumber ASP>Kategori lainnya
Unduh

Rambo.blazor.userfeedback

Ramboe UserFeedBack - Perpustakaan Blazor untuk menunjukkan pemintal, kesalahan dan pesan keberhasilan selama panggilan metode asinkron. Kerangka kerja ini menyederhanakan penanganan pembaruan UI asinkron, yang memungkinkan pengembang untuk fokus pada logika inti mereka dan memberikan pengalaman pengguna yang mulus.

Dengan API yang mudah digunakan, perpustakaan ini membuatnya mudah untuk menampilkan pemintal, pesan kesalahan, dan pesan sukses untuk panggilan metode asinkron. Beri pengguna Anda umpan balik yang mereka butuhkan, tanpa mengorbankan kesederhanaan atau kinerja.

Tambahkan Paket Nuget ke proyek Blazor Server / WASM Anda 

 dotnet add package Ramboe.Blazor.UserFeedback --version 1.0.0

Fungsionalitas

Fungsi dasarnya adalah menampilkan pemintal saat fungsi dieksekusi

dan menampilkan pengecualian apa pun yang mungkin terjadi (UI tetap responsif)

Anda juga dapat menampilkan pesan pemuatan di bawah pemintal

dan secara opsional menampilkan pesan sukses (misalnya untuk posting HTTP yang berhasil)

Anatomi

Area

Pertama -tama buat komponen Anda mewarisi dari trywrapper

Kemudian bungkus umpan balik di sekitar markup HTML yang ingin Anda sembunyikan saat pemintal aktif

Kode komponen harus terlihat seperti ini 

@inherits Ramboe.Blazor.UserFeedback.ComponentBaseExtensions.TryWrapper

< FeedbackArea Target =" DefaultTarget " >
    < table class =" table " >
        < thead >
        < tr >
            < th > Date </ th >
            < th > Temp. (C) </ th >
            < th > Temp. (F) </ th >
            < th > Summary </ th >
        </ tr >
        </ thead >
        < tbody >
        @foreach (var forecast in forecasts)
        {
            < tr >
                < td > @forecast.Date.ToShortDateString() </ td >
                < td > @forecast.TemperatureC </ td >
                < td > @forecast.TemperatureF </ td >
                < td > @forecast.Summary </ td >
            </ tr >
        }
        </ tbody >
    </ table >
</ FeedbackArea >

FeedbackArea mengambil beberapa parameter jika Anda perlu menyesuaikan pemintal untuk area tertentu dalam aplikasi Anda

Target

Untuk menentukan area mana yang harus diputar saat kami menjalankan hal -hal, kami perlu melampirkan target umpan balik padanya, yang bertanggung jawab untuk memegang keadaan area umpan balik (pemintal aktif, pesan keberhasilan yang ditampilkan, dll.)

Karena kami mewarisi dari TryWrapper, kami selalu mendapatkan setidaknya satu target yang dapat kami gunakan, DefaultTarget

Jika Anda membutuhkan lebih banyak target, cukup tambahkan ke komponen Anda (jangan lupa untuk menginisialisasi dengan "baru ()")

Penggunaan

Mengatur konfigurasi saat startup

Area umpan balik perlu dikonfigurasi saat startup. Anda dapat menggunakan metode addstandardfeedbackareas ()

yang menerapkan konfigurasi berikut

  • SpinnersizeMode = SpinnersizeMode. VH5 ,

  • Colormode = colormode. Utama ,

  • SpinnerType = spinnerType. Borderspinner

Anda juga dapat menggunakan API lancar yang datang bersama dengan addandConfigureFeedBackAreas () jika Anda ingin mengonfigurasi penataannya sendiri

Withcolor () juga memiliki kelebihan beban yang berfungsi dengan colormode enum

Mengkonfigurasi pemintal

Atribut berikut dapat dikonfigurasi: ukuran, warna, jenis

Ukuran: dikonfigurasi melalui spinnersizeMode enum, yang berkisar dari VH2 - VH90

Warna: Dikonfigurasi melalui spinnerColormode enum, yang mewakili kategori warna yang datang dengan bootstrap (primer, sekunder, kesuksesan, ...)

Jenis: Dikonfigurasi melalui spinnertypeMode enum, yang saat ini contais spinner-border dan spinner-grow

Ingat: parameter override startup config

Parameter apa pun yang diteruskan langsung ke umpan balik akan mengganti konfigurasi yang dilakukan di Program.cs. Misalnya, pengaturan mode warna "primer" pada umpan balik #2 ...

Hasil dalam warna pemintal feedbackareas diatur ke "primer", sedangkan umpan balik #1 hanya mengambil konfigurasi startup:

Akhirnya: membuatnya berputar

Ini bekerja dengan cara yang sama seperti EventCallbacks. Jika Anda ingin pemintalan pemintal saat metode tertentu dieksekusi, 2 langkah diperlukan:

  1. menyatakan metode seperti biasa 
    async Task < List < WeatherForecast > > LoadData ( )
    {
        // simulate waiting for an api, so we can actually see the spinner spinning
        await Task . Delay ( 2000 ) ;

        return await ForecastService . GetForecastAsync ( DateOnly . FromDateTime ( DateTime . Now ) ) ;
    }
  1. Lewati metode Anda dan target sesuai hanya ke salah satu dari "tryasync" yang berlebihan 
  protected override async Task OnInitializedAsync ( )
    {
        forecasts = await TryAsync ( LoadData , DefaultTarget ) ;

        forecasts = await TryAsync ( LoadData , DefaultTarget , "loading with loading message but without success message" ) ;

        forecasts = await TryAsync ( LoadData , DefaultTarget , "loading with success message" , "updating data successful" ) ;
                
    }

Anda juga dapat menggunakan salah satu metode eksplisit 

  protected override async Task OnInitializedAsync ( )
    {        
        // those to methods do the same thing

        forecasts = await TryAsync ( LoadData , DefaultTarget , "loading with success message" , "updating data successful" ) ;
    
        forecasts = await TryWithLoadingAndSuccessMessageAsync ( LoadData , DefaultTarget , "loading with success message, explicit" , "updating data successful" )
    }

Karena bekerja dengan cara yang sama seperti EventCallbacks, Anda sudah tahu bahwa Anda memerlukan ekspresi lambda untuk metode yang mengambil parameter: 

  protected override async Task OnInitializedAsync ( )
    {        
        await LambdaExample ( ) ;
    }

  async Task LambdaExample ( )
    {
        await Task . Delay ( 2000 ) ;

        forecasts = await TryAsync (
            ( ) => ForecastService . GetForecastAsync ( DateOnly . FromDateTime ( DateTime . Now ) ) ,
            DefaultTarget ,
            "loading, lambda" ,
            "lambda successfull"
        ) ;
    }

Ringkasan

Konfigurasikan umpan balik pada startup: 

 builder . Services . AddAndConfigureFeedbackAreas ( )
       . WithSize ( SpinnerSizeMode . Vh5 )
       . WithType ( SpinnerTypeMode . BorderSpinner )
       . WithColor ( SpinnerColorMode . Secondary )
    . ConfigureFeedbackAreas ( ) ;

Mewarisi dari trywrapper dan membungkus umpan balik (termasuk target) di sekitar konten Anda 

@inherits Ramboe.Blazor.UserFeedback.ComponentBaseExtensions.TryWrapper

< FeedbackArea Target =" DefaultTarget " >
    @*Content here*@
</ FeedbackArea >

Anda dapat menggunakan berbagai kelebihan beban .. 

 forecasts = await TryAsync ( LoadData , DefaultTarget ) ;

forecasts = await TryAsync ( LoadData , DefaultTarget , "loading with loading message but without success message" ) ;

forecasts = await TryAsync ( LoadData , DefaultTarget , "loading with success message" , "updating data successful" ) ;

... atau eksplisit 

  protected override async Task OnInitializedAsync ( )
    {
        forecasts = await TryWithLoadingAndSuccessMessageAsync ( LoadData , DefaultTarget , "loading with success message, explicit" , "updating data successful" )
              
    }

Metode diteruskan ke umpan balik sebagai delegasi, yang berarti ekspresi Lambda diperlukan saat bekerja dengan parameter (seperti di EventCallbacks).

Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua