Razor page - How to popup modal on valid submit?

Question

Razor page - How to popup modal on valid submit?

Cenk 1,036

Hello there,

I wonder if there is a way to popup a modal saying "Your transaction was successful." before navigating to customers page?

private async Task OnValidSubmit()  
    {  
        if (this.customer != null)  
        {  
            await AddCustomerUseCase.ExecuteAsync(this.customer);  
            NavigationManager.NavigateTo("/customers");  
        }  
              
    }

Thanks in advance.

Rena Ni - MSFT 2,066 Reputation points

2022-07-11T02:17:13.647+00:00

Hi @Cenk , do you have implemented modal? If so, pls share enough code to us. Besides what is your AddCustomerUseCase.ExecuteAsync method here? Which template do you use, Blazor Server or Blazor WebAssembly?

Cenk 1,036

Hi @Rena Ni - MSFT ,

I haven't implemented a modal. It is a Blazor Server App.

public class AddCustomerUseCase : IAddCustomerUseCase  
    {  
        private readonly ICustomerRepository _customerRepository;  
  
        public AddCustomerUseCase(ICustomerRepository customerRepository)  
        {  
            this._customerRepository = customerRepository;  
        }  
        public async Task ExecuteAsync(Customer customer)  
        {  
            await _customerRepository.AddCustomerAsync(customer);  
        }  
    }

Rena Ni - MSFT 2,066 Reputation points

2022-07-11T06:16:47.74+00:00

Hi @Cenk , so actually your issue here even do not know how to implement modal and you need implement it and display it before navigating, right? For how to implements modal, you can try Blazored Modal. Besides, did the modal pop up after the AddCustomerUseCase.ExecuteAsync successful return? If so, you need add a flag to your return result to judge if it succeed or not.

Your answer

Rena Ni - MSFT 2,066 Reputation points

2022-07-11T02:17:13.647+00:00

Hi @Cenk , do you have implemented modal? If so, pls share enough code to us. Besides what is your AddCustomerUseCase.ExecuteAsync method here? Which template do you use, Blazor Server or Blazor WebAssembly?
Cenk 1,036 Reputation points

2022-07-11T05:16:06.403+00:00

Hi @Rena Ni - MSFT ,

I haven't implemented a modal. It is a Blazor Server App.

public class AddCustomerUseCase : IAddCustomerUseCase { private readonly ICustomerRepository _customerRepository; public AddCustomerUseCase(ICustomerRepository customerRepository) { this._customerRepository = customerRepository; } public async Task ExecuteAsync(Customer customer) { await _customerRepository.AddCustomerAsync(customer); } }
Rena Ni - MSFT 2,066 Reputation points

2022-07-11T06:16:47.74+00:00

Hi @Cenk , so actually your issue here even do not know how to implement modal and you need implement it and display it before navigating, right? For how to implements modal, you can try Blazored Modal. Besides, did the modal pop up after the AddCustomerUseCase.ExecuteAsync successful return? If so, you need add a flag to your return result to judge if it succeed or not.

Share via

Razor page - How to popup modal on valid submit?

Your answer