Question

所以我将应用程序细分为几个部分。我在这些部分中放置了部分视图（请记住，我可以做到最好，尽管部分视图可能是内容管理的方式）。我有一个包含所有这些部分的主视图。现在我希望能够根据用户点击按钮一次只查看一个进入下一步的方法。

Fill in name
Name:
Steve

button: Next Step

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

我在缠绕这个问题时遇到了很多麻烦。我试过调用viewbag.step = "0"并在onclick中为按钮执行viewbag.step = "1"的javascript，并在布局视图中为if viewbag.step == "0" show step 1 if viewbag.step == "1" show step 2 etc etc执行条件，但由于此不起作用一个参考问题。

Answer 1

您可以在每个部分内呈现带有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>

}

然后你的偏见：

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

</div>

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

</div>

等等...

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

部分视图的逐步应用程序

2 个答案: