How to conditionally display HTML in MVC?

Question

I am trying to show specific HTML in my page depending of IF conditions, I have a static variable to determine the status of the page and what to show, the problem is that after the first page load, no more html is rendered.

This is one of my if :

   @if (WhiteLabel.Controllers.GlobalVariables.Step == 2)
            {
                <text>
            <div id="thirdDiv" data-step="3" class="no-show">
                <div class="span6">

I have a button to change the value of the global variable like :

<form  action="UploadPhoto/setNext" method="post">
                                <button class="btn" type="submit">siguiente</button>
                            </form>

And it goes to this controller's method :

public ActionResult setNext()
        {
            if (GlobalVariables.Step < 3)
            {
                GlobalVariables.Step  += 1;
            }
            else
            {
                RedirectToAction("AdjustDots", "VirtualTesterController");
            }
            return View("Load");
        }

UPDATE FULL CODE :

    @if (WhiteLabel.Controllers.GlobalVariables.Step == 1)
    {
   <div id="firstDiv" data-step="1" >
        <!-- SUBIR FOTO -->
        <div class="row-fluid">
            <div class="span3">
                <div class="md-your-data">
                    <div class="hd">
                    <h2>1. @ViewBag.Strings["completarDatos"]</h2>
                    </div>
                    <div class="bd">
                        <ul>
                            <li>
                                <div class='selectBox'>
                                <span class='selected' id="ageSelected">@ViewBag.Strings["rangoEdad"]</span>
                                    <span class='selectArrow'></span>
                                    <div class="selectOptions">
                                        <span class="selectOption" value="Option 1">Option 1</span>
                                        <span class="selectOption" value="Option 2">Option 2</span>
                                        <span class="selectOption" value="Option 3">Option 3</span>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class='selectBox'>
                                <span class='selected' id="skinToneSelected">@ViewBag.Strings["tonoPiel"]</span>
                                    <span class='selectArrow'></span>
                                    <div class="selectOptions">
                                        <span class="selectOption" value="Option 1">Option 1</span>
                                        <span class="selectOption" value="Option 2">Option 2</span>
                                        <span class="selectOption" value="Option 3">Option 3</span>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class='selectBox'>
                                <span class='selected' id="skinTypeSelected">@ViewBag.Strings["tipoPiel"]</span>
                                    <span class='selectArrow'></span>
                                    <div class="selectOptions">
                                        <span class="selectOption" value="Option 1">Option 1</span>
                                        <span class="selectOption" value="Option 2">Option 2</span>
                                        <span class="selectOption" value="Option 3">Option 3</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="ft">
                    </div>
                </div>
            </div>

            <div class="span3">
                <div class="md-upload-photo">
                    <div class="hd">
                    <h2>2. @ViewBag.Strings["SubiTuFoto"]</h2>
                    </div>
                    <div id="pictureDiv" class="bd">
                        <div id="dropPicture" class="photo-cont no-photo" ondragover="allowDrop(event)" ondrop="onDrop(event)">
                            <div id="picDiv"></div>
                        </div>

                    </div>
                    <div class="ft">
                        <div class="file-input-wrapper">
                            <button class="btn-file-input">@ViewBag.Strings["subir"]</button>
                            <input id='file' class="btn-file" type='file' accept="image/*" onchange="manageFilePicker(event)" />
                        </div>

                        @using (Html.BeginForm("setNext", "UploadPicture"))
                        {
                             <button class="btn"  type="submit">Siguiente</button>
                        }

                    </div>
                </div>
            </div>

            <div class="span6">
                <div class="md-model-photo">
                    <div class="hd">
                    <h2>@ViewBag.Strings["Elegirfotodemodelo"] </h2>
                    </div>
                    <div class="bd">
                        <ul id="modelsList">
                            <li>
                                <img src="~/Content/images/imagen-modelo-upload.png" alt="" />
                            </li>
                            <li>
                                <img src="~/Content/images/imagen-modelo-upload.png" />
                                <img src="~/Content/images/imagen-modelo-upload.png" alt="" />
                            </li>
                            <li>
                                <img src="~/Content/images/imagen-modelo-upload.png" alt="" />
                            </li>
                            <li>
                                <img src="~/Content/images/imagen-modelo-upload.png" alt="" />
                            </li>
                        </ul>
                    </div>
                    <div class="ft">
                    </div>
                </div>
            </div>

        </div>
        <!-- END SUBIR FOTO -->
       </div>
    }


      @if (WhiteLabel.Controllers.GlobalVariables.Step > 2)
    {
    <div class="row-fluid">
        <!-- BEGIN MANAGE PHOTO -->

        <div id="secondDiv" data-step="2" class="no-show">
            <div class="span6">
                <div class="md-adjust-photo-img">
                    <div class="bd">
                        <div class="img-cont">
                            <img src="~/Content/images/img-modelo.png" alt="" />
                        </div>
                    </div>
                </div>
            </div>
             @if (WhiteLabel.Controllers.GlobalVariables.Step == 2)
             {
            <div id="thirdDiv" data-step="3" class="no-show">
                <div class="span6">
                    <div class="md-adjust-photo-data step-1">
                        <div class="hd">
                        <h3>4. @ViewBag.Strings["encuadrarFoto"]</h3>
                        <p>@ViewBag.Strings["encuadrarFotoDesc"]</p>
                        </div>
                        <div class="bd">
                        </div>
                        <div class="ft">
                            @using (Html.BeginForm("setPrevious", "UploadPicture"))
                            {
                                <button class="btn" type="submit">Atras</button>
                            }
                            @using (Html.BeginForm("setNext", "UploadPicture"))
                            {
                                <button class="btn" type="submit">Siguiente</button>
                            }
                        </div>
                    </div>
                </div>
            </div>
             }
             @if (WhiteLabel.Controllers.GlobalVariables.Step == 3)
             {
            <div id="fourthDiv" data-step="4" class="no-show">
                <div class="span6">
                    <div class="md-adjust-photo-data step-2">
                        <div class="hd">
                <h3>5. @ViewBag.Strings["brilloYcontraste"]</h3>
                <p>@ViewBag.Strings["brilloYcontrasteDesc"]</p>
                        </div>
                        <div class="bd">
                            <div class="col">
                    <span>@ViewBag.Strings["brightness"]</span>
                                <div class="tone-bar">
                                    <span></span>
                                </div>
                            </div>
                            <div class="col">
                    <span>@ViewBag.Strings["contrast"]</span>
                                <div class="tone-bar">
                                    <span></span>
                                </div>
                            </div>
                        </div>
                        <div class="ft">
                            @using (Html.BeginForm("setPrevious", "UploadPicture"))
                            {
                                <button class="btn" type="submit">Atras</button>
                        }
                            @using (Html.BeginForm("setNext", "UploadPicture"))
                            {
                                <button class="btn" type="submit">Siguiente</button>
                        }
                        </div>
                    </div>
                </div>
            </div>
             }
        </div>
    </div>

    }

Answer 1

Firstly, I would recommend you make use of partial views for your selective HTML - it would clean up your code. So imagine that's what I have done for you here, this gives you purely the logic

@if (WhiteLabel.Controllers.GlobalVariables.Step == 1)
{
    @Html.RenderPartial("Step1")
}

@if (WhiteLabel.Controllers.GlobalVariables.Step > 2)
{
    // some default HTML here
    @if (WhiteLabel.Controllers.GlobalVariables.Step == 2)
    {
        @Html.RenderPartial("Step2")
    }
    @if (WhiteLabel.Controllers.GlobalVariables.Step == 3)
    {
        @Html.RenderPartial("Step3")
    }
}

So looking at this purely from a logic POV, for there to be no output Step needs to be > 3. Given you are using static variable the potential for that to happen is plausible because you have what's known as a race condition. If 2 threads (i.e. 2 sessions) attempt to proceed to the next page both will attempt to increment Step - where the race condition comes in is

// Assume 'Step' is 2 here
// Session A checks first, then Session B - both checks pass
if (GlobalVariables.Step < 3)
{
    // Session A increments first, then Session B
    GlobalVariables.Step += 1; // value is now 4
}

On top of that, your application becomes session independent i.e. if 1 user is on Step 3, so is everyone else!

I recommend store your Step property in the users Session.

Answer 2

This isn't going to work. The variable isn't going to persist because the controller is rebuilt on every post back. You have some options, but I think the best would be this; store the value in Session so it can be retrieved during post back and it's specific to that user's session.

So, in your controller, you might do something like this:

var step = Session["step"] == null ? 1 : (int)Session["step"];
step++;
this.ViewBag.Step = step;
Session["step"] = step;

And now in your view, instead of checking the static property, leverage the ViewBag:

(int)ViewBag.Step == 1

for example. In fact, since it's dynamic, you don't even have to cast:

ViewBag.Step == 1

or maybe:

ViewBag.Step < 3