主页 / coding / 问题 / 79321338
Accepted
Ahmad Salim
Asked: 2025-01-01 16:20:40 +0800 CST

Blazor .NET 8 Web 应用服务器双向绑定未绑定到模型且未触发事件

  • 772

我在 Blazor Server 应用程序中使用 Syncfusion 的 SfTextBox 组件。我已将其绑定@bind-Value到模型中的属性，并添加了ValueChange事件以添加其他逻辑。

但是，ValueChange事件未触发，并且绑定属性仍然为空。

    <SfTextBox @bind-value=@Value
               Placeholder=@Placeholder
               Enabled=@IsEnabled
               [email protected]
               CssClass="" />

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 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
             @ref=@SignInEmailTextBox
             @[email protected]
             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 
             @ref=@SignInPasswordTextBox
             @[email protected]
             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 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>
blazor

2 个回答

  1. Best Answer

    您需要正确整理绑定，即设置 getter 以获取提供的内容Value，并设置 setter 通过调用ValueChanged回调传递新值。
    这是一个使用标准的示例InputText，因为我不使用 SF。我很确定 SF TextBox 的工作方式相同。我还展示了如何在不创建自定义控件的情况下实现您展示的功能。

    注意：一旦您掌握了正确的逻辑，就没有必要StateHasChanged通过代码进行分散调用。

    另请参见此问题和答案，其中展示了另一种直接从 Text 控件继承的方法。 - https://stackoverflow.com/a/78661731/13065781

    具有绑定设置的基本自定义控件：

    <InputText disabled="@IsDisabled" class="@CssClass" 
    placeholder="@this.Placeholder"
    @bind-Value:get="@Value" 
    @bind-Value:set="SetValue"/>

@code {
    [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);
    }
}

    还有一个演示页面：

    @page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<EditForm Model="_model">
    <div class="mb-2">

        <InputText disabled="@_isDisabled" 
            class="form-control" 
            placeholder="Enter Your Name" 
            @bind-Value="_model.Name" />

    </div>

    <div class="mb-2">
        <TextBoxBase CssClass="form-control" 
        IsDisabled="_isDisabled" 
        Placeholder="Enter A Value" 
        @bind-Value="_model.Value" />

    </div>
</EditForm>

<div class="mb-2">
    <button class="btn btn-primary" @onclick="OnDisable">Disable</button>
</div>

<div class="bg-dark text-white m-1 p-1">
    <pre>Name: @_model.Name</pre>
    <pre>Value: @_model.Value</pre>
</div>
@code {
    private Model _model = new Model();
    private bool _isDisabled;

    private void OnDisable()
    {
        _isDisabled = !_isDisabled;
    }

    public class Model
    {
        public string? Name { get; set; }
        public string? Value { get; set; }
    }
}

    最后说明一下。您不需要获取引用来编辑这样的组件：

    public TextBoxBase SignInPasswordTextBox { get; set; }

    一切都应该通过参数发生。

    • 1

  2. 在@MrC 又名 Shaun Curtis 的帮助下做了一点改变，应用 get 和 @bind-Value:set 触发了事件

    <SfTextBox @bind-value:get=@Value
       @bind-value:set=@SetValue
       Placeholder=@Placeholder
       Enabled=@IsEnabled
       [email protected]
       CssClass="" />
    • 0

相关问题