Button: onclick
@page "/"
<h1>Home Page</h1>
<p>You have clicked the button @Count times</p>
<button @onclick="@Click">Click Me</button>
@code {
public int Count { get; set; }
private void Click(MouseEventArgs mouseEventArgs)
{
Count++;
}
}
Drop Down List: onchange
@page "/"
<h1>Home Page</h1>
<p>You have selected @WebApplication as the web application.</p>
<select @onchange="@Change">
<option value="">Select...</option>
<option value="Blazor">Blazor</option>
<option value="MVC">MVC</option>
<option value="WebForms">WebForms</option>
</select>
@code {
public string WebApplication { get; set; }
private void Change(ChangeEventArgs changeEventArgs)
{
WebApplication = changeEventArgs.Value.ToString();
}
}
Drop Down List: onchange
<select @onchange="@FilterProductByCategory">
<option value="">All</option>
@foreach (var category in Store.ProductCategoryList)
{
<option value="@category.Id">@category.Name</option>
}
</select>
public void FilterProductBySearchText()
{
Console.WriteLine("FilterProductBySearchText:" + ProductSearchText);
Store.ProductListFiltered = Store.ProductListAll.Where(i => i.Name.ToLower().Contains(ProductSearchText.ToLower())).ToList();
}
Textbox: onchange, onblur
@page "/"
<h1>Home Page</h1>
<p>You text displayed is <strong>@DisplayedValue</strong>.</p>
<input type="text" @onchange="@ChangeValue" @onblur="@DisplayTheValue" />
@code {
public string Value { get; set; }
public string DisplayedValue { get; set; }
private void ChangeValue(ChangeEventArgs changeEventArgs)
{
Value = changeEventArgs.Value.ToString();
}
private void DisplayTheValue(FocusEventArgs focusEventArgs)
{
DisplayedValue = Value;
}
}
Button: OnClick vs OnClickAsync
<button @onclick="OnClick">Synchronous</button>
<button @onclick="OnClickAsync">Asynchronous</button>
@code{
void OnClick()
{
} // StateHasChanged is called by the base class (ComponentBase) after the method is executed
async Task OnClickAsync()
{
text = "click1";
// StateHasChanged is called by the base class (ComponentBase) here as the synchronous part of the async method ends
await Task.Delay(1000);
await Task.Delay(2000);
text = "click2";
} // StateHasChanged is called by the base class (ComponentBase) after the returned task is completed
}
Sources:
https://www.meziantou.net/asp-net-core-blazor-components-lifecycle.htm
Comments