I have a Razor Bootstrap nav-tab section in my Views that will be reused a few times with different data displayed with each use. I don't like the idea of just copying the markup multiple times because if someone decides to change one nav-tab, or change the css, it might require updating all of them or break something.

I cannot figure out how to keep a separation between the model-view-controllers in this situation.
Ideally, I would like to have:

  • Markup for nav-tabs and nav-tabs content defined in one place
  • Controller controls what elements are displayed
  • View calls the Partial and the nav-tabs are shown with data specific to that page using a common style

View that builds the nav-tab structure and calls the partial - Details.cshtml

<div class="row">
<ul class="nav nav-tabs">
    <li class="active">
        <a href="#inquiries" data-toggle="tab"><strong>Inquiries</strong></a>
    </li>
    <li>
        <a href="#events" data-toggle="tab"><strong>Events</strong></a>
    </li>
    <li>
        <a href="#media" data-toggle="tab"><strong>Media</strong></a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="inquiries" role="tabpanel">
        @{Html.RenderAction("List", "Inquiry", new { id = Model.ID });}
    </div>
    <div class="tab-pane" id="events" role="tabpanel">
        @{Html.RenderAction("ProjectEventList", "Event", new { id = Model.ID });}
    </div>
    <div class="tab-pane" id="media" role="tabpanel">
        @{Html.RenderAction("MediaList", "Event", new { id = Model.ID });}
    </div>
</div>

Partial that builds the nav-tab contents from it's controller _List.cshtml

@foreach (var inquiry in Model.ToList())
{
    <div class="panel panel-primary">
        <div class="panel-heading clearfix">
            <div class="panel-heading-left">
                @Html.DisplayFor(modelItem => inquiry.Title)

            </div>
            <div class="panel-heading-right">
                @Html.DisplayFor(modelItem => inquiry.InquiryDateTime)
            </div>
        </div>
        <div class="panel-body">
            @Html.DisplayFor(modelItem => inquiry.Comment)
        </div>
    </div>
}

I have searched high and low, but I think I may be missing some keywords to find other people with similar issues as me.

Related posts

Recent Viewed