Cascading, docking, closable panels for a single-page app with MVC 5 - possible?

See more:

Ajax

jQuery

JSON

Knockout.js

, +

Hey,

i want to create a SPA with MVC where my content will be rendered as partial views inside bootstrap panels, that have to be
- docking on each other only horizontally
- have dependency to the previous (left) window
- be closable, regarding the dependency


For example, my demo app could have such a site structure:

root  #####
          #
          #
        page 1  ######
          #          #
          #          #
          #       page 1.1  ######
          #                      #
          #                      #
          #                 page 1.1.1  #######
          #                      #            #
          #                      #            #
          #                      #       page 1.1.1.1
          #                      #
          #                      #
          #                 page 1.1.2 
          #
          #
        page 2  ######
          #          #
          #          #
          #       page 2.1
          #
          #
        page3

Navigation should be like this
-root -> page1 or page 2 -> choosing page1 -> loaded into first panel, oriented left side of the screen -> selecting an item on page 1 (e.g. details) -> page 1.1 is loaded into a second panel, docking next to the first panel -> decide to delete sth -> page 1.1.1 is loaded into a third panel, docking next to the second panel and so on....

So when closing e.g. page 1.1, i want to close any depending "windows" too (page 1.1, page 1.1.1 and page 1.1.1.1) and of course i may not load page 1.1.1.1 directly into my "Window".


So any ideas how i can use the bootstrap panels as dynamic windows, that i can "stack" next to each other?

Thanks in advance!

What I have tried:

I made some real basic settings with JS to close (remove) a panel from my view.

<div class="row">
    <div class="col-md-6">
        <h2>Details</h2>
        <h4>Artist</h4>
        <hr />
        <dl class="dl-horizontal">
            <dt>
                @Html.DisplayNameFor(model => model.Name)
            </dt>

            <dd>
                @Html.DisplayFor(model => model.Name)
            </dd>
        </dl>
        <button id="edit" class="btn btn-success"><icon class="glyphicon glyphicon-edit"></icon> Edit</button>
    </div>
    <div class="col-md-6">
        <div class="panel panel-default">
            <span class="pull-right clickable" data-effect="remove">class="glyphicon glyphicon-remove"></span>
            <div id="partial">

            </div>
        </div>

        
    </div>
</div>

@section scripts
{
<script type="text/javascript">
    $(function () {
        $('#edit').click(function () {
            $.get('@Url.Action("Edit", "Artists", new { id = Model.ArtistID })').success(function (data) {
                $('#partial').replaceWith(data);
            });
        });
    });

    $(function () { $('.clickable').on('click', function () { var effect = $(this).data('effect'); $(this).closest('.panel')[effect](); }) })
</script>
}