blazor server示例
时间: 2024-12-17 15:13:56 浏览: 6
Blazor Server是一个用于构建单页应用程序(SPA)的技术,它允许在.NET Core上创建交互式的Web应用,利用C#编写后端逻辑并利用JavaScript处理前端交互。下面是一个简单的Blazor Server应用示例:
```csharp
// 首先,在Startup.cs中配置服务和中间件
public void ConfigureServices(IServiceCollection services)
{
services.AddServerSideBlazor();
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseEndpoints(endpoints =>
{
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/_Host");
});
}
// 然后创建一个组件,比如CounterComponent.razor
@page "/"
@blazor.server.ServerSideOnNavigateTo("/counter")
<h1>你好,这是Blazor Server 示例</h1>
@if (CurrentPage == "/counter")
{
<Counter />
}
else
{
<p>导航到了其他页面...</p>
}
@code {
// 这里可以添加状态管理、通信等逻辑
private string _currentPage = "/";
protected override async Task OnInitializedAsync()
{
_currentPage = NavigationManager.ToAbsoluteUri(NavigationManager.Uri);
}
// 当导航到特定路径时触发此方法
public async Task NavigateToCounter()
{
await NavigationManager.NavigateTo("/counter");
}
}
// Counter组件
@page "/counter"
<h1>计数器: @Count</h1>
<button @onclick="Increment">增加</button>
@code {
private int Count = 0;
private async Task Increment()
{
Count++;
await InvokeAsync(StateHasChanged); // 更新UI
}
}
```
这个例子展示了如何创建一个基本的Blazor Server应用,有一个主页面引用了Counter组件,并能导航到指定页面并更新UI。用户可以从主页面点击按钮进入Counter组件,显示计数器值并实时增加。
阅读全文