You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多
文档控制台
免费开始使用

使用Radzen DialogService打开Razor页面时事件处理器无法触发

问题解决方案

1. EditContext.OnFieldChanged 不触发

原因

手动创建的EditContext未与RadzenTemplateForm实际使用的上下文关联,或表单字段未正确绑定到ViewModel属性,导致字段变更事件无法触发。

解决方案

放弃手动实例化EditContext,让RadzenTemplateForm自动生成上下文,再通过组件引用绑定事件:

.razor 文件修改

@implements IDisposable

<RadzenTemplateForm @ref="formRef" id="ConferenceCityForm" TItem="ConferenceCityVm" Data="ConferenceCity" 
                    Submit=@OnValidSubmit InvalidSubmit=@OnInvalidSubmit>
    <!-- 确保每个字段使用@bind-Value绑定到ConferenceCity的属性 -->
    <RadzenTextBox @bind-Value="@ConferenceCity.CityName" />
    <!-- 其他表单字段... -->
</RadzenTemplateForm>

.razor.cs 文件修改

private RadzenTemplateForm<ConferenceCityVm> formRef;
private bool IsDirty { get; set; } = false;

protected override void OnAfterRender(bool firstRender)
{
    if (firstRender)
    {
        // 绑定表单实际使用的EditContext字段变更事件
        formRef.EditContext.OnFieldChanged += EditContextOnFieldChanged;
    }
    base.OnAfterRender(firstRender);
}

private void EditContextOnFieldChanged(object sender, FieldChangedEventArgs e)
{
    IsDirty = true;
}

public void Dispose()
{
    if (formRef?.EditContext != null)
    {
        formRef.EditContext.OnFieldChanged -= EditContextOnFieldChanged;
    }
}

2. NavigationManager相关事件(LocationChangingHandler、OnBeforeInternalNavigation)不触发

原因

Radzen Dialog是模态弹窗,其打开/关闭属于组件层级渲染,不会触发浏览器路由导航,因此NavigationManager的导航事件不会被触发。

解决方案

改用Radzen Dialog的关闭拦截机制处理未保存更改:

.razor.cs 文件修改

[Inject]
public DialogService DialogService { get; set; }
private IDisposable dialogCloseSubscription;

protected override void OnInitialized()
{
    // 注册Dialog关闭前的拦截事件
    dialogCloseSubscription = DialogService.BeforeClose.Subscribe(async () =>
    {
        if (IsDirty)
        {
            var confirmResult = await DialogService.Confirm("确定要丢弃未保存的更改吗?");
            // 返回false阻止Dialog关闭,true允许关闭
            return confirmResult ?? false;
        }
        return true;
    });
    base.OnInitialized();
}

// 自定义关闭按钮的处理逻辑(若有)
private async Task CloseDialog()
{
    if (IsDirty)
    {
        var confirmResult = await DialogService.Confirm("确定要丢弃未保存的更改吗?");
        if (!confirmResult.HasValue || !confirmResult.Value)
        {
            return;
        }
    }
    DialogService.Close();
}

public void Dispose()
{
    dialogCloseSubscription?.Dispose();
    if (formRef?.EditContext != null)
    {
        formRef.EditContext.OnFieldChanged -= EditContextOnFieldChanged;
    }
}

.razor 文件添加取消按钮(可选)

<RadzenButton Text="取消" Click=@CloseDialog />

内容的提问来源于stack exchange,提问作者Tanya Adamkewicz

火山引擎 最新活动