Step by step application with partial views

Question

So I have an application broken down into sections. These sections I put in there own partial views(keep in mind I can do it what ever way is best just though partial view might be that way for content management). I have a main view that contains all of these partials. Now I would like a way to only view one at a time based on a user clicking on a button to go to the next step.

Fill in name
Name:
Steve

button: Next Step

when the client clicks the button next step it will cause the partial view to change from step 1 to step 2. etc etc.

I am having a lot of trouble wrapping my head around this. I have tried calling a viewbag.step = "0" and in the onclick for the buttons doing a javascript for viewbag.step = "1" and in the layout view doing a condition for if viewbag.step == "0" show step 1 if viewbag.step == "1" show step 2 etc etc but that doesn't work because of a reference issue.

score 0 · Answer 1 · answered Nov 22 '13 at 19:43

You could render a div with an ID within each partial and then have the onclick set the next partial to visible, so to speak. You'd have to include jQuery for this example.

Something like this:

Main 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>

}

And then your partials like:

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

</div>

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

</div>

Etc...

score 0 · Answer 2 · answered Feb 25 '16 at 05:01

Considering you have 3 sections Section 1,Section 2,Section 3.

Write 3 action methods that return partial view.

[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();
}

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

Step by step application with partial views

2 Answers2