C＃MVC：多步骤表单实现

Question

我们正在构建MVC多步骤表单，它将包含4个步骤： - 联系人详细信息，汽车详细信息，汽车图像，汽车状况。在每一步，我们都会向用户询问很少与汽车相关的详细信息：

我们必须将每个步骤信息保存到数据库，并且我们为每个步骤制作了单独的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，单击next =＆gt;填写step2，单击next，从step3返回步骤1并编辑一些内容。现在，用户再次通过顶部导航转到步骤3。因此，对于这种情况，我们将不得不发送完整的数据到目前为止每个请求。

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

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

Answer 1

解决方案1 ​​

我看到这种方式你可以简单地保存数据库中的每一步，并避免在步骤3中发送step1和step2。

示例：

Step1：填写详细信息，保存到db并返回guid。 使用此guid作为整个inquery的参考。

Step2用给定的guid完成了对db的保存，但是还有一个枚举，指示你所在的查询部分（例如汽车）。

如果你退后一步，你知道你有什么问题，因为你拥有独特的guid，你只需将枚举作为第二个参数发送，你将获得该步骤的desiered数据。如果您没有登录，那么如果用户退出浏览器并且在完成db清理的计划任务之前没有返回，那么进行某种数据库清理将是一种很好的做法。即使使用登录，这也不错，但是通过登录，用户可以回到以前的状态。

解决方案2

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

解决方案3

你还会使用mvc tempdata，有关here的更多信息 适用于给定的请求，在您的情况下，您将不断需要分配 请求之间的数据，直到最后一步。

我推荐解决方案1，但如果您想尝试其他解决方案，我希望我能给您一些帮助。

Answer 2

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