Fatal编程技术网
  • events/
  • Events 在Blazor中，如何在页面加载时调用函数（事件名称）？

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

events blazor

Events 在Blazor中，如何在页面加载时调用函数（事件名称）？,events,call,blazor,Events,Call,Blazor,第一次进入Blazor 在开始模板中，我看到事件btnClicked是如何工作的 对于按钮事件，如下所示： 点击我 @代码{ 私有int currentCount=0； 私有void IncrementCount（） { currentCount++； } } 当我想调用IncementCount而不是clickbutton时，它是什么代码行 但是在“onload page事件”中，或者这个事件叫什么 Thx求救 [Parameter] public int StartValue { get;

第一次进入Blazor

在开始模板中，我看到事件btnClicked是如何工作的

对于按钮事件，如下所示：

点击我
@代码{
私有int currentCount=0；
私有void IncrementCount（）
{
currentCount++；
}
}
当我想调用IncementCount而不是clickbutton时，它是什么代码行

但是在“onload page事件”中，或者这个事件叫什么

Thx求救

[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加载）：

有两种主要的方法可以做到这一点，任何一种都可以。我倾向于选择第一个，但第二个也能完成任务

第一种方法是在
@code
块中，您可以覆盖
OnInitialized
方法。我使用异步版本，因为您可以启动任务，让页面基本信息加载，然后在设置时刷新

@code{
void方法（）
{
//做些工作
}
Task SomeStartupTask（）
{
//做一些基于任务的工作
返回Task.CompletedTask；
}
受保护的重写异步任务OnInitializedAsync（）
{
方法（）；
等待任务（）；
}
这将在页面加载上完成工作，比如初始服务调用来填充数据，有条件地填充列表，无论您需要做什么。顺便说一句，我发现的一个技巧是，如果您将
放入wait Task.Delay（1）；
作为OnInitializedAsync方法主体的第一行，它将中断页面呈现中剩余的自由执行，因此您可以在初始加载仍在后台处理时获得初始和响应页面。这只是为了让页面响应更快

第二种方法是重写
OnAfterRender
方法，该方法允许第1页完全呈现，然后执行。它还有一个默认输入
bool firstRender
，可以用作数据加载和其他操作的条件

受保护的覆盖无效OnAfterRender（bool firstRender）
{
//有条件地执行以加载数据，否则将加载
//每次页面刷新时
if（firstRender）
{
//执行加载页面数据和设置属性的操作
}
}
对于此方法，需要记住的重要一点是，Blazor引擎检测到需要刷新UI时，它将随时执行，因此明智地使用
firstRender
参数

根据您需要做什么，不同的生命周期方法在不同的时间可能有用，还有一些我没有涉及。为了进一步了解信息，我已经能够使用文档提供的内容，自己走得很远了，这个链接将让您开始使用生命周期方法

希望这有帮助！

使用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
}
我需要：

  • 在blazor中通过onload运行javascript
通常情况下，您可能会遇到以下情况：

<body onload="writeConsole()">
您可以看到，我正在对我的JS文件中定义的两个不同的JS方法进行两次调用

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

我正在调用的两个函数不带任何参数，也不返回任何内容，所以我使用了
InvokeVoidAsync（）

？但在加载数据之前等待页面将很奇怪。也许，在第一次渲染后使用会更好。太感谢您提供的信息了！我确实单击了，给您+1（我仍然没有15分，所以现在不会显示）这就是我想要的：protected override void OnInitialized（）{}----或者我不知道。谢谢。我在找类似的东西来设置blazor web assembly中表格行的默认背景色。它工作得很好，谢谢。谢谢。OnInitialized就是我要找的，但不知道…；）谢谢OnInitialized 
<body onload="writeConsole()">

@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");
    }
}