Open Closed

Redirect Forms module in Blazor Server #4804


User avatar
0
davidlbrenchley@gmail.com created

I would like to use a form questionnaire as part of a wizard/stepped process. After a user has hit the submit button, how would I go about redirecting the user to a page that I want to send than rather than the default formresponse that the form sends the user to? I would also need to be able to grab the id of the user response as part of that redirect.

  • ABP Framework version: v7.1.0
  • UI type: Blazor
  • DB provider: EF Core
    • Tiered (MVC) or Identity Server Separated (Angular): yes / no
  • Exception message and stack trace:
  • Steps to reproduce the issue:"
Markdown supported.
Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

5 Answer(s)
  • User Avatar
    0
    gterdem created
    Senior .NET Developer

    The submit button located in the form is basically a view component called ViewFormViewComponent.

    Currently, the redirection happens hard-codedly in the component's javascript which is written in Vue.js:

    async submitAnswers(submittedForm) {
        ...
        
        try {
            const result = await this.formResponseService.saveAnswers(this.formId, postData);
            location.href = `${window.origin}/Forms/${result.id}/FormResponse`;
        } 
        ...
    },
    

    You can override this component or modify it however I am not sure if it will be a good fit for a wizard/step type of process.

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    davidlbrenchley@gmail.com created

    I have no VUE experience. Is there a smaller subcomponent that just has the form that I could retrieve the results myself and push forward?

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    liangshiwei created
    Fullstack Developer

    Hi,

    You can overwrite the code of the module by creating a JS file in the same path.

    The path is Pages/Forms/Shared/Components/ViewForm/Default.js.

    The redirect code is location.href = ${window.origin}/Forms/${result.id}/FormResponse;

    Default.js

    https://gist.github.com/realLiangshiwei/2cbe40167c85b22e13148b6558bea864

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    davidlbrenchley@gmail.com created

    Thank you. I'll have to try this out. It'll be 3 or 4 weeks before I can get to implementing this

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
  • User Avatar
    0
    liangshiwei created
    Fullstack Developer

    ok

    Markdown supported.
    Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v10.8.0-preview. Updated on September 23, 2026, 09:57
1
ABP Assistant
🔐 You need to be logged in to use the chatbot. Please log in first.