Reuse and pass dynamic object (CurrentPage) to Partial View MVC Umbraco

Question

I'm somewhat (6 months) new to MVC, and I like to use as little as code as possible, especially when it comes to reusable code, etc. I'm using Umbraco v7.2, and I have (3) tabs, all which use the same data type (custom grid v7).

The grid has (4) fields. Basically all (3) sections on my page are the same w/ the exception for the header and the object that is called (the dynamic object is what has the properties in them for the tab, which as I stated earlier, are the same).

How can I call a partial view and reuse the same code? The "foreach" is where I need to have this partial view called, as you can see it uses the same exact code w/ the exception of the object being iterated.

The "CurrentPage.XXXX" is what I need to pass, and I can have the same iterator

@foreach(var XXXX in CurrentPage.XXXX)   <---- partial view

View:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = "Master.cshtml";
}

    <article class="accordion-wrapper">
        <div class="accordion-container accordion-contact">
            <a href="javascript:void(0);" class="mont-bold accordion">Leadership Team</a>
            @foreach (var leadership in CurrentPage.leadershipTeam)
            {
                <section class="clearfix">
                    <div class="col-md-6 col-sm-6">
                        <ul>
                            <li>@leadership.contactName</li>
                            <li>@leadership.contactTitle</li>
                        </ul>
                    </div>
                    <aside class="col-md-6 col-sm-6">
                        <ul>
                            <li>@leadership.contactPhone</li>
                            <li>
                                <a href="mailto:@leadership.contactEmail">@leadership.contactEmail</a>
                            </li>
                        </ul>
                    </aside>
                </section>
            }
        </div>
    </article>
    <article class="accordion-wrapper">
        <div class="accordion-container accordion-contact">
            <a href="javascript:void(0);" class="mont-bold accordion">The Lenders One Team</a>
            @foreach (var lenders in CurrentPage.lendersTeam)
            {
                <section class="clearfix">
                    <div class="col-md-6 col-sm-6">
                        <ul>
                            <li>@lenders.contactName</li>
                            <li>@lenders.contactTitle</li>
                        </ul>
                    </div>
                    <aside class="col-md-6 col-sm-6">
                        <ul>
                            <li>@lenders.contactPhone</li>
                            <li>
                                <a href="mailto:@lenders.contactEmail">@lenders.contactEmail</a>
                            </li>
                        </ul>
                    </aside>
                </section>
            }
        </div>
    </article>

    .... another one here but omitted for brevity

And turn it into:

    <article class="accordion-wrapper">
        <div class="accordion-container accordion-contact">
            <a href="javascript:void(0);" class="mont-bold accordion">Leadership Team</a>
            @Html.Partial( ?????? )
        </div>
    </article>
    <article class="accordion-wrapper">
        <div class="accordion-container accordion-contact">
            <a href="javascript:void(0);" class="mont-bold accordion">The Lenders One Team</a>
            @Html.Partial( ?????? )
        </div>
    </article>

Partial ???

            @foreach (var contact in ??????)
            {
                <section class="clearfix">
                    <div class="col-md-6 col-sm-6">
                        <ul>
                            <li>@contact.contactName</li>
                            <li>@contact.contactTitle</li>
                        </ul>
                    </div>
                    <aside class="col-md-6 col-sm-6">
                        <ul>
                            <li>@contact.contactPhone</li>
                            <li>
                                <a href="mailto:@contact.contactEmail">@contact.contactEmail</a>
                            </li>
                        </ul>
                    </aside>
                </section>
            }

Appreciate it ;)

---

EDIT:

To clarify, I've used partial views before in Umbraco. The issue above is I have (3) different objects (grids in u7). How the grid works in Umbraco is you create a new data type, and define certain fields in that data type (textbox, media picker, etc). You can then add properties to document types (in this case I used the custom grid I created). Once a page is created, based off a document type, properties are inherited.

For the contact page, I needed (3) separate grids. However each grid has different data in them. Therefore this is (3) different JSON objects, which I iterate over. In the above code, the (3) JSON objects are:

1. leadershipTeam
2. lendersTeam
3. avisoryBoard (the one omitted for brevity)

How can I pass (CurrentPage.JSONobjectHere) to the partial view, using only ONE partial view for all THREE sections?

Answer 1

Did something similar to this once.

Call your partial like this:

@Html.Partial("YourPartialName", (object)CurrentPage.lendersTeam)

And then use a dynamic as a model in your partial:

@model dynamic
@foreach (var contact in Model)
            {
                <section class="clearfix">
                    <div class="col-md-6 col-sm-6">
                        <ul>
                            <li>@contact.contactName</li>
                            <li>@contact.contactTitle</li>
                        </ul>
                    </div>
                    <aside class="col-md-6 col-sm-6">
                        <ul>
                            <li>@contact.contactPhone</li>
                            <li>
                                <a href="mailto:@contact.contactEmail">@contact.contactEmail</a>
                            </li>
                        </ul>
                    </aside>
                </section>
            }