This might be my own stupidity, but I have been struggling with this problem for the last day or so and I am not sure how to troubleshoot it anymore.
Short Version
I have the following Code in Blazor
<input type="text" value="@val" @oninput="OnChange" @onclick="OnClick"/>@val@code{ private string val = "some val"; public void OnClick() { val = "clicked"; } public void OnChange(ChangeEventArgs e) { var value = e.Value?.ToString(); if (value != null) { val = value; } }}- And Yes, I have also tried @bind-value="val" and even @bind-value="@val" for good measure on the input element with no changes occurring to the val element when typed.
I have set break points on each of the first lines in the events. No breakpoint is hit upon clicking the input element or typing a new value (which makes sense) and on blur of the input element.
The @val also does not change. What am I doing wrong?
Long Version
(It is a Blozor-Web project which has a server and client project - which should not really matter? For reference: all components/elements that has the issue is declared and used within the Client project)
I created a component in the past. Actually, an abstract "base" class that can be inherited by other components. The abstract class creates the default/base input element through Code that looks like this (shortened version):
protected virtual RenderFragment InputElement() => BuildInput;private void BuildInput(RenderTreeBuilder builder){ int seq = 0; builder.OpenElement(seq++, "input"); builder.AddAttribute(seq++, "type", Type); if (!string.IsNullOrEmpty(CssClass)) builder.AddAttribute(seq++, "class", CssClass); ElementSetValueAttribute(builder, ref seq); ElementSetValueChangeAttribute(builder, ref seq); builder.SetUpdatesAttributeName(UpdateAttributeName); builder.AddElementReferenceCapture(seq++, __inputReference => Element = __inputReference); builder.CloseElement();}protected virtual void ElementSetValueAttribute(RenderTreeBuilder builder, ref int sequence){ builder.AddAttribute(sequence++, "value", CurrentValueAsString);}protected virtual void ElementSetValueChangeAttribute(RenderTreeBuilder builder, ref int sequence){ var _bindEvent = string.IsNullOrEmpty(BindEvent) ? DefaultBindEvent : BindEvent; builder.AddAttribute(sequence++, _bindEvent, EventCallback.Factory.CreateBinder(this, OnValueChangeEvent, CurrentValueAsString ?? string.Empty));}public void OnValueChangeEvent(string? newValue){ CurrentValueAsString = newValue;}history
This used to work when it was all included in the same project (the blazor project). I exported the above abstract base class to a separate Razor class library in order to also use it in other code. I also recently updated Visual Studio to the latest version.
Upon debugging my code I noticed that no values of my models get changed.
I set several breakpoints and noticed that all the information gets populated correctly from the c# code to the html (i.e. values, and even changing events to "Alert('test')", will run the code correctly in the browser). It is therefore the callback (js to c#) that for some reason is not working. I then tested a normal input (first example) and noticed even on that component (not using my base class) there is no events received back from the browser (or js to c# code).
I deleted the obj and bin folders. I rebuilt and cleaned the code. I have run the code in different browsers (Chrome & Edge). None of the values change, and no breakpoint is hit. The inspect tools does not show any error messages.
I am now contemplating moving over to node.js with react / vue. It is a simple front-end that gets data from an API designed in .Net.
Question
- Am I doing something wrong?
- How do I troubleshoot this to determine if the javascript side of the code functions properly (which my logic is saying it is not)?
- Did the above problem come about because I moved the code to a separate Class Library and now there is a conflict in some code? or could it be related to the fact that Visual Studio was recently update? - should anyone know.
I am bracing myself for a silly mistake that i am overlooking - for this then I apologize in advance, but your assistance will be greatly appreciated.
