В Blazor как вызвать функцию при загрузке страницы (имя события)? - PullRequest
Новая
       66

В Blazor как вызвать функцию при загрузке страницы (имя события)?

0 голосов
/ 02 мая 2020

в первый раз в Blazor.

В стартовом шаблоне я вижу, как работает событие ButtonPressed / Clicked.

Я хочу создать данные для диаграммы в «событии загрузки страницы», а не в Событие Buttonclick.

Для события Button это: 

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

@ code {

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

private int currentCount = 0;

protected override void OnParametersSet()
{
    base.OnParametersSet();

    currentCount = StartValue;
}

private void IncrementCount()
{
    currentCount++;
}

}

Что это за строка кода, когда я хочу вызвать IncementCount не по нажатию кнопки

, а по "событию загрузки страницы" или как называется это событие?

Спасибо за помощь

Ответы [ 3 ]

0 голосов
/ 02 мая 2020

Есть 2 основных способа сделать это, и любой из них будет работать. Я предпочитаю первое, но второе также выполняет свою работу.

Первый способ находится в вашем блоке @code, вы можете переопределить метод OnInitialized. Я использую версию asyn c, так как вы можете запустить свою задачу и дать основам загрузки страницы, а затем она обновит sh, когда она будет настроена. 

@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); в качестве первой строки тела метода OnInitializedAsyn c, это лишит выполнение оставшегося выполнения без рендеринга страницы, так что вы можете получить начальную и отзывчивую страницу, пока Начальная загрузка все еще обрабатывается в фоновом режиме. Просто что-то, чтобы ваша страница быстрее реагировала.

Второй способ - переопределить метод 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 обнаруживает необходимость обновить sh пользовательский интерфейс, поэтому используйте параметр firstRender с умом.

В зависимости от того, что вам нужно сделать, разные методы жизненного цикла могут быть полезны в разное время, и есть еще несколько, которые я не затронул. Для получения дополнительной информации посмотрите официальные документы . Я смог продвинуться очень далеко самостоятельно, просто используя то, что предоставили документы, и эта ссылка поможет вам начать работу с методами жизненного цикла.

Надеюсь, это поможет!

0 голосов
/ 02 мая 2020

Одна важная вещь, которую следует отметить с OnInitializedAsyn c, - это событие, которое может запускаться более одного раза.

В зависимости от вашего приложения, это, вероятно, не то, что вы хотите запускать снова и снова. 

// 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
}
0 голосов
/ 02 мая 2020 
[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++;
}
...