ASP.Net MVC Show/Hide Content

Question

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.

So you want it to show after the form is submitted and the page refreshes (from the form posting)? — The Muffin Man
– The Muffin Man, Commented Nov 5, 2014 at 2:00
When you submit your rendering a whole new view so the only way you going to do this is with ajax, or by passing additional value(s) to the controller that indicate which items should be shown and render the view according to those value(s) — user3559349
– user3559349, Commented Nov 5, 2014 at 2:01
Yep I am trying to show this after the for is submitted and refreshes — Paul Coan
– Paul Coan, Commented Nov 5, 2014 at 2:39

Huy Hoang Pham · Accepted Answer · 2014-11-05 06:47:05Z

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>

Jedi · Accepted Answer · 2014-11-05 04:46:05Z

0

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

answered Nov 5, 2014 at 4:46

Jedi

872 bronze badges

Collectives™ on Stack Overflow

ASP.Net MVC Show/Hide Content

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related