หน้าแรก>ซอร์สโค้ด ASP>หมวดหมู่อื่นๆ
ดาวน์โหลด

ramboe.blazor.userfeedback

Ramboe Userfeedback - ไลบรารี Blazor สำหรับการแสดงสปินเนอร์ข้อผิดพลาดและข้อความความสำเร็จในระหว่างการเรียกวิธีการแบบอะซิงโครนัส เฟรมเวิร์กนี้ช่วยลดความซับซ้อนของการจัดการการอัปเดต UI แบบอะซิงโครนัสทำให้นักพัฒนาสามารถมุ่งเน้นไปที่ตรรกะหลักของพวกเขาและมอบประสบการณ์การใช้งานที่ไร้รอยต่อ

ด้วย API ที่ใช้งานง่ายไลบรารีนี้ทำให้ง่ายต่อการแสดงสปินเนอร์ข้อความแสดงข้อผิดพลาดและข้อความความสำเร็จสำหรับการเรียกวิธีการแบบอะซิงโครนัส ให้ข้อเสนอแนะแก่ผู้ใช้ที่พวกเขาต้องการโดยไม่ต้องเสียสละความเรียบง่ายหรือประสิทธิภาพ

เพิ่มแพ็คเกจ NUGET ลงในโครงการ Blazor Server / WASM ของคุณ 

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

ฟังก์ชั่น

ฟังก์ชั่นพื้นฐานคือการแสดงสปินเนอร์ในขณะที่ฟังก์ชั่นถูกเรียกใช้งาน

และแสดงข้อยกเว้นใด ๆ ที่อาจเกิดขึ้น (UI ยังคงตอบสนองอยู่)

คุณยังสามารถแสดงข้อความการโหลดใต้สปินเนอร์

และเป็นทางเลือกแสดงข้อความความสำเร็จ (เช่นสำหรับโพสต์ HTTP ที่ประสบความสำเร็จ)

กายวิภาคศาสตร์

พื้นที่

ก่อนอื่นทำให้ส่วนประกอบของคุณสืบทอดมาจาก trywrapper

จากนั้นห่อ finectionarea รอบ ๆ มาร์กอัป HTML ที่คุณต้องการซ่อนในขณะที่สปินเนอร์ทำงานอยู่

รหัสขององค์ประกอบควรมีลักษณะเช่นนี้ 

@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 >

FeedthoutArea ใช้พารามิเตอร์หลายอย่างหากคุณต้องการปรับแต่งสปินเนอร์สำหรับพื้นที่บางอย่างภายในแอปพลิเคชันของคุณ

เป้าหมาย

ในการพิจารณาว่าพื้นที่ใดที่จะหมุนในขณะที่เรากำลังดำเนินการสิ่งต่าง ๆ เราจำเป็นต้องแนบข้อเสนอแนะเป้าหมายเข้ากับมันซึ่งรับผิดชอบในการถือสถานะของพื้นที่ป้อนกลับ (สปินเนอร์ใช้งานได้

เนื่องจากเราสืบทอดมาจาก trywrapper เราจึงได้รับเป้าหมายอย่างน้อยหนึ่งเป้าหมายที่เราสามารถใช้ได้

หากคุณต้องการเป้าหมายเพิ่มเติมเพียงเพิ่มลงในส่วนประกอบของคุณ (อย่าลืมเริ่มต้นด้วย "ใหม่ ()")

การใช้งาน

การตั้งค่าการกำหนดค่าเมื่อเริ่มต้น

จำเป็นต้องกำหนดค่าพื้นที่ตอบรับเมื่อเริ่มต้น คุณสามารถใช้เมธอด addstandardfeedbackareas ()

ซึ่งใช้การกำหนดค่าต่อไปนี้

  • SpinnersizeMode = SpinnersizeMode VH5

  • colormode = colormode หลัก ,

  • SpinnerType = SpinnerType ชายแดน

นอกจากนี้คุณยังสามารถใช้ API ที่คล่องแคล่วซึ่งมาพร้อมกับ AddandConfigureFeedBackareas () หากคุณต้องการกำหนดค่าสไตล์ด้วยตัวคุณเอง

WithColor () ยังมีการโอเวอร์โหลดที่ทำงานกับ colormode enum

การกำหนดค่าสปินเนอร์

แอตทริบิวต์ต่อไปนี้สามารถกำหนดค่าได้: ขนาด, สี, พิมพ์

ขนาด: กำหนดค่าผ่าน enum SpinnersizeMode ซึ่งมีตั้งแต่ VH2 - VH90

สี: กำหนดค่าผ่าน enum spinnercolormode ซึ่งแสดงถึงหมวดหมู่สีที่มาพร้อมกับ bootstrap (หลัก, รอง, ประสบความสำเร็จ, ... )

ประเภท: กำหนดค่าผ่าน spinnertypemode enum ซึ่งปัจจุบัน contais spinner-border และ spinner-grow

ข้อควรจำ: พารามิเตอร์การกำหนดค่าการเริ่มต้นการเริ่มต้น

พารามิเตอร์ใด ๆ ที่ส่งผ่านไปยัง FeedbackArea โดยตรงจะแทนที่การกำหนดค่าใด ๆ ที่ทำใน program.cs ตัวอย่างเช่นการตั้งค่าโหมดสี "หลัก" บน Fitveyarea #2 ...

ผลลัพธ์ในการตั้งค่าสีสปินเนอร์ FeedthoutAreas นั้นถูกตั้งค่าเป็น "หลัก" ในขณะที่ FinectionArea #1 เพียงแค่ใช้การกำหนดค่าเริ่มต้น:

ในที่สุด: ทำให้มันหมุน

มันทำงานเช่นเดียวกับ EventCallbacks หากคุณต้องการหมุนสปินเนอร์ในขณะที่มีการดำเนินการวิธีการบางอย่างจำเป็นต้องมี 2 ขั้นตอน:

  1. ประกาศวิธีการตามปกติ 
    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. ผ่านวิธีการของคุณและเป็นไปตามเป้าหมายเพียงแค่หนึ่งใน "tryasync" overloads 
  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" ) ;
                
    }

นอกจากนี้คุณยังสามารถใช้หนึ่งในวิธีการที่ชัดเจน 

  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" )
    }

เนื่องจากใช้งานได้เช่นเดียวกับ EventCallbacks คุณรู้อยู่แล้วว่าคุณต้องมีนิพจน์แลมบ์ดาสำหรับวิธีการที่ใช้พารามิเตอร์: 

  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"
        ) ;
    }

สรุป

กำหนดค่า finectionAreas เมื่อเริ่มต้น: 

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

สืบทอดมาจาก trywrapper และห่อ feedbackarea (รวมถึงเป้าหมาย) รอบเนื้อหาของคุณ 

@inherits Ramboe.Blazor.UserFeedback.ComponentBaseExtensions.TryWrapper

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

คุณสามารถใช้ overloads ต่างๆได้ .. 

 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" ) ;

... หรือชัดเจน 

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

วิธีการจะถูกส่งผ่านไปยัง FeedbackArea เป็นผู้ได้รับมอบหมายซึ่งหมายถึงการแสดงออกของแลมบ์ดาเมื่อทำงานกับพารามิเตอร์ (เช่นเดียวกับใน EventCallbacks)

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด