How to create collapsable/dropdown/expandable part

Question

In Details action of PersonController I would like to show every information about the Person object.

Initially I want only to show some info about the Person and rest will be collapsed, then I want to click a button/arrow/whatever and rest of info will expand.

Before clicking button/arrow/whatever all the data was loaded but just hidden. If I don't have to I don't want to use AJAX(I am not familiar with it).

Drawings show what I mean.

---

BEFORE CLICK

---

AFTER CLICK

Right now Details view looks like that:

@model WebApplication2.Models.Person

@{
    ViewBag.Title = "Details";
}

<h2>Details</h2>

<div>
    <h4>Person</h4>
    <hr />
    <dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => model.FirstName)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.FirstName)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.LastName)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.LastName)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.CellNumber)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.CellNumber)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.SecondaryPhoneNumber)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.SecondaryPhoneNumber)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Address)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Address)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.BirthDate)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.BirthDate)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Pesel)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Pesel)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Notes)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Notes)
        </dd>
    <!-- SOMEWHERE HERE i WOULD LIKE TO INSERT THIS PARTIALL VIEW INTO EXPANDABLE COMPONENT -->
    </dl>
</div>

---

EDIT: Pragnesh Khalas' original solution worked great but I wanted to pass whole Person object to partial view. So I modified script replacing:

  data: {
                parentEls: '@Model.FirstName'
            }

with

data: {
                person: '@Model'
            }

and in the controler:

 [HttpPost]
        public ActionResult Test(Person person) {
            System.Diagnostics.Debug.WriteLine("PASSED: " + person);
            return PartialView(person);
        }

but Person person in the Test action is null besides that everything works. Why it(model) hasn't been passed?

Full code:

Script:

<script>
    function BtnOnclick() {
        $.ajax({
            type: 'POST',
            url: '@Url.Content("~/Person/Test")',
            data: {
                person: '@Model'
            },
            success: function (data) {
                $('#divpopup').css("display", "block");
                $('#btnExpand').css("display", "none");
                $('#divpopup')[0].innerHTML = data;
            }
        });
    }
    function CollapseDiv() {
        $('#divpopup').css("display", "none");
        $('#btnExpand').css("display", "block");
    }
</script>

View:

<p>
    <input type="button" value="Expand" id="btnExpand"
           onclick="javascript:BtnOnclick();" />
</p>
<div id="divpopup" style="display:none">

</div>

Controller's action:

        [HttpPost]
        public ActionResult Test(Person person) {
           // ViewBag.Chk = parentEls;
            System.Diagnostics.Debug.WriteLine("PASSED: ");
            System.Diagnostics.Debug.WriteLine(person.FirstName);
            return PartialView(person);
        }
    }

Partial view:

@model WebApplication2.Models.Person
<hr />
<h2>Survey 1</h2>

<input type="button" id="Coll" value="Collapse" onclick="javascript:CollapseDiv()" />
<dt>
    @Html.DisplayNameFor(model => model.Notes)
</dt>
<dd>
    @Html.DisplayFor(model => model.Notes)
</dd>
<hr />

Answer 1

Unfortunately, you'll have to do this with Javascript. It can be achieved with relative ease, however. In my example I make use of jQuery, which is far more powerful than simple Javascript. I strongly recommend picking that up if you're going to be working with web projects.

Make sure you render the partial within a div with an id, for example:

In your view:

<div id="details">
    @Html.RenderPartial("_DetailsDropDown", personModel)
</div>

In your Javascript section/file:

$("div#details").click(function() {
    if ($("div#details").hasClass("hidden")) {
        $("div#details").removeClass("hidden");
    } else {
        $("div#details").addClass("hidden");
    }
});

This utilizes a 'hidden' class, which can be defined in your CSS like this:

div.hidden {
    display: none;
}

Note that you can attach the click event to anything you want, like a button or link, or to the div itself (as I've done in the example).

Answer 2

If you need to display partial view in main view so in that case is better option is use ajax.

Using ajax you will be able to call action method and return partialview and also in partial view action you will be able to pass the any value which you want from main view.

Check below example it will help you.

//==Your Code in main View============
<dd>
   @Html.DisplayFor(model => model.Notes)
</dd>
//==Your Code============

//============Added
<p>
    <input type="button" value="Expand" id="btnExpand" 
          onclick="javascript:BtnOnclick();" />
</p>
<div id="divpopup" style="display:none">

</div>
//============Added

When you click on button Expand at that time call javascript function BtnOnclick and in that function you are set that partial view in the divpopup div.

Like below script:-

<script>
    function BtnOnclick() {
        $.ajax({
            type: 'POST',
            url: '@Url.Content("~/Person/Test")',
            data: {
                parentEls: '@Model.FirstName'
            },
            success: function (data) {
                $('#divpopup').css("display", "block");
                $('#btnExpand').css("display", "none");
                $('#divpopup')[0].innerHTML = data;
            }
        });
    }
    function CollapseDiv() {
        $('#divpopup').css("display", "none");
        $('#btnExpand').css("display", "block");
    }
</script>

Above ajax call you will be able to pass any value to Test action. In above example pass the FirstName of the model properties.

Partial View (Controller Side) :-

[HttpPost]
    public ActionResult Test(string parentEls)
    {
        ViewBag.Chk = parentEls;
        return PartialView();
    }

Partial View (View Side) :

<hr />
<h2>Partial View</h2>
@ViewBag.Chk
<input type="button" id="Coll" value="Collapse" onclick="javascript:CollapseDiv()" />
<hr />

Answer 3

Then you add a PartialView in Views/Shared/ and name it appropriately like _PersonDropDown.cshtml and replace your comment in Details View with:

@Html.RenderPartial("_PersonDropDown", yourModel)

or if it's an Action method, that returns a partial html result, you use:

@Html.RenderAction("methodNameThatRendersPartialView")

But you would still have to do the collapsable content yourself in the partial view. Good luck!