JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Text Boxes & Inputs › Blazor Input OnChange Event Handling
Tagged: Blazor Input OnChange Event
- This topic has 3 replies, 2 voices, and was last updated 9 months, 2 weeks ago by
BrandonGruber.
-
AuthorPosts
-
November 14, 2023 at 6:57 pm #109157
BrandonGruber
ParticipantI am having trouble finding the new value in the Input OnChange event.
I am using an alias for the Smart.Blazor.Event class as shown here:
@using SmartInputChangedEvent = Smart.Blazor.Event;
Below is my input markup:
<Input Value=@ManagedChecklistFilter.ChecklistType DataSource=ChecklistTypeOptions OnChange=”(SmartInputChangedEvent e) => FiltersChanged(ChecklistFilterFields.ChecklistType, e)”></Input>
Below is the method I am calling to capture the event:
private async Task FiltersChanged(ChecklistFilterFields field, SmartInputChangedEvent e)
{
if (e is not null)I am getting the event with 22 key value pairs but none of them contain the new value.
November 14, 2023 at 7:50 pm #109158BrandonGruber
ParticipantTo add more information, below are the key/value pairs captured in e:
{[isTrusted, ValueKind = True : “True”]}
{[type, ValueKind = String : “change”]}
{[target, ValueKind = Object : “{“id”:””}”]}
{[currentTarget, null]}
{[eventPhase, ValueKind = Number : “0”]}
{[bubbles, ValueKind = True : “True”]}
{[cancelable, ValueKind = False : “False”]}
{[defaultPrevented, ValueKind = False : “False”]}
{[composed, ValueKind = False : “False”]}
{[timeStamp, ValueKind = Number : “11000.399999976158”]}
{[srcElement, ValueKind = Object : “{“id”:””}”]}
{[returnValue, ValueKind = True : “True”]}
{[cancelBubble, ValueKind = False : “False”]}
{[NONE, ValueKind = Number : “0”]}
{[CAPTURING_PHASE, ValueKind = Number : “1”]}
{[AT_TARGET, ValueKind = Number : “2”]}
{[BUBBLING_PHASE, ValueKind = Number : “3”]}
{[composedPath, ValueKind = Object : “{}”]}
{[initEvent, ValueKind = Object : “{}”]}
{[preventDefault, ValueKind = Object : “{}”]}
{[stopImmediatePropagation, ValueKind = Object : “{}”]}
{[stopPropagation, ValueKind = Object : “{}”]}November 14, 2023 at 8:42 pm #109160ivanpeevski
ParticipantHi Brandon,
There are a few different ways to capture the value of the input. For example, you can use two-way value binding:
<h3>@textValue</h3>
<Input @bind-Value=”@textValue” OnChange=”changeEvent”></Input>@code{
string textValue = “”;
private void changeEvent(Event ev)
{
Console.WriteLine(textValue);}
}Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/November 17, 2023 at 2:54 pm #109179BrandonGruber
ParticipantThanks for your help, I was able to get it working that way. I would suggest that the API docs be updated as it appears to suggest that the value should be in the event:
<table class=”table”>
<tbody>
<tr>
<td>OnChange</td>
<td>EventCallback<Event></td>
<td>This event is triggered when the selection is changed.</td>
<td>string label- The label of the new selected item., dynamic oldLabel- The label of the item that was previously selected before the event was triggered., dynamic oldValue- The value of the item that was previously selected before the event was triggered., dynamic value- The value of the new selected item.</td>
</tr>
</tbody>
</table> -
AuthorPosts
- You must be logged in to reply to this topic.