在 Blazor 中如何在页面加载（事件名称）时调用函数？

Question

第一次进入 Blazor。

在启动模板中，我看到事件 btnClicked 是如何工作的。

按钮事件是这样的：

    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

    @code {

       private int currentCount = 0;

       private void IncrementCount()
       {
          currentCount++;
       }
    }

不在clickbutton处调用IncementCount是什么代码行

但是在“加载页面事件”或者这个事件叫什么？

谢谢帮助

Answer 1

[Parameter]
public int StartValue { get; set; }

private int currentCount = 0;

protected override void OnInitialized() // = On Page Load
{   
    currentCount = StartValue;
    IncrementCount();
}

private void IncrementCount()
{
    currentCount++;
}

或者如果您不想要第一个 StartValue，只需：

[Parameter]
public int StartValue { get; set; } = 0;

protected override void OnInitialized() // = On Page Load
{   
    currentCount++;
}

如果你想在组件完成渲染后初始化它（也许你想等待 DOM 加载）：

[Parameter]
public int StartValue { get; set; }

private int currentCount = 0;

protected override void OnAfterRender() 
{   
  if (firstRender)
 {
    currentCount = StartValue;
    IncrementCount();
  }
}

private void IncrementCount()
{
    currentCount++;
}

Answer 2

您可以通过两种主要方式执行此操作，任何一种都可以。我倾向于第一个，但第二个也能完成工作。

第一种方式，在你的@code块中，你可以覆盖OnInitialized方法。我使用异步版本，因为你可以开始你的任务并让页面基础加载，然后它会在设置时刷新。

@code {

void SomeStartupMethod()
{
    // Do Some Work
}

Task SomeStartupTask()
{
    // Do some task based work
    return Task.CompletedTask;
}

protected override async Task OnInitializedAsync()
{
    SomeStartupMethod();
    await SomeStartupTask();
}

这将在页面加载时起作用，例如填充数据的初始服务调用、有条件地填充列表，无论您需要做什么。顺便说一句，我发现的一个技巧是，如果您将 await Task.Delay(1); 作为 OnInitializedAsync 方法主体的第一行，它将打破页面呈现中剩余的执行，因此您可以在初始时获得初始响应页面负载仍在后台处理。只是为了让您的页面响应速度更快。

第二种方式是覆盖OnAfterRender方法，让第1页全渲染然后执行。它还具有默认输入 bool firstRender，您可以将其用作数据加载和其他内容的条件。

protected override void OnAfterRender(bool firstRender)
{
    // execute conditionally for loading data, otherwise this will load
    // every time the page refreshes
    if(firstRender)
    {
        // Do work to load page data and set properties
    }
}

对于此方法要记住的重要一点是，它会在 Blazor 引擎检测到需要刷新 UI 时随时执行，因此请明智地使用该 firstRender 参数。

根据您需要执行的操作，不同的生命周期方法在不同的时间可能会有用，还有一些我没有涉及。如需更多信息，take a look at the official docs。仅使用文档提供的内容，我已经能够自己走得更远，这个 link 将帮助您开始使用生命周期方法。

希望对您有所帮助！

Answer 3

使用 OnInitializedAsync 需要注意的一件重要事情是事件可以触发多次。

根据您的应用程序，这可能不是您想要反复触发的东西。

// variable in your page or component
public bool Initialized { get; set; }

// if not initialized
if (!Initialized)
{
    // Do your initializations

    // This way it only runs once
    Initialized = true;
}

其他方式是在您的组件或页面的构造函数中

这里我有一个名为 Index.razor 的页面和一个名为 Index.razor.cs

的代码

在构造函数中

public void Index()
{
    // Perform your initializations here
}

Answer 4

我需要：

运行 javascript 通过我的 blazor 中的 onload

通常你可能会有这样的东西：

<body onload="writeConsole()">

其中 writeConsole() 是您的 JS 文件中的函数。

我终于找到了添加到 index.razor 文件中的以下代码。

@page "/"
@inject IJSRuntime JS;

<h1>Hello, world!</h1>

Welcome to your new app.

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

<canvas id="mainCanvas" width="400" height="400"></canvas>
@code{
    protected override void OnInitialized() 
    {   
        
    }

    protected override void OnAfterRender(bool firstRender)
    {
        JS.InvokeVoidAsync("writeConsole");
        JS.InvokeVoidAsync("initGrid");
    }
}

您可以看到我正在两次调用我的 JS 文件中定义的两个不同的 JS 方法。

起初我以为我需要重写的方法是 OnInitialized() 但实际上那个方法是在页面完全“加载”之前（所有 DOM 元素尚不可用）所以我使用 OnAfterRender(bool firstRender)，它的工作就像我使用原始 onload 事件一样。

我调用的两个函数不带参数，return 什么也没有，所以我使用 InvokeVoidAsync().

在 Blazor 中如何在页面加载（事件名称）时调用函数？

In Blazor how to call a function at Page Load (event name)?

events

call

blazor