razor MVC EF如何根据模型条件显示和隐藏div

Question

总noob在这里:)我的index.cshtml上有一个简单的表单,它将值提交给我的控制器,并显示结果.我希望这个表单隐藏@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>
@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

只需在表单前检查Model是否为null:

@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>
}

或者可以在"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>