如何创建一个ASP.NET MVC向导与后退按钮的支持？ [英] How do I create an ASP.NET MVC wizard with back button support?

问题描述

我创建的ASP.NET MVC应用程序，我有我的网页上的一个向导式界面的需求。

I am creating an app with ASP.NET MVC and I have the need for a wizard style interface on one of my pages.

下面是我在做什么，到目前为止：

我创建了一个页面，5格。所有拥有显示：无在CSS文件中设置。当用户点击在网页第一次，我使用的jquery使用要显示在第一步骤：

Here is what I'm doing so far:
I have created a page with 5 divs. All have "display: none" set in the css file. When the user hits the page for the first time, I use jquery to show the first step using:

$("#callStep1").show();

第一步骤具有一个选择列表，当用户进行选择时执行以下code：

The first step has a select list and when the user makes a selection the following code is executed:

$("#callStep1").hide();
$("#callStep2").show();

这继续，直到用户获得第5步，并点击提交按钮。一切正常，除非我在步骤2，3，4，5，撞上后面的按钮，它需要我所有的方式回到页面我是在之前的时候我真的只是想去的previous一步。

This continues until the user gets to step 5 and clicks the submit button. Everything is working fine except if I'm on step 2, 3, 4, 5 and hit the back button, it takes me all the way back to the page I was on before when I really just want to go to the previous step.

我怎样才能使这项工作？我用＃和创建网页上的链接，但不知道是否有更好的办法看到一些例子。

How can I make this work? I've seen some examples using "#" and creating links on the page, but not sure if there is a better way.

有什么建议？

推荐答案

如果你不绝对需要向导页上AJAX，可以通过一个成功的表单POST之后返回不同的视图来做到这一点。

If you don't absolutely need AJAX on the wizard page, it is possible to do this by returning different views after a successful form POST.

在控制器：

[AcceptVerbs(HttpVerbs.Get)]
public ActionResult DoSomethingLong(int somethingId, int step)
{
  MyModelType myModel = MyModelFactory.Fetch(somethingId);

  switch(step)
  {
    case 1:
      return View("Step1", myModel);
      break;
    case 2:
      return View("Step2", myModel);
      break;
  }
}

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult DoSomethingLong(int somethingId, int step)
{
   MyModelType myModel = MyModelFactory.Fetch(somethingId);

   if (TryUpdateModel(myModel))
   {
       //Successful update.  Send to next step.
       return RedirectToAction("DoSomethingLong", new {somethingId = somethingId, step = step + 1}
   }
   else
   {
       //Update failed, redisplay current View with validation errors.
       return View(myModel);
   }
}

这篇关于如何创建一个ASP.NET MVC向导与后退按钮的支持？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！