javascript - 带有部分视图的分步应用程序

Question

因此，我将应用程序分解为多个部分。这些部分我放在那里自己的部分视图（请记住，我可以做任何最好的方式，尽管部分视图可能是内容管理的那种方式）。我有一个包含所有这些部分的主视图。现在，我想要一种方法，根据用户单击按钮进入下一步，一次只查看一个。

Fill in name
Name:
Steve

button: Next Step

当客户端单击下一步按钮时，它将导致局部视图从第 1 步更改为第 2 步。等等。

我在解决这个问题时遇到了很多麻烦。我已经尝试viewbag.step = "0"在 onclick 中调用 a and 来为按钮执行 javascriptviewbag.step = "1"并在布局视图中执行条件，if viewbag.step == "0" show step 1 if viewbag.step == "1" show step 2 etc etc但由于参考问题，这不起作用。

Answer 1

您可以在每个部分中呈现div带有 ID 的 a，然后让 onclick 将下一个部分设置为可见，可以这么说。对于这个例子，你必须包括 jQuery。

像这样的东西：

主 CSHTML

@using(Html.BeginForm())
{
    @Html.RenderPartial("_PartialView1");
    @Html.RenderPartial("_PartialView2");
    ....

<button onclick="setPage()" >Click me</button>
<script type="text/javascript">

        var pageNum = 1;
        function setPage()
        {
           var oldPageId = "#Partial" + pageNum;
            pageNum++;
            var idToSet = "#Partial" + pageNum;
            // toggles visibility
            $(oldPageId).toggle();
            $(idToSet).toggle();
        }

        </script>

}

然后你的部分像：

<div id="Partial1">
<input type="text" id="Text1"></input>

</div>

   <div id="Partial2" style="visibility:hidden">
<input type="text" id="Text2"></input>

</div>

ETC...

Answer 2

考虑到您有 3 个部分，第 1 部分，第 2 部分，第 3 部分。

编写 3 个返回局部视图的操作方法。

[HttpPost]
public ActionResult Section1Details(Section1 data,string prevBtn, string nextBtn)
{
  if (nextBtn != null)
  {
    if (ModelState.IsValid)
    {
      // Do the logic
      return View("Section 2");
    }
  }
  return View();
}

[HttpPost]
public ActionResult Section2Details(Section2 data,string prevBtn, string nextBtn)
{
  if (prevBtn!=null)
  {
    // wirte logic here
    return View("Section1",bd);
  }

  if (nextBtn != null)
  {
    if (ModelState.IsValid)
    {
      // Do the logic
      return View("Section3");
    }
  }
  return View();
}

[HttpPost]
public ActionResult Section3Details(Section3 data,string prevBtn, string nextBtn)
{
  if (prevBtn!=null)
  {
    // wirte logic here
    return View("Section2",bd);
  }

  if (nextBtn != null)
  {
    if (ModelState.IsValid)
    {
      // Do the logic
      // Save changes
      return View("Success");
    }
  }
  return View();
}

在你看来，

@using (Html.BeginForm("Section1", "Home", FormMethod.Post))
{
<h1>Step 1 : Basic Details</h1>
@Html.LabelFor(m=>m.Name)<br />
@Html.TextBoxFor(m=>m.Name)
@Html.ValidationMessageFor(m=>m.Name)<br />
<br />
<input type="submit" name="nextBtn" value='Next Step' />
}