在Blazor服务器应用程序上为移动和桌面设备加载不同的布局组件

Question

我正在Blazor Server中开发一个web应用程序，该应用程序具有适用于移动设备和桌面设备的不同页面，因此我不能仅仅依靠CSS属性来区分页面呈现。我想要"；应用剃刀"；根据用户是从移动设备还是从桌面设备启动应用程序来加载正确的布局。有可能吗？如果是，我该怎么办？

Answer 1

解决方案非常简单：在App.razor 中

<CascadingAuthenticationState>
<Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true">
<Found Context="routeData">
@if (isMobile)
{
<RouteView RouteData="@routeData" defaultLayout="@typeof(MainLayoutMobile)" />
}
else
{
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
}
</Found>
<NotFound>
<LayoutView Layout="@typeof(MainLayout)">
<p>Sorry, there is nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
</CascadingAuthenticationState>
@code
{
[Inject] protected IJSRuntime _JS { get; set; }
protected bool isMobile = false;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
int innerWidth = await BrowserService.GetInnerWidth(_JS);
if (innerWidth < 480)
isMobile = true;
else
isMobile = false;
}
}
}

其中BrowserService是在Startup类中注册的服务：

public class BrowserService
{
public static async Task<int> GetInnerWidth(IJSRuntime _JS)
{
return await _JS.InvokeAsync<int>("browser.getInnerWidth");
}
}

和javascritp文件：

window.browser = {
getInnerWidth: function () {
return window.innerWidth;
}
}