Question 1

How do I make two-way binding in Blazor?

Accepted Answer

In two-way binding, data moves from the component to the UI and from the UI to the component class. Use the @bind attribute in the property to bind two ways in Blazor. By default, the bind attribute binds the data in the OnChange event. The OnChange event triggers when the element loses focus.

Follow these steps to achieve the two-way binding in Blazor.

<div>
    <input @bind="BindValue" @bind:event="oninput" />
</div>
<div>
    Binding Value : @BindValue
</div>

@code {
    public string BindValue { get; set; } = string.Empty;
}

Refer to this link for more details.

Permalink

Question 2

How do I get two-way binding in Blazor with the Select component?

Accepted Answer

To achieve two-way binding with the Select component in Blazor, you can use the @bind directive. Here’s an example of how you can implement two-way binding with the Select component: Razor file Refer to this link for more details. View Sample in GitHub

Question 3

How do I get an input value in Blazor WebAssembly?

Accepted Answer

The input element value is updated by the @bind event in Blazor. To get the current input value, use the oninput native event of the input element and get the current input value.

Question 4

How do I refresh the Blazor component without reloading the page when database is updated?

Accepted Answer

You can refresh the Blazor component using the SignalR concept without reloading the page. When using SignalR, saving the changes in one page notifies the changes made to other clients. During the notification process, call the data loading method to reload the changes made to that component without reloading the entire page. Please refer to the documentation link for more details: https://docs.microsoft.com/en-us/aspnet/core/tutorials/signalr-blazor-webassembly?view=aspnetcore-3.1&tabs=visual-studio

Question 5

How do I bind the DateTime value with a specific format?

Accepted Answer

You can bind a specific format for the DateTime value by using the @bind:format attribute of the INPUT element and assign it with the supported date format string value. Refer to the following code sample.

Question 6

How do I format the DateTime and numbers to the local culture?

Accepted Answer

To format the DateTime and numbers to the local culture, use the @bind:format attribute of the INPUT element that supports the date format string value . Refer to the following code sample.

Question 7

How do I bind input of type time with Blazor?

Accepted Answer

You can bind an input of type time in Blazor by using the @bind property to the time value and @bind:format property to specify the supported time format in the DOM input element. Refer to the following code sample.

Question 8

How do I do case insensitive string comparison in a Blazor page?

Accepted Answer

String comparison with case insensitivity can be carried out using the String.Compare method, where the first and second parameters are the strings to be compared and the third parameter is for ignoring case sensitivity (case insensitive comparison). View Sample in GitHub

Question 9

How do you set the check state to the checkbox programmatically?

Accepted Answer

You can check/uncheck the checkbox in the Blazor programmatically by using the @bind parameter in the checkbox. Assign a Boolean property to @bind in the checkbox and toggle the Boolean property programmatically.

Question 10

How do I set an active value on select dropdown control programmatically?

Accepted Answer

To set the active value on a select dropdown control, you must bind a property to the value in the select component and change that bind property in the event call In the above sample, the city dropdown is changed based on the country selected in the country dropdown.

Question 11

How do I set the default value in select control?

Accepted Answer

The value property in the HTML <select> control can be utilized to set the default value.

Question 12

How do I retrieve a selected value of the select control?

Accepted Answer

To retrieve a selected value from the select control, you can use either the @bind or @onchange event.

Question 13

How do I get the checkbox value if it is checked?

Accepted Answer

To get the checkbox value when it is checked or unchecked use the onchange event by calling a method in onchange event using lambda expression and passing the checkbox value to it.

Question 14

How can I bind properties to a list in Blazor data binding?

Accepted Answer

To bind properties to a list in Blazor, you can use the @foreach loop and the @bind directive. Here’s an example: View Sample in GitHub

Question 15

How do you show real-time data updates using ObservableCollection?

Accepted Answer

This ObservableCollection (dynamic data collection) provides notifications when items are added, removed, and moved. The implemented INotifyCollectionChanged provides notifications when dynamic changes of adding, removing, moving, and clearing the collection occur. The implementation of INotifyPropertyChanged notifies when property value has changed in client side. Here, Order class implements the interface of INotifyPropertyChanged and it raises the event when CustomerID property value was changed. In the sample, we have add, delete and update buttons where the observable data for the table will be populated, removed or updated through the button click.

Question 16

How do you get child component bound values in the parent component?

Accepted Answer

We can get child component values in the parent component by creating a reference to the child component using the @ref directive in the Parent component. Using the reference instance, you can access the child component values in the parent.

In the following example, textbox refers to the TextBoxComponent (child component) instance. Using textbox, we can access the properties and values in the Parent component.

Question 17

How to make two-way binding with input date value?

Accepted Answer

Two-way binding is having a bidirectional data flow, i.e., passing the value from the property to the UI and then from the view (UI) to the property. Blazor provides support for two-way binding using the bind attribute.

Syntax for creating two-way binding property:

@bind-{Parameter_name}={Variable_name}

For e.g.., in InputDate, a form component can be used to achieve two-way data binding with input date values in a Blazor application.

Refer to the following code for more details.

<EditForm Model="@_test">
    <InputDate @bind-Value="_test.DateValue" />
</EditForm>

<br />

<p>Selected Date: @_test.DateValue.ToLongDateString()</p>

@code {
    
    public class TestClass
    {
        public DateTime DateValue { get; set; }
    }

    private TestClass _test = new TestClass();
}

In this example code, when the value of _test.DateValue is changed in the code or user changes the date in the InputDate component, the same will be reflected in the paragraph, “Selected Date”.

Permalink

Question 18

How to make one-way binding with the input date value?

Accepted Answer

One-way (unidirectional) binding is all about moving data in one direction from the “Parameter/Property” to the UI (components). You just need to add the @ symbol to the variable name (for example, @yourVariable).

For example, one-way binding with an input date value can be achieved using the InputDate component (form component in Blazor) as follows in an application.

<EditForm Model="@_test">
    <Input type="Date" Value="@_test.DateValue" />
</EditForm>

@code {
    
    public class TestClass
    {
        public DateTime DateValue { get; set; }
    }

    private TestClass _test = new TestClass();
}

In this example, the property DateValue in _test class is bound to the InputDate component’s value property using the value attribute. A form is defined by the EditForm component.

Permalink

Question 19

How do you bind the value of the HTML element with a C# property in Blazor?

Accepted Answer

You have to use the bind attribute to reflect the DOM element value in the C# property.

Question 20

How can you read the current value of an input element in Blazor?

Accepted Answer

The value of an input element is updated in the wrapper with the change events of elements in Blazor. To get the current value for each character input, you must use the oninput event of the input element. This can be achieved by binding the oninput event (native event) using the @bind:event=“oninput“.

Question 21

How do I format date and time strings in Blazor?

Accepted Answer

The format-value attribute is used to format the DateTime strings. Other formats, like currency or number formats, are currently not available. Refer to the link format strings to learn more about formatting.

Question 22

How do you conditionally hide the DOM elements?

Accepted Answer

DOM elements are hidden using the hidden attribute. You can conditionally use any .NET parameter to set this attribute to hide the DOM elements.

Question 23

How do you render elements with conditional attributes?

Accepted Answer

DOM attributes are rendered based on .NET parameters. If the parameter value is true, the attribute is rendered minimized, otherwise it’s not. Refer to the code example to render the checked attribute conditionally.

Question 24

How do you manually trigger data or UI changes?

Accepted Answer

By default, Blazor detects changes and reflects them in the UI automatically. However, there might be a situation where we have to manually trigger changes. StateHasChanged informs the component that its state has changed, but it does not render the component. The component will decide when to render itself. You can’t do that in a synchronous method, so you should async your code to give the component a chance to render.

Question 25

How do you bind and handle events?

Accepted Answer

You can bind events to DOM elements started with the on<event> with a delegate-type value. The attribute’s name always starts with “on.” In the following code example, the “UpdateHeading” event is triggered when the button is clicked.

<button class="btn   btn-primary" @onclick="@UpdateHeading">
       Update heading
   </button>

 @code {
       private void UpdateHeading(MouseEventArgs e)
       {
           ...
       }
   }

Refer to this Blazor documentation for more information.

Permalink

Question 26

What is two way data binding in Blazor?

Accepted Answer

Two-way is having a bi-directional data flow, i.e., passing the value from the property to the UI and then from the view (UI) to the property as well The synchronization of data flow between model and view is achieved using the bind attribute in Blazor. Refer to the following code example for two-way data flow.

Question 27

How do you bind data in Blazor?

Accepted Answer

You can bind the data with DOM element using the “@” prefix with a C# parameter. Refer to the following example for one-way data binding.

Question 28

How do I conditionally change the CSS class names for a Blazor element?

Accepted Answer

You have to use the binding in a ternary operator to achieve this.

Question 29

What is data binding?

Accepted Answer

Data binding synchronizes the data between the view and model. In other words, it binds the C# parameter with DOM elements and vice versa.

Question 30

I’m having an issue—the native events onclick and onchange for custom components bind as null in HTML DOM.

Accepted Answer

Yes, this is a known bug. While creating custom components with the native events onclick and onchange, the event that is not bound in the sample component is rendered as null.

You can refer to the following thread for more information with an example code snippet.

https://github.com/aspnet/AspNetCore/issues/10398 [Issue Resolved]

Permalink

Blazor FAQ - Data binding

CONTACT US

Blazor FAQ - Data binding

Share with