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

Last modified: December 17, 2020

Author

Comments

Write a Reply or Comment