Blazor .net 8 webapp server Twoway binding not binding to a model and events not being triggered using textbox

[Ahmad salim]

I’m using Syncfusion's SfTextBox component in a Blazor Server application. I have bound the @bind-Value to a property in my model and added a ValueChange event for additional logic. However, the ValueChange event is not triggering, and the bound property remains null.

////

public partial class TextBoxBase : ComponentBase
 {
     [Parameter]
     public string Value { get; set; }


     [Parameter]
     public string Placeholder { get; set; }


     [Parameter]
     public string CssClass { get; set; }


     [Parameter]
     public EventCallback<string> ValueChanged { get; set; }


     [Parameter]
     public bool IsDisabled { get; set; }


     public bool IsEnabled => IsDisabled is false;


     public async Task SetValue(string value)
     {
         this.Value = value;
         await ValueChanged.InvokeAsync(this.Value);
     }


     private Task OnValueChanged(ChangeEventArgs changeEventArgs)
     {
         this.Value = changeEventArgs.Value.ToString();
         //InvokeAsync(StateHasChanged);
         return ValueChanged.InvokeAsync(this.Value);
     }


     public void Disable()
     {
         this.IsDisabled = true;
         InvokeAsync(StateHasChanged);
     }


     public void Enable()
     {
         this.IsDisabled = false;
         InvokeAsync(StateHasChanged);
     }
 }


////

<div class="py-6 flex flex-col gap-5">

    <div>
        <TextBoxBase @rendermode="new InteractiveServerRenderMode()"
            @ref=@SignInEmailTextBox
@bind-Value=@SignInView.UsernameOrEmail
            Placeholder="Your email ?"
            CssClass="w-full py-3 px-6 ring-1 ring-gray-300 rounded-xl placeholder-gray-600 bg-transparent transition disabled:ring-gray-200 disabled:bg-gray-100 disabled:placeholder-gray-400 invalid:ring-red-400 focus:invalid:outline-none" />
    </div>

    <div class="flex flex-col items-end">
        <TextBoxBase @rendermode="new InteractiveServerRenderMode()"
            @ref=@SignInPasswordTextBox
            @bind-Value=@SignInView.Password
            Placeholder="What's the secret word ?"
            CssClass="w-full py-3 px-6 ring-1 ring-gray-300 rounded-xl placeholder-gray-600 bg-transparent transition disabled:ring-gray-200 disabled:bg-gray-100 disabled:placeholder-gray-400 invalid:ring-red-400 focus:invalid:outline-none" />
        <a rel='nofollow' href="/forgotten/password" type="reset" class="w-max p-3 -mr-3">
            <span class="text-sm tracking-wide text-blue-600">Forgot password ?</span>
        </a>
    </div>


    <div>
        <ButtonBase
            @ref=@SubmitButton
            OnClick=@SignInAsync
            Label="Login"
            CssClass="w-full px-6 py-3 rounded-xl bg-sky-500 transition hover:bg-sky-600 focus:bg-sky-600 active:bg-sky-800" />
        <SpinnerBase @ref=@Spinner />




    </div>

</div>

/////

  public partial class SignInComponent : ComponentBase
  {


      [Inject]
      public IIdentityViewService IdentityViewService { get; set; }


      [Inject]
      public AuthenticationStateProvider AuthStateProvider { get; set; }


      public ComponentState State { get; set; }
      public IdentityComponentException Exception { get; set; }




      public SignInView SignInView { get; set; }
      public TextBoxBase SignInEmailTextBox { get; set; }
      public TextBoxBase SignInPasswordTextBox { get; set; }
      public ButtonBase SubmitButton { get; set; }
      public SpinnerBase Spinner { get; set; }


      protected override void OnInitialized()
      {
          SignInView = new SignInView();
          State = ComponentState.Content;
      }




      public async void SignInAsync()
      {
              ApplySubmittingStatus();
              var login = await IdentityViewService.LogInAsync(SignInView);
      }


[Priyanka Karthikeyan]

Hi Ahmad salim,

 

Thank you for reaching out to us. We appreciate you providing the code snippet. We have created a simple custom sample based on the information you shared, and we found that the value is correctly bound and the ValueChange event is triggered as expected on our end.

 

For your convenience, we have attached the sample along with a video illustration that demonstrates the functionality.

 

Sample: https://blazorplayground.syncfusion.com/hDVejMjveTveOQgo

 

Furthermore if we misunderstood the issue and ensure we address the issue effectively, could you please share a sample that reproduces the issue along with the specific steps to replicate the problem? A video illustration of the issue would be extremely helpful as it will enable us to better understand the context and provide you with a more accurate and prompt solution.

 

Thank you for your patience, understanding, and cooperation. We look forward to resolving this matter as quickly as possible.

 

Regards,

Priyanka K