razor MVC EF how to show and hide a div based on model condition

Question

Total noob here :) I have simple form on my index.cshtml that submits values to m y controller and which also displays the results. I would like this form to be hidden @if (Model != null). It looks like this:

<div id="inputform" class="visible">
    <form id="certlookup" class="form-inline" role="form" method="get">
        <div class="input-group">
            <div><input class="form-control" name="prefix" placeholder="99" maxlength="2" type="number" required /></div>
            <div><select class="form-control dropdown" name="type" id="type"><option value="A">A</option><option value="B">B</option></select></div>
            <div>
                <input class="form-control" name="suffix" placeholder="9999" maxlength="4" type="number" required />
            </div>
            <div>
                <input class="btn btn-primary" type="submit" value="Go!" />
            </div>
        </div>
    </form>
</div>
@if (Model != null)
{...}

I'm not sure what the best way to do this is. I tried to set a variable after my Model != null statement, setting the class=@hidden, but that variable wasn't available in the form above.

Is this going to be possible? This is for a mobile first site so I'd like the form input to go away after the results are provided but ideally I don't want to use a separate page for form and results. Thanks!

Answer 1

Just check if Model is null before the form:

@if (Model == null)
{
<div id="inputform" class="visible">
    <form id="certlookup" class="form-inline" role="form" method="get">
        <div class="input-group">
            <div><input class="form-control" name="prefix" placeholder="99" maxlength="2" type="number" required /></div>
            <div><select class="form-control dropdown" name="type" id="type"><option value="A">A</option><option value="B">B</option></select></div>
            <div>
                <input class="form-control" name="suffix" placeholder="9999" maxlength="4" type="number" required />
            </div>
            <div>
                <input class="btn btn-primary" type="submit" value="Go!" />
            </div>
        </div>
    </form>
</div>
}

Or maybe set the class in the "inputformdiv":

@{
   string cssClass = Model == null ? "visible" : "hidden";
}
<div id="inputform" class="@cssClass">
<form id="certlookup" class="form-inline" role="form" method="get">
    <div class="input-group">
        <div><input class="form-control" name="prefix" placeholder="99" maxlength="2" type="number" required /></div>
        <div><select class="form-control dropdown" name="type" id="type"><option value="A">A</option><option value="B">B</option></select></div>
        <div>
            <input class="form-control" name="suffix" placeholder="9999" maxlength="4" type="number" required />
        </div>
        <div>
            <input class="btn btn-primary" type="submit" value="Go!" />
        </div>
    </div>
</form>