- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个小问题,我尝试在我的 Blazor 服务器项目的页面上显示实时数据。在阅读了几篇文章后,我认为这应该可以通过使用 INotifyPropertyChanged 来实现。不幸的是我对此一窍不通,这是我尝试过的:
我使用 INotifyPropertyChanged 的模型价格(使用 Rider 生成):
public class Price : INotifyPropertyChanged
{
private double _askPrice;
private double _bidPrice;
private double _spread;
public Price(double askPrice, double bidPrice)
{
_askPrice = askPrice;
_bidPrice = bidPrice;
}
public double AskPrice {
get => _askPrice;
set
{
_askPrice = value;
OnPropertyChanged("AskPrice");
OnPropertyChanged("Spread");
}
}
public double BidPrice
{
get => _bidPrice;
set
{
_bidPrice = value;
OnPropertyChanged("BidPrice");
OnPropertyChanged("Spread");
}
}
public double Spread => _askPrice - _bidPrice;
public event PropertyChangedEventHandler PropertyChanged;
[NotifyPropertyChangedInvocator]
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
我如何获取实时数据:
public class PriceService
{
public static Price BinancePrice;
public static void StartBinanceStream()
{
var client = new BinanceSocketClient();
// subscribe to updates on the spot API
client.Spot.SubscribeToBookTickerUpdates("BTCEUR", data =>
{
BinancePrice = new Price((double)data.BestAskPrice, (double)data.BestBidPrice);
});
}
}
最后是我的 razorfile 的内容:
<h5>BID: @($"{PriceService.BinancePrice.BidPrice:F2} EUR")</h5>
<h5>ASK: @($"{PriceService.BinancePrice.AskPrice:F2} EUR")</h5>
<h5>Spread: @($"{PriceService.BinancePrice.Spread:F2} EUR")</h5>
@code {
protected override async Task OnInitializedAsync()
{
PriceService.BinancePrice.PropertyChanged += async (sender, e) => { await InvokeAsync(StateHasChanged); };
await base.OnInitializedAsync();
}
async void OnPropertyChangedHandler(object sender, PropertyChangedEventArgs e)
{
await InvokeAsync(StateHasChanged);
}
public void Dispose()
{
PriceService.BinancePrice.PropertyChanged -= OnPropertyChangedHandler;
}
}
它确实显示了数据,但没有实时显示变化,我需要重新打开选项卡或刷新页面才能看到当前数据。目标是每次价格变化时 UI 都会刷新。如果你能帮我解决这个问题,那就太棒了!:)
最佳答案
我无法真正验证问题的根源,尽管在我看来它与 Price 类和 PropertyChangedEventHandler 的调用有关
但是,下面是应该有效的代码示例:
public class Price : INotifyPropertyChanged
{
private double _askPrice;
private double _bidPrice;
private double _spread;
public Price(double askPrice, double bidPrice)
{
_askPrice = askPrice;
_bidPrice = bidPrice;
}
public double AskPrice
{
get => _askPrice;
set => SetProperty(ref _askPrice, value);
}
public double BidPrice
{
get => _bidPrice;
set => SetProperty(ref _bidPrice, value);
}
public double Spread => _askPrice - _bidPrice;
public event PropertyChangedEventHandler PropertyChanged;
void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new
PropertyChangedEventArgs(propertyName));
}
bool SetProperty<T>(ref T storage, T value, [CallerMemberName] string
propertyName = null)
{
if (Equals(storage, value))
{
return false;
}
storage = value;
OnPropertyChanged(propertyName);
return true;
}
}
public class PriceService
{
public Price BinancePrice { get; set; }
double count;
double BestAskPrice;
double BestBidPrice;
public PriceService()
{
BlazorTimer t = new BlazorTimer();
t.SetTimer(3000, 1, 100);
t.CountCompleted += NotifyCompleted;
BestAskPrice = 102.09;
BestBidPrice = 101.03;
BinancePrice = new Price((double)BestAskPrice, (double)BestBidPrice);
}
private void NotifyCompleted(object sender, TimerEventArgs args)
{
count = (double) args.Count;
BestAskPrice += count;
BestBidPrice += count;
BinancePrice.AskPrice = (double)BestAskPrice;
BinancePrice.BidPrice = (double)BestBidPrice;
}
}
注意:PriceService 是一个服务,应该添加到 DI 容器中:
services.AddSingleton<PriceService>();
另请注意,我避免使用静态内容。注意:为了验证 UI 是否正在更改,我使用了一个计时器。它真的很粗糙,你只需要用它看看一切都很好,然后应用你的代码......
public class BlazorTimer
{
private Timer _timer;
private int count;
private int end;
internal void SetTimer(double interval, int start, int _end)
{
_timer = new Timer(interval);
_timer.Elapsed += Counter;
_timer.Enabled = true;
count = start;
end = _end;
_timer.Start();
}
private void Counter(object sender, ElapsedEventArgs e)
{
count++;
TimerEventArgs args = new TimerEventArgs { Count = count };
OnCountCompleted(args);
}
protected virtual void OnCountCompleted(TimerEventArgs args)
{
EventHandler<TimerEventArgs> handler = CountCompleted;
if (handler != null)
{
handler(this, args);
}
}
public event EventHandler<TimerEventArgs> CountCompleted;
}
public class TimerEventArgs : EventArgs
{
public int Count { get; set; }
}
@*@implements IDisposable*@
@inject PriceService PriceService
<h5>BID: @($"{PriceService.BinancePrice.BidPrice:F2} EUR")</h5>
<h5>ASK: @($"{PriceService.BinancePrice.AskPrice:F2} EUR")</h5>
<h5>Spread: @($"{PriceService.BinancePrice.Spread:F2} EUR")</h5>
@code {
protected override async Task OnInitializedAsync()
{
PriceService.BinancePrice.PropertyChanged += async (sender, e) => { await InvokeAsync(StateHasChanged); };
await base.OnInitializedAsync();
}
//async void OnPropertyChangedHandler(object sender, PropertyChangedEventArgs e)
//{
// await InvokeAsync(StateHasChanged);
//}
//public void Dispose()
//{
// PriceService.BinancePrice.PropertyChanged -= OnPropertyChangedHandler;
//}
}
关于C# Blazor 服务器 : Display live data using INotifyPropertyChanged,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65813816/
Blazor 中的缓存破坏有什么解决方案吗?我在 Blazor WebAssembly 中转换了我的 asp.net 核心应用程序,我在 razor 页面中使用 asp-append-version=
使用 NavigationManager.NavigateTo() 在页面之间移动非常简单,但我想知道是否有一种导航到页面的方法,这样我就可以在不丢失状态的情况下导航回去第一页。 我正在寻找类似 Na
假设我的大部分组件都有一个标题。我想创建一个具有 header 变量的基本组件,并使所有其他组件从该组件继承并设置 header 。所以我有 基础组件 @inherits LayoutComponen
引用https://learn.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.0#razor-template
引用https://learn.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.0#razor-template
我现在正在试验 Blazor 一段时间,我正试图找到关于两者之间差异的解释 Something 和 methodCall()">Something 为什么 @ expected before onc
我正在使用 BlazorInputFile 包在 Blazor 中上传文件。 问题 此代码无效。 如何限制用户只能在 Blazor 中上传 jpeg 或 png?如果需要更多的东西来支持这个问题,请
这存在于许多现代 SPA 库/框架中...... 我将提供一个使用 React 的示例(但它可以是 Angular 或 Vue),您可以执行类似... this.props.router.push({
我有一个 Blazor 服务器端应用程序,我将托管在离我的主要用户将使用的地方不远的服务器上,我想模拟某些功能是否可用但有一些延迟,或者延迟是否会真正影响它。 但我无法在开发时测试延迟,而且我不想每次
我有一个 Blazor 服务器项目,我想将一些共享组件移动到不同的程序集中,看看它是否会在编译时间上产生差异(让我知道这是否可行的奖励......) ,但这并不是那么顺利。 在 VS2019 中,组件
我最近开始使用 Blazor,发现它是一项非常有前途的技术。 我正准备制作自定义嵌套 Blazor 组件,但我似乎没有让它按我想要的方式工作。 目标是拥有一个具有“ContentHeader”和“Co
我想在我的 Blazor 项目中插入和使用 Mapster。我找不到关于如何注册映射并将它们注入(inject)我的应用程序的不同层的好引用。 有人知道我该如何实现吗? 谢谢 最佳答案 原来很简单。
我正在考虑在 Blazor 服务器项目上使用 PostSharp,想知道此 Postsharp 博客 (https://blog.postsharp.net/post/blazor-support-6
我在使用 RenderTreeBuilder 的 Blazor 组件上使用事件绑定(bind)时遇到问题。我了解如何使用编写 HTML 并将事件附加到组件的直接方法来触发事件。但是,我现在需要使用 R
当用户按下包含登录的左上链接的登录链接时,我试图将其存档: 但相反,我收到了这个: 换句话说:我想转到一个没有主布局导航栏的页面。如何存档? MainLayout.razor inherits Lay
如果程序中有错误,我会收到“发生未处理的错误”。使用 Blazor Web 程序集,我可以在浏览器中打开开发者工具以获取所发生事件的详细信息。这在 Blazor MAUI 中是不可能的。 那么如何在
我刚刚在 Blazor WebAssembly 中完成了我的第一个重要测试应用程序。 Blazor 是令人印象深刻的东西,但我发现很难推断属性更改如何导致 DOM 更新 - 例如,在 Razor 组件
很高兴了解 Blazor。这个框架有很多潜力! VS 2017 build 15.8.9 和 Blazor v 15.5.9 的 VS 扩展好的,所以在使用 asp.net 核心(托管)模板开始新项目
我想要在 ASP.NET Core blazor 中触发 click 事件的确切目标。这是可以实现的吗? 最佳答案 您可以使用@ref 获取对 DOM 对象的引用,然后将其作为参数传递给您的处理程序函
Blazor 服务器端基于 Signalr,因此我假设它知道用户何时离开网站(关闭连接)。是否有任何事件可用于记录此事件?或者其他任何方式! 最佳答案 我认为这项服务可以帮助您... public c
我是一名优秀的程序员,十分优秀!