时间戳

首页 > 解决方案 > 运行动画后重定向到 Blazor 页面

blazor-server-side - 运行动画后重定向到 Blazor 页面

问题描述

我有一个组件，html 部分看起来像这样。这是一个运行大约 50 秒的动画

        <div class="contents">
            <img src="images/animated.png" class="contents"/>
        </div>

后面的代码是这样的。

            public partial  class AnimatedLoader
            {
                [Inject] public NavigationManager NavigationManager { get; set; }

                [Parameter] public int Time { get; set; } = 5;


                protected override async void OnAfterRender(bool firstRender)
                {
                    if (firstRender)
                    {
                        await StartTimerAsync();
                        NavigationManager.NavigateTo("testpage");
                    }
                }

                public async Task StartTimerAsync()
                {
                    while (Time > 0)
                    {
                        Time--;
                        StateHasChanged();
                        await Task.Delay(1000);
                    }
                }
            }

当动画运行并完成时，我希望能够重定向到名为 testpage 的页面

这是测试页的html代码

            <div class="row">
                <div class="col-8 offset-2 col-lg-6 offset-lg-3">
                    @if (projectModel != null){
                        <EditForm EditContext="@EditContext">
                            <DataAnnotationsValidator />
                            <div class="mb-5">
                                <label for="projectnameinput" class="form-label">Name your project*</label>
                                <InputTextOnInput type="text" class="form-control form-control-lg cust" Validate="@pNameValidation" id="projectnameinput" @bind-Value="@projectModel.ProjectName" @onkeyup="KeyboardEventHandler" />
                            </div>
                            <div class="mb-5">
                                <label for="projectnumberinput" class="form-label">Enter your project number*</label>
                                <InputTextOnInput type="text" class="form-control form-control-lg cust" Validate="@pNumValidation" id="projectnumberinput" @bind-Value="@projectModel.ProjectNumber" @onkeyup="KeyboardEventHandler" />
                            </div>
                        </EditForm>
                    }
                </div>
            </div>

这是测试页背后的代码

            private NewProjectVM projectModel = new();
            private EditContext EditContext;
            
            protected override async Task OnInitializedAsync()
                {
                    await Task.Run(() =>
                    {
         
                        EditContext = new EditContext(projectModel);
                        EditContext.OnFieldChanged += EditContext_OnFieldChanged;

                    });
                }

                protected override async void OnAfterRender(bool firstRender)
                {
         
                }

动画组件被放置在要运行的页面上。动画运行得很好，没有任何问题，但重定向到测试页不起作用，而是我收到下面的错误消息。

        [2021-09-13T23:04:52.222Z] Error: System.InvalidOperationException: EditForm requires either a Model parameter, or an EditContext parameter, please provide one of these.
           at Microsoft.AspNetCore.Components.Forms.EditForm.OnParametersSet()
           at Microsoft.AspNetCore.Components.ComponentBase.CallOnParametersSetAsync()
           at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()

您不能同时使用 EditContext 和 Model。这里有什么问题？为什么重定向到测试页不起作用？

标签： blazor-server-side

解决方案

我在 Blazor 页面事件中创建的计时器存在严重问题。我强烈建议不要这样做。在几乎完全相同的场景中，我发现我创建的 Timer 只在 95% 的页面加载时打勾。一直不知道为什么。

对我来说，这很关键——我正在制作页面动画，然后显示用于登录或浏览的按钮。当客户没有得到这些按钮时，我会立即失去一个客户。

推荐阅读