使用 dotnet 3.1.100-preview2-014569
好的,考虑下面的例子:
从模板创建一个新的 Blazor WebAssembly 项目,然后添加以下内容:
books.razor
@page "/books"
@inject BookService bookService
@if (bookService.isLoaned)
{
<p><em>Book loaned</em></p>
}
else
{
<p><em>Book returned</em></p>
}
BookService.cs
public class BookService
{
public int BookId { get; set; }
public string Title { get; set; }
public bool isLoaned { get; set; }
}
Startup.cs
public void ConfigureServices(IServiceCollection services)
{
services.AddScoped<BookService>();
}
NavMenu.razor
@inject BookService bookService;
<div class="top-row pl-4 navbar navbar-dark">
<a class="navbar-brand" href="">BlazorBlank_PV2</a>
<button class="navbar-toggler" @onclick="ToggleNavMenu">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
<ul class="nav flex-column">
<li class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="books" @onclick="LoanBookClicked">
<span class="oi oi-plus" aria-hidden="true"></span>Loan Book
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="books" @onclick="ReturnBookClicked">
<span class="oi oi-list-rich" aria-hidden="true"></span>Return Book
</NavLink>
</li>
</ul>
</div>
@code {
private bool collapseNavMenu = true;
private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
private void ToggleNavMenu()
{
collapseNavMenu = !collapseNavMenu;
}
private void LoanBookClicked()
{
bookService.isLoaned = true;
}
private void ReturnBookClicked()
{
bookService.isLoaned = false;
}
}
What happens:
预期行为:
当单击菜单项“借书”时,页面应显示“图书已借出”,或者如果我单击“归还图书”,则应显示“图书已归还”。但只有当我单击另一个页面(例如主页)然后再次返回时,才会发生这种情况。
即使页面已经位于同一页面上,如何强制页面重新渲染/重新检查 BookService 中的更新值?
Thanks!
这是一个新的解决方案,我在 BookService 类中实现了 INotifyPropertyChanged 接口。为什么使用这个接口?
重要的:调用方法来更新属性值,例如bookService.SetLoanedState(false)
是一种糟糕的编程和反模式设计。属性可以有两个访问器:get 和 set,它们应该用于获取值和更改值。方法有不同的作用......
BookService.cs
using System.ComponentModel;
using System.Runtime.CompilerServices;
public class BookService : INotifyPropertyChanged
{
private bool isLoaned;
public event PropertyChangedEventHandler PropertyChanged;
public int BookId { get; set; }
public string Title { get; set; }
public bool IsLoaned
{
get
{
return this.isLoaned;
}
set
{
if (value != this.isLoaned)
{
this.isLoaned = value;
NotifyPropertyChanged();
}
}
}
private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
书籍.剃刀
@page "/books"
@inject BookService bookService
@using System.ComponentModel
@if (bookService.IsLoaned)
{
<p><em>Book loaned</em></p>
}
else
{
<p><em>Book returned</em></p>
}
@code{
protected override void OnInitialized()
{
bookService.PropertyChanged += PropertyHasChanged;
}
private void PropertyHasChanged(object sender, PropertyChangedEventArgs args)
{
StateHasChanged();
}
}
导航菜单.razor
@code {
// Code removed for brevity
private void LoanBookClicked()
{
bookService.IsLoaned = true;
}
private void ReturnBookClicked()
{
bookService.IsLoaned = false;
}
}
希望这有效...
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)