Blazor application simple input controls events in .Net 8

The Blazor sample web client application created in Dotnet 8 is used to demonstrate input control events. Onclick and OnChange events for buttons, text boxes, checkboxes, radio buttons, and select have been implemented.

Create the Blazor WebAssembly app to this sample events and it don’t have direct access to server and network resources.

To make things easier to understand and less confusing, add the new pages one at a time. We created the pages below to incorporate various event types.

Bevents page for the onclick events for the button

Cevents page for the onchange events for the checkbox

Revents page for the onchange events for the radio button

Tevents page for the onchange events for the textbox

Sevents page for the onchange events for the select

Bevents:

@page "/button"

<PageTitle>Button-Events</PageTitle>
<h3>Input type button events</h3>

<button class="btn btn-primary" @onclick="@(() => msg="Hello")">Show Message</button>
<p>@msg</p>

@*Prevent redirection on form submit button*@
<form>
    <button class="btn btn-primary" @onclick:preventDefault="true" @onclick="preventSumbit">Form Submit</button>
    <p>@preventMsg</p>
</form>




@code {

    private string msg = string.Empty;
    private string preventMsg = string.Empty;

    private void preventSumbit(MouseEventArgs e)
    {
        preventMsg = "Preventing loading for form submit button (!IsPostback)";
    }
}

Cevents:

@page "/checkbox"
<PageTitle>Checkbox-Events</PageTitle>

<h3>Input type checkbox events</h3>

<span>Blazor</span>
<input type="checkbox" @onchange="checkboxOnchange" />
<p>@msg</p>

@code {

    private bool checkboxSelectedvalue = false;
    private string msg = string.Empty;

    private void checkboxOnchange(ChangeEventArgs e)
    {
        checkboxSelectedvalue = Convert.ToBoolean(e.Value);

        msg = (checkboxSelectedvalue) ? "You have selected BLAZOR course" : "Nothing has been selected";
    }
}

Revents:

@page "/radio"
<PageTitle>Radio-Events</PageTitle>

<h3>Input type radio button events</h3>

@*Radio button*@
<label>Select Course:</label>
<input type="radio" name="blazor" value="C#" @onchange="radioButtonOnchange" />C#
<input type="radio" name="blazor" value="SQL" @onchange="radioButtonOnchange" />SQL
<input type="radio" name="blazor" value="ASP.NET" @onchange="radioButtonOnchange" />ASP.NET
<p>@radioButtonSelectedvalue</p>

@code {

    private string radioButtonSelectedvalue = string.Empty;
    private void radioButtonOnchange(ChangeEventArgs e)
    {
        radioButtonSelectedvalue = $"You have selected {Convert.ToString(e.Value)} course";
    }

}

Tevents:

@page "/textbox"
@using System.Globalization

<PageTitle>Textbox-Events</PageTitle>

<h3>Input type textbox events</h3>

@*Onchange events on Input type = text *@
<input @onchange="SetName" type="text" class="form-control" />
<h3>@InputValue</h3>

@*Same method for two textboxes*@
<input @onchange="@(e=>SetValue(e,null))" type="text" class="form-control" />
<input @onchange="@(e=>SetValue(null,e))" type="text" class="form-control" />
<p>@SetFullName</p>

@*onchange pass data*@
<input @onchange="@(e=>PassInput("TEST MESSAGE"))" type="text" class="form-control" />
<p>@setLamdavalue</p>


@*Bind data to input one-way*@
<input type="text" value="@samplebindData" />

@*Showing DateTime with Culture specific and Formatted values in Blazor*@

<input type="text" class="form-control" @bind="DOB" @bind:format="yyyy-MM-dd" />
<input type="text" class="form-control" @bind="ShowDateTime" @bind:format="MMM-dd" @bind:culture="CultureGB" />
<input type="text" class="form-control" @bind="ShowDateTime" @bind:format="MMM-dd" @bind:culture="CultureFR" />


@code {

    private string InputValue = string.Empty;
    private void SetName(ChangeEventArgs e)
    {
        InputValue = Convert.ToString(e.Value);
    }

    private string SetFullName = string.Empty;
    private void SetValue(ChangeEventArgs e1, ChangeEventArgs e2)
    {
        if (e1 is not null)
            SetFullName = Convert.ToString(e1.Value);

        if (e2 is not null)
            SetFullName = Convert.ToString(e2.Value);
    }

    private string setLamdavalue = string.Empty;
    private void PassInput(string log)
    {
        setLamdavalue = log;
    }


    private string samplebindData = "Welcome to Asp.net blazor course";

    private DateTime DOB = new DateTime(2023, 12, 17);

    public DateTime ShowDateTime { get; set; } = DateTime.Parse("2023/12/17 07:20");
    public CultureInfo CultureFR { get; set; } = CultureInfo.GetCultureInfo("fr-FR");
    public CultureInfo CultureGB { get; set; } = CultureInfo.GetCultureInfo("en-gb");
}

Sevents:

@page "/select"
<PageTitle>Select-Events</PageTitle>

<h3>Input type select events</h3>

@*Dropdown selected change event*@
<select @onchange="SetSelectedValue1">
    <option>Asp.net</option>
    <option>Ado.net</option>
    <option>C#</option>
    <option>Blazor</option>
</select>
<p>@ddlSelectedvalue1</p>


@*Bind data to input two-way*@
@*Dropdown selected change event and default selection*@
<select @onchange="SetSelectedValue2" value="@ddlSelectedvalue2">
    <option>Asp.net</option>
    <option>Ado.net</option>
    <option>C#</option>
    <option>Blazor</option>
</select>
<p>@ddlSelectedvalue2</p>


@*bind property also works as two way data binding same as above*@
@*Instead of value we take @bind*@
@*hander method as it is not needed anymore*@
<select @bind="ddlSelectedvalue3">
    <option>Asp.net</option>
    <option>Ado.net</option>
    <option>C#</option>
    <option>Blazor</option>
</select>
<p>@ddlSelectedvalue3</p>

@*By default, the onchange event is used in bindings. This means when you apply @bind
attribute to an input type text element then the bindings will work only when the input element loses focus.*@


@code {

    private string ddlSelectedvalue1 = "asp.net blazor events course";
    private string ddlSelectedvalue2 = "(two-way binding)asp.net blazor events course";
    private string ddlSelectedvalue3 = "Binding data with @bind";

    private void SetSelectedValue1(ChangeEventArgs e)
    {
        ddlSelectedvalue1 = Convert.ToString(e.Value);
    }

    private void SetSelectedValue2(ChangeEventArgs e)
    {
        ddlSelectedvalue2 = Convert.ToString(e.Value);
    }

}

Additionally, datetime was included to text controls using formatted values and culture-specific values.

Note: This is just an example application free of build issues

Complete source code available at – Source Code GitHub

-Thank you, happy coding !!