Javascript 带局部视图的逐步应用程序

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

Fill in name
Name:
Steve

button: Next Step

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

---

我在这件事上遇到了很多麻烦。我尝试调用了一个

viewbag.step=“0”

，在onclick中为按钮执行了一个

viewbag.step=“1”

的javascript，在布局视图中为

if viewbag.step==“0”显示步骤1 if viewbag.step==“1”显示步骤2等等，但由于参考问题，这不起作用
 可以在每个部分中呈现一个ID为的
div
，然后将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>

}

@使用（Html.BeginForm（））
{
@Html.RenderPartial（“_PartialView1”）；
@Html.RenderPartial（“_PartialView2”）；
....
点击我
var pageNum=1；
函数setPage（）
{
var oldPageId=“#Partial”+pageNum；
pageNum++；
var idToSet=“#部分”+pageNum；
//切换可见性
$（oldPageId）.toggle（）；
$（idToSet.toggle（）；
}
}

然后你的部分像：

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

</div>

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

</div>



等等。
考虑到你有三个部分，第一部分，第二部分，第三部分

编写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' />
}

@使用（Html.BeginForm（“第1节”，“主页”，FormMethod.Post））
{
步骤1：基本细节
@Html.LabelFor（m=>m.Name）

@Html.TextBoxFor（m=>m.Name）
@Html.ValidationMessageFor（m=>m.Name）



}