时间戳

首页 > 解决方案 > 基于相同代码的 2 个不同的 Blazor 页面

blazor - 基于相同代码的 2 个不同的 Blazor 页面

问题描述

我有一个 Blazor 页面，需要在不同情况下以不同方式呈现。我目前正在使用一个非常大的“if”语句在两者之间做出决定，但这非常笨拙。我不想复制/粘贴代码背后的重要逻辑。有没有办法让 2 个不同的 UI 页面基于相同的代码？

我试过有 2 个不同的页面，后面有代码，然后继承一个包含所有逻辑的基类，就像这样。

public partial class MyPageHorizontal : MyPageLogic
{
}

public partial class MyPageVertical : MyPageLogic
{
}

public partial class MyPageLogic : ComponentBase
{
    //logic and properties go here
}

我收到错误“基类与其他部分中声明的不同”

标签： blazorblazor-webassembly

解决方案

您的 Razor 文件需要从您的自定义 Base 继承，如下所示

@inherits IndexBase
@page "/"
@page "/IndexHoriz"

<h1>Hello, world!</h1>

Welcome to your new app.  This page should render horizontally

<SurveyPrompt Title="How is Blazor working for you?" />

Razor 编译器将假定它们从 ComponentBase 继承。

推荐阅读