C# MVC：多步骤表单实现答案

【问题标题】：C# MVC: Multi step form implementationC# MVC：多步骤表单实现
【发布时间】：2018-01-19 06:15:03
【问题描述】：

我们正在构建 MVC 多步骤表单，该表单将包含 4 个步骤：- Contact-details、Car-details、Car-images、Car-condition。在每一步，我们都会向用户询问一些与汽车相关的详细信息，如下所示：

我们必须将每一步的信息保存到数据库中，并且我们为每一步制作了单独的 MVC 控制器，例如：

[HttpGet]
[Route("contact-details/")]
public ActionResult ContactDetails()
{
    return View("~/Views/ContactDetails.cshtml");
}

[HttpPost]
[Route("contact-details/")]
public ActionResult ContactDetails(ListingDetails listingDetails)
{
    if (ModelState.IsValid)
        //extract ContactDetails from ListingDetails and save in db
        return View("~/Views/CarDetails.cshtml");
    return View("~/Views/ContactDetails.cshtml");
}

[HttpPost]
[Route("car-details/")]
public ActionResult CorDetails(ListingDetails listingDetails)
{
    if (ModelState.IsValid)
      //extract CorDetails from ListingDetails and save in db
      return View("~/Views/CarImages.cshtml");
    return View("~/Views/CarDetails.cshtml");
}

[HttpPost]
[Route("car-images/")]
public ActionResult CarImages(ListingDetails listingDetails)
{
    if (ModelState.IsValid)
      //extract CarImages from ListingDetails and save in db
      return View("~/Views/CarConditions.cshtml");
    return View("~/Views/CarImages.cshtml");
}

[HttpPost]
[Route("car-condition/")]
public ActionResult CarCondition(ListingDetails listingDetails)
{
    if (ModelState.IsValid)
      //extract CarCondition from ListingDetails and save in db
      return View("~/Views/ThankYou.cshtml");
    return View("~/Views/CarConditions.cshtml");
}

ListingDetails 具有以下结构：

class ListingDetails
{
    public ContactDetails contactDetails;
    public CarDetails carDetails;
    public CarImages carImages; 
    public CarConditions carConditions;
}

在下一次点击 Contact-details 表单时，我们将只发送 step1 数据。在下一次点击 Car-details 表单时，我们将发送 step1+step2 数据。下次点击 Car-images 表单时，我们将发送 step1+step2+step3 数据。下次点击 Car-conditions 表单，我们将发送 step1+step2+step3+step4 数据。

我们发送所有先前的步骤数据以及每次点击是因为顶部导航。例如，用户可以填写 step1，单击下一步 => 填写 step2，单击下一步，从 step3 回到 step1 并编辑某些内容。现在，用户通过顶部导航再次进入第 3 步。因此，对于这种情况，我们必须发送每个请求填充的完整数据。

我们能否以某种方式避免在每一步中发送所有先前的步骤数据？

这是在 MVC 中实现多步表单的正确方法吗？

【问题讨论】：

您是只使用一个表格来保存详细信息，还是每个步骤都有单独的表格？如果找不到您的答案，请关注this，请告诉我更多解释。您项目的不同之处在于您想将数据保存在数据库中，而不是使用 Session
每一步数据都必须保存在新表中
@AliZeinali：这没有帮助，因为我不想为此使用会话存储，因为表单的长度太长了

标签： c# asp.net-mvc forms asp.net-mvc-4 asp.net-mvc-5

【解决方案1】：

解决方案 1

在我看来，您可以简单地将每个步骤保存在数据库中，并避免在步骤 3 中发送 step1 和 step2。

例子：

Step1 : 填写详细信息，保存到db并返回一个guid。将此指南用作整个查询的参考。

Step2 使用给定的 guid 完成了保存到 db，但还使用了一个枚举来指示您在查询的哪一部分（例如汽车）。

如果您退后一步，您就会知道您正在处理什么查询，因为您拥有唯一的 guid，并且您只需将枚举作为第二个参数发送，您将获得该步骤所需的数据。如果您没有登录名，那么如果用户退出浏览器并且在完成数据库清理计划任务之前不回来，那么进行某种数据库清理将是一个好习惯。即使有登录也很好，但登录后用户可以回到以前的状态。

解决方案 2

如果由于某种原因您不想遵循上述规定您可以将数据保存在浏览器中，如果您使用 ajax 请求而不重新加载页面，则可以将其保存在对象中，并在每次下一次/后退单击后检查它们是否有数据，并通过脚本显示数据。我不推荐这种方法，因为如果页面重新加载并且脚本很重，您可能会丢失数据。

解决方案 3

你也可以使用 mvc 临时数据，更多关于 here 的信息适用于给定的请求，在您的情况下，您将不断需要分配请求之间的数据，直到进入 finalysing 步骤。

我推荐解决方案 1，但如果您想与其他人进行实验，我希望我能给您一些帮助。

【讨论】：

【解决方案2】：

最好在最后一步向服务器发送数据。在此之前，视图只需在按钮单击或选项卡单击时切换。

【讨论】：