6

I am working on a web application that involves the user filling out a multi-step form that spans several pages. The form has tabbed navigation across the top (these links do not submit the current page) and a next button at the bottom (which does submit). I am considering several strategies for handling form submission/validation:

  1. one action method and view per form page. When you hit next, it submits the form to the action method for the next page. If there are validation errors, you are redirected back to the previous page:

    • URL's are descriptive and can be copy-pasted
    • Only redirects in the error case
    • Since the redirect does not have the form data, we lose context about the submission which makes it hard to display certain error messages
    • The same validation logic works for redirecting the user if they try to visit a step in the flow that they aren't ready for yet

  2. one action method and view per form page. When you hit next, it submits the form to the current page action. If there are validation errors, the same view is returned. Otherwise, we redirect to the next page action:

    • URL's are descriptive and can be copy-pasted
    • Redirects are very common (not sure if this is bad)
    • When displaying validation errors, we are in the same request as the form submission so we have full access to the invalid input
    • Have to pass additional context if we want the ability to, for example, add a "Previous" button which also submits

  3. one action method for ALL pages. URL's contain additional context about the step being submitted (e.g. MyController/MyAction/{step}). The controller message selects which view page to return depending on validation and the current step.

    • URL's are not descriptive (e. g. if I submit step 1 to go to step 2, then the URL the user sees will be the same regardless of whether page 1 (invalid) or page 2 is returned
    • No redirects
    • When displaying validation errors, we are in the same request as the form submission so we have full access to the invalid input

  4. A different method I haven't listed here

I have tried to enumerate what I see as some of the pros and cons of each method, but I would be interested to know:

  • What are other pros and cons of these methods? Are mine correct? Could some of the cons I've listed be designed around?
  • Is there a standard approach to this problem which I should be using? If so, why is it the standard approach?
4

1 回答 1

2

我强烈推荐选项 2，稍作修改。您可能还想考虑为每个操作/视图创建一个视图模型。如果您有一个跨越所有页面的模型，则将跨所有属性进行验证，这意味着即使用户只能在每个屏幕上编辑模型的一部分，他们也可能会收到他们看不到的属性的验证警告。我们最近在一个项目中这样做了，效果很好。您必须在后端进行一些数据操作才能将所有内容重新组合在一起，但最终还是值得的。

正如您所说，您的 URL 将是可深度链接的，这意味着用户可以复制/粘贴，更重要的是，他们可以将页面添加为浏览器中的收藏夹，让他们很容易回到同一个地方。在我看来，这使得选项 3 过时了。

您还将受益于您的所有导航逻辑都发生在一个地方这一事实。您必须将“向导”的状态存储在客户端（您当前所在的页面）上，以便您的控制器知道提交时要做什么。您需要分析向导的状态并决定用户下一步需要去哪里。如果您选择选项 1，您将不知道您“来自”哪里，并且服务器验证错误将难以显示给客户端。这是 POST - REDIRECT - GET 模式的一个很好的例子。每个页面将有 2 个操作，一个采用简单 id 的 GET 和一个采用更复杂模型的 POST。发布服务器，找出下一步去哪里，重定向到 GET。

最后，考虑您的上一个按钮只是直接链接到上一步，而不是提交表单。否则，用户可能会卡在无效步骤上。这发生在我们身上，而且效果很好。

希望这会有所帮助。祝你好运！

于 2012-11-29T23:12:22.587 回答