如何为 blazor 应用程序中的绑定变量设置后备值？

Posted 2023-02-15

【中文标题】如何为 blazor 应用程序中的绑定变量设置后备值？

【英文标题】：How to set a fallback value for bound variables in blazor application?

【发布时间】：2022-01-14 09:00:33

【问题描述】：

来自 WPF 开发，我正在使用 ASP.NET 和 Blazor，但我在理解以下内容时遇到了一些麻烦： 例如，我想将 CSS 类值绑定到代码隐藏类的属性。

@inherits TextGenerator
<style>
    .mycssclass
    
        opacity: @TextOpacity;
        transition: opacity 2s;
    
</style>
<div class="modal-dialog-centered">
    <h1>@Text</h1>
</div>

这是代码隐藏类的样子：

public class TextGenerator : ComponentBase

    public event Func<Task> OnPropertyChanged;

    private string _text;
    public string Text 
     
        get
        
            return _text;
        
        set
        
            _text = value;
            OnPropertyChanged.Invoke();

        
    

    private float _textOpacity;
    public float TextOpacity
    
        get
        
            return _textOpacity;
        
        set
        
            _textOpacity = value;
            OnPropertyChanged.Invoke();

        
    

    protected async Task StartTextSlideShow()
    
        Text = "";
        TextOpacity = 1.0f;
        for (int i = 0; i < 1000; i++)
        
            Text = "Test #" + i.ToString();
            await Task.Delay(100);
        
    

    protected override void OnInitialized()
    
        OnPropertyChanged += PropertyChange;
        _ = StartTextSlideShow();
    

    public async Task PropertyChange()
    
        await InvokeAsync(() =>
        
            StateHasChanged();
        );
    

我的问题如下：如何设置不透明度的初始值或后备值？例如，在这种情况下，我希望将不透明度初始化为0，这样当我在StartTextSlideShow() 中将其设置为1.0f 时，文本就会淡入。

【问题讨论】：

我删除了我的第一个答案，因为它不正确。问题：是否要启动“幻灯片”并在页面初始化时淡入？如果不是怎么触发呢？

您好抱歉回复晚了，明天我会检查一切并在测试后回答

至于淡入 - 确切地说：我基本上希望页面加载，然后文本淡入。作为最终结果，我想到了一些看起来像在初始 Windows 10 中看到的文本setup （“这可能需要几分钟......”等）。此外，我在背景中有一个视频，它应该会慢慢淡入。如前所述，这只是我玩弄网络内容.. :)

【参考方案1】：

这是一个类似的答案，它会在您的幻灯片中显示并为每张伪图片淡入。

剃刀密码：

@page "/Text"
<style>
    .mycssclass
    
        opacity: @_opacity;
        transition: opacity @_transition;
    
</style>

<div class="modal-dialog-centered mycssclass @_cssClass  p-5">
    <h1 class="">@_text</h1>
</div>

以及背后的代码：

using Microsoft.AspNetCore.Components;
using System.Timers;

namespace ***.Server.Pages

    public partial class TextGenerator : ComponentBase
    
        System.Timers.Timer _timer = new System.Timers.Timer();

        private string _text = "Slide Show Starting";
        private decimal _opacity = 0m;
        private string _transition = "0s";
        private int _counter = 0;

        private int _pictureCount = 5;

        private string _cssClass = "bg-white text-white-500 border border-secondary";

        protected override void OnInitialized()
        
            _opacity = 1m;
            _transition = "2s";
            _timer.Interval = 4000;
            _timer.AutoReset = true;
            _timer.Elapsed += TimerElapsed;
            _timer.Start();
        

        public async void TimerElapsed(Object? sender, System.Timers.ElapsedEventArgs e)
        
            _cssClass = "bg-primary text-white";
            _counter++;
            _opacity = 0m;
            _transition = "0s";
            await this.InvokeAsync(StateHasChanged);
            await Task.Delay(1);
            _text = $"Picture _counter";
            _opacity = 1m;
            _transition = "2s";
            await this.InvokeAsync(StateHasChanged);
            if (_counter >= _pictureCount)
                _timer.Stop();
        
    

【参考方案2】：

我的问题如下：如何设置不透明度的初始值或后备值？例如，在这种情况下，我希望将不透明度初始化为 0，

public float TextOpacity  get; set;  = 0.0f;

这样当我在 StartTextSlideShow() 中将其设置为 1.0f 时

就这样做吧：

public float TextOpacity  get; set;  = 1.0f;

注意：以上是您问题的完整答案...

这是一个代码示例，我将如何使用计时器在 Blazor Server 应用程序中实现您的 TextGenerator。复制并测试...

BlazorTimer.cs

using System.Timers;

public class BlazorTimer
    
        private Timer _timer;

        internal void SetTimer(double interval)
        
            _timer = new Timer(interval);
            _timer.Elapsed += NotifyTimerElapsed;
            _timer.Enabled = true;
            _timer.Start();
        

     private void NotifyTimerElapsed(object sender, ElapsedEventArgs e)
        
            OnElapsed?.Invoke();
        

        public event Action OnElapsed;
     

Startup.ConfigureServices

 public void ConfigureServices(IServiceCollection services)
        
           // Code removed ...

            services.AddTransient(config =>
            
                var blazorTimer = new BlazorTimer();
                blazorTimer.SetTimer(100);
                return blazorTimer;
            );
        

用法： Index.razor

@page "/"
@implements IDisposable

@inject BlazorTimer Timer

<style>
    .mycssclass
    
         opacity: @TextOpacity;
         transition: opacity 2s;
     
</style>
<div class="modal-dialog-centered">
     <h1 class="mycssclass">@Text</h1>
</div>


@code

    private int i = 0;

    protected override void OnInitialized()
    
        Timer.OnElapsed += NotifyTimerElapsed;

        base.OnInitialized();
    

    public string Text  get; set; 
    public float TextOpacity  get; set;  = 1.0f;

    private void NotifyTimerElapsed()
    
        InvokeAsync(() =>
        
           Text = $"Test #i++"; TextOpacity -= TextOpacity / 100; StateHasChanged();
        );
    

    public void Dispose()