Blazor 5x - قسمت ششم - مبانی Blazor - بخش 3 - چرخههای حیات کامپوننتها
نویسنده: وحید نصیری
تاریخ: ۱۳۹۹/۱۲/۱۲ ۱۵:۳۵
آدرس: www.dntips.ir
| مطالب | ۳۶۹۴ |
| نویسندگان | ۲۷۶ |
| گروههای مطالب | ۱۰۲۴ |
| نقشههای راه | ۱۱۹ |
| دورهها | ۱۴ |
| اشتراکها | ۱۷۹۱۴ |
@page "/lifecycle"
@using System.Threading
<div class="border">
<h3>Lifecycles Parent Component</h3>
<div class="border">
<LifecycleChild CountValue="CurrentCount"></LifecycleChild>
</div>
<p>Current count: @CurrentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
<br /><br />
<button class="btn btn-primary" @onclick=StartCountdown>Start Countdown</button> @MaxCount
</div>
@code
{
int CurrentCount = 0;
int MaxCount = 5;
private void IncrementCount()
{
CurrentCount++;
Console.WriteLine("Parnet - IncrementCount is called");
}
protected override void OnInitialized()
{
Console.WriteLine("Parnet - OnInitialized is called");
}
protected override async Task OnInitializedAsync()
{
await Task.Delay(100);
Console.WriteLine("Parnet - OnInitializedAsync is called");
}
protected override void OnParametersSet()
{
Console.WriteLine("Parnet - OnParameterSet is called");
}
protected override async Task OnParametersSetAsync()
{
await Task.Delay(100);
Console.WriteLine("Parnet - OnParametersSetAsync is called");
}
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
{
Console.WriteLine("Parnet - OnAfterRender(firstRender == true) is called");
CurrentCount = 111;
}
else
{
CurrentCount = 999;
Console.WriteLine("Parnet - OnAfterRender(firstRender == false) is called");
}
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await Task.Delay(100);
Console.WriteLine("Parnet - OnAfterRenderAsync is called");
}
protected override bool ShouldRender()
{
Console.WriteLine("Parnet - ShouldRender is called");
return true;
}
void StartCountdown()
{
Console.WriteLine("Parnet - StartCountdown()");
var timer = new Timer(TimeCallBack, null, 1000, 1000);
}
void TimeCallBack(object state)
{
if (MaxCount > 0)
{
MaxCount--;
Console.WriteLine("Parnet - InvokeAsync(StateHasChanged)");
InvokeAsync(StateHasChanged);
}
}
} <h3 class="ml-3 mr-3">Lifecycles Child Componenet</h3>
@code
{
[Parameter]
public int CountValue { get; set; }
protected override void OnInitialized()
{
Console.WriteLine(" Child - OnInitialized is called");
}
protected override async Task OnInitializedAsync()
{
await Task.Delay(100);
Console.WriteLine(" Child - OnInitializedAsync is called");
}
protected override void OnParametersSet()
{
Console.WriteLine(" Child - OnParameterSet is called");
}
protected override async Task OnParametersSetAsync()
{
await Task.Delay(100);
Console.WriteLine(" Child - OnParametersSetAsync is called");
}
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
{
Console.WriteLine(" Child - OnAfterRender(firstRender == true) is called");
}
else
{
Console.WriteLine(" Child - OnAfterRender(firstRender == false) is called");
}
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await Task.Delay(100);
Console.WriteLine(" Child - OnAfterRenderAsync is called");
}
protected override bool ShouldRender()
{
Console.WriteLine(" Child - ShouldRender is called");
return true;
}
} <li class="nav-item px-3">
<NavLink class="nav-link" href="lifecycle">
<span class="oi oi-list-rich" aria-hidden="true"></span> Lifecycles
</NavLink>
</li>
@code
{
protected override void OnInitialized()
{
Console.WriteLine("Parnet - OnInitialized is called");
}
protected override async Task OnInitializedAsync()
{
await Task.Delay(100);
Console.WriteLine("Parnet - OnInitializedAsync is called");
} <LifecycleChild CountValue="CurrentCount"></LifecycleChild>
Parnet - IncrementCount is called Parnet - ShouldRender is called Child - OnParameterSet is called Child - ShouldRender is called Parnet - OnAfterRender(firstRender == false) is called Child - OnAfterRender(firstRender == false) is called Child - OnParametersSetAsync is called Child - ShouldRender is called Child - OnAfterRender(firstRender == false) is called Child - OnAfterRenderAsync is called Parnet - OnAfterRenderAsync is called Child - OnAfterRenderAsync is called
@code
{
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
{
Console.WriteLine("Parnet - OnAfterRender(firstRender == true) is called");
CurrentCount = 111;
}
else
{
CurrentCount = 999;
Console.WriteLine("Parnet - OnAfterRender(firstRender == false) is called");
}
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await Task.Delay(100);
Console.WriteLine("Parnet - OnAfterRenderAsync is called");
}
} @page "/lifecycle"
@using System.Threading
button class="btn btn-primary" @onclick=StartCountdown>Start Countdown</button> @MaxCount
@code
{
int MaxCount = 5;
void StartCountdown()
{
Console.WriteLine("Parnet - StartCountdown()");
var timer = new Timer(TimeCallBack, null, 1000, 1000);
}
void TimeCallBack(object state)
{
if (MaxCount > 0)
{
MaxCount--;
Console.WriteLine("Parnet - InvokeAsync(StateHasChanged)");
InvokeAsync(StateHasChanged);
}
}
} <button @onclick="OnClick">Synchronous</button>
<button @onclick="OnClickAsync">Asynchronous</button>
@code{
void OnClick()
{
} // StateHasChanged is called after the method
async Task OnClickAsync()
{
text = "click1";
// StateHasChanged is called here as the synchronous part of the method ends
await Task.Delay(1000);
await Task.Delay(2000);
text = "click2";
} // StateHasChanged is called after the method
} window.JsFunctionHelper = {
blazorSetTitle: function (title) {
document.title = title;
}
}; @inject IJSRuntime JSRuntime
@code
{
[Parameter]
public string Title { get; set; }
protected override async Task OnParametersSetAsync()
{
await JSRuntime.InvokeVoidAsync("JsFunctionHelper.blazorSetTitle", Title);
}
} @page "/counter"
<PageTitle Title="@GetPageTitle()" />
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
private string GetPageTitle() => $"Counter ({currentCount})";
} @inject IJSRuntime JSRuntime
@code
{
[Parameter]
public string Title { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await JSRuntime.InvokeVoidAsync("JsFunctionHelper.blazorSetTitle", Title);
}
} <Title Value="@title" /> <Meta name="description" content="Modifying the head from a Blazor component." /> <Link href="main.css" rel="stylesheet" />
@page "/counter" <PageTitle>Counter</PageTitle>
@page "/counter" <PageTitle>Counter</PageTitle> <HeadContent> <meta name="description" content="Use this page to count things!" /> <meta name="author" content="VahidN"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link rel="sitemap" type="application/xml" title="Sitemap" href="@(NavigationManager.BaseUri)sitemap.xml" /> <link rel="alternate" type="application/rss+xml" href="@(NavigationManager.BaseUri)atom.xml"> <link rel="canonical" href="@(NavigationManager.BaseUri)good-content" /> <meta name="robots" content="index, follow" /> </HeadContent>
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after"); @page "/counter"
@{ Debug.WriteLine("Code"); } @code { protected override async Task OnInitializedAsync() { var _dbContext = new ApplicationDbContext(); await _dbContext.Question.ToListAsync(); } }
@page "/"
@using Microsoft.JSInterop
@inject IComponentContext ComponentContext
@inject IJSRuntime jsRuntime
<p>Navigate to the counter component.</p>
@code{
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (!ComponentContext.IsConnected) return;
UriHelper.NavigateTo("/counter");
}
} @implements IHandleEvent
@code {
Task IHandleEvent.HandleEventAsync(EventCallbackWorkItem callback, object? arg) => callback.InvokeAsync(arg);
} protected override bool ShouldRender()
{
return shouldRender;
}