CODEWITHSUNDEEP
asp.net-mvc
Paul Coan
Paul Coan

Reputation: 302

ASP.Net MVC Show/Hide Content

Ok I have the following View

@model IEnumerable<WebApplication3.Models.user>

@{
    ViewBag.Title = "Password Management";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section title {<h1>@ViewBag.Title</h1>}

<div id="page-block" class="page-block-three row">

    <div style="margin-top: 30px;" class="col-lg-offset-2 col-lg-8">
        @using (Html.BeginForm())
        {
            <div class="input-group">
                @Html.TextBox("SearchString", null, new { @class = "form-control ccl-form", @style = "z-index: 10", @placeholder = "Enter Username"})
                <div class="input-group-btn">
                    <button class="btn ccl-btn ccl-btn-red ccl-btn-search" type="submit"><i class="fa fa-search"></i></button>
                </div>
            </div>
        }
    </div>

    <div class="col-lg-offset-3 col-lg-6">
        @foreach (var item in Model)
        {
            <div class="details-block">
                @Html.DisplayFor(modelItem => item.UserName)
                <button type="button" class="btn ccl-btn ccl-btn-green ccl-btn-search pull-right">Select User</button>
            </div>

        }
    </div>

</div>

What I want to be able to do is hide the following div

<div class="col-lg-offset-3 col-lg-6">
        @foreach (var item in Model)
        {
            <div class="details-block">
                @Html.DisplayFor(modelItem => item.UserName)
                <button type="button" class="btn ccl-btn ccl-btn-green ccl-btn-search pull-right">Select User</button>
            </div>

        }
    </div>

Then show that Div when the submit button is clicked

My Controller looks like the following

public class PasswordController : Controller
    {
        private CCLPasswordManagementDBEntities db = new CCLPasswordManagementDBEntities();

        public ActionResult Search(string searchString)
        {
            var users = from x in db.users select x;

            if (!String.IsNullOrEmpty(searchString))
            {
                users = users.Where(x => x.UserName.ToUpper().Contains(searchString.ToUpper()));
            }

            return View(users);
        }

    }

At the moment the div is constantly shown and updates when the submit button is pressed but I want to hide that div until someone presses the submit button then it can show.

Thanks in advance for the help.

Upvotes: 1

Views: 12315

Answers (2)

Huy Hoang Pham
Huy Hoang Pham

Reputation: 4147

Change your code in the controller to this:

 public ActionResult Search(string searchString)
    {
        var users = from x in db.users select x;
        ViewBag.ShowList = false;
        if (!String.IsNullOrEmpty(searchString))
        {
            ViewBag.ShowList = true;
            users = users.Where(x => x.UserName.ToUpper().Contains(searchString.ToUpper()));
        }

        return View(users);
    }

And change your view to this:

 @model IEnumerable<WebApplication3.Models.user>

@{
ViewBag.Title = "Password Management";
Layout = "~/Views/Shared/_Layout.cshtml";
}

@section title {<h1>@ViewBag.Title</h1>}

<div id="page-block" class="page-block-three row">

<div style="margin-top: 30px;" class="col-lg-offset-2 col-lg-8">
    @using (Html.BeginForm())
    {
        <div class="input-group">
            @Html.TextBox("SearchString", null, new { @class = "form-control ccl-form", @style = "z-index: 10", @placeholder = "Enter Username"})
            <div class="input-group-btn">
                <button class="btn ccl-btn ccl-btn-red ccl-btn-search" type="submit"><i class="fa fa-search"></i></button>
            </div>
        </div>
    }
</div>
@if(ViewBag.ShowList){
<div class="col-lg-offset-3 col-lg-6">
    @foreach (var item in Model)
    {
        <div class="details-block">
            @Html.DisplayFor(modelItem => item.UserName)
            <button type="button" class="btn ccl-btn ccl-btn-green ccl-btn-search pull-right">Select User</button>
        </div>

    }
</div>
}
</div>

Upvotes: 5

Jedi
Jedi

Reputation: 87

You can try having a flag (ViewBag.isShown = false;)
When the page refreshes, it will show your div.
Code should be like below:

if (ViewBag.isShown == true) { ..your for each block.. }

Upvotes: 0

Related Questions