首页 > 解决方案 > 在 Blazor 组件中显示条件内容的最佳方式是什么

问题描述

我不是一个 Web 开发人员,但我知道我在 .NET 周围的方式。我决定尝试制作一个 Web 应用程序,但我正在为如何处理渲染内容而苦苦挣扎。

示例是一个从系统中删除文件和文件夹的应用程序(超越你不应该从网络应用程序执行此操作的事实)

我有一个加载到模态中的组件。加载时会提示询问您是否要删除该文件夹。您可以确认或取消。如果您确认它完成了删除文件夹的过程,并且内容更改为一条消息,说“请稍候,这已完成”,一旦完成,该消息将变为“嘿,它已完成”。

这种情况导致我的组件看起来像

if(initialState)
{
    ask for confirmation
}
else if(RemovingState)
{
    please wait while this is completed
}
else if(CompletedState)
{
    Hey its finished
}

这导致我的方法在开始时会翻转这个尴尬的标志

StartRemoveMethod()
{
    initialState = false;
    RemovingState = true;

    DoTheRemoval
}

这只是感觉很奇怪。我正在考虑添加一个额外的检查,这意味着我必须引入一个新标志和另一个else if部分。我只是想知道我是否完全错过了某些东西,或者这基本上是我应该做什么的想法?

标签: c#blazorblazor-server-side

解决方案


Blazor 绝对是一种思维转变,特别是如果您来自 WinForms 或类似的软件。当试图弄清楚如何将事物分解成组件时,很容易导致分析瘫痪。关于您的具体示例,这似乎是一种非常合理的方法(尽管 switch 和 enum 方法会稍微整理一下)。

对于 Blazor 来说还处于早期阶段,所以还没有很多非常详细的示例。一个非常好的是 Blazor 团队的 Blazing Pizzas 教程: https ://github.com/dotnet-presentations/blazor-workshop/ 。这将引导您构建一个完整的系统以及一些关于如何管理应用程序状态的非常有用的指导。

您可能还想查看一些介绍性 (Facebook) React 文章,这些文章描述了构建组件和状态管理。与旧的 WinForms 范例相比,这些概念更好地转移到 Blazor。同样值得阅读一些关于 Flux/Redux 概念的内容,因为它们是解决基于组件的 UI 方法中出现的一些相当常见的状态问题的流行方法。


推荐阅读