ASP.NET MVC dynamically add existing (stand-alone) view as a Partial

Does anyone know how to load an existing (stand-alone) view as a partial view? I found a tutorial at this link (gillesleblanc.wordpress.com/…) but it looks more complicated than I think I need.

I'm able to load a partial view using the following syntax:

$('#elementName').load('controllerPartialViewMethod/controllerActionViewMethod');

The above syntax is supposed to be the same as the following syntax, though I've not been successful using it. But that is not my current issue, just a statement of observation.

var url = '@Url.Action("controllerActionViewMethod", "controllerPartialViewMethod")';

My problem is that I want to use an existing (stand-alone) view as a partial view.

I created a controllerPartialViewMethod for the existing (stand-alone) view to return the view but, of course, the JavaScript is not hooked up.

All of our existing (stand-alone) views are called using Razor syntax like this:

@Html.ActionLink("Link Name", "controllerActionViewMethod", "controller");

I have found this Redirecting to another page in ASP.NET MVC using JavaScript/jQuery that looks promising. I'll be looking at that and perhaps creating a container that can be replaced.

If anyone knows how to do this, please help.

Existing Report View

@{
    ViewBag.Title = "Usage Report";
}
<main id="usageData">
    .
    .
    .
    <div id="loading">

    </div>
</main>

@section scripts{

    @Scripts.Render("~/bundles/App/UsageReport")

    <script type="text/javascript">
        $(function () { UsageReport.initModule() });
    </script>
}

Main View

@{
    ViewBag.Title = "Main View";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<main id="mainView">

    <div class="row" style="min-width: 100%; ">

        <div style="float: left; width: 20%; min-height: 870px; margin-top: 0.5em; margin-left: -1em; overflow: hidden; border-style: solid; border-width: thin; border-color: lightgray; ">

            <div id="EnergyManagement">

                <div class="row" style="background-color: #c2cbfb; margin-left: 0px; margin-right: 0px; ">
                    <p id="menuTitle" style="width: 100%; text-align: center; margin: 5px 0 5px 0; ">Energy Managemement - Reports</p>
                </div>
                <div class="row content-wrapper">
                    <span style="white-space: nowrap;">
                        <img class="icon" style="width: 30px; height: 30px; " src="Content/images/dashboard/GraphIcon.png" alt="Graph icon" />
                        <a id="AggregatedUsageLink">Aggregated Usage</a>
                    </span>
                </div>
                <div class="row content-wrapper">
                    <span style="white-space: nowrap;">
                        <img class="icon" style="width: 30px; height: 30px; " src="Content/images/dashboard/GraphIcon.png" alt="Graph icon" />
                        <a id="EUILink">EUI</a>
                    </span>
                </div>
                <div class="row content-wrapper">
                    <span style="white-space: nowrap;">
                        <img class="icon" style="width: 30px; height: 30px; " src="Content/images/dashboard/GraphIcon.png" alt="Graph icon" />
                        <a id="CustomQueryLink">Custom Query</a>
                    </span>
                </div>
                <div class="row content-wrapper">
                    <span style="white-space: nowrap;">
                        <img class="icon" style="width: 30px; height: 30px; " src="Content/images/dashboard/ReportIcon.png" alt="Report icon" />
                        <a id="QRURLink">QRUR</a>
                    </span>
                </div>
                <div class="row content-wrapper">
                    <span style="white-space: nowrap;">
                        <img class="icon" style="width: 30px; height: 30px; " src="Content/images/dashboard/ReportIcon.png" alt="Report icon" />
                        <a id="EnergyProjectsLink">Energy Projects</a>
                    </span>
                </div>
            </div>

        </div>

        <div style="float: left; width: 80%; min-height: 870px; margin-top: 0.5em; margin-left: 0em; overflow: hidden; ">

            <div id="MainContentBox" style="margin: 0em 0em;">
                <div id="tabs" class="tab">

                </div>

                <div id="content">

                </div>
            </div>
        </div>
    </div>


    <div id="loading">

    </div>

</main>

@section scripts{

    @Scripts.Render("~/bundles/App/MainView")

    <script type="text/javascript">
            $(function () { MainView.initModule('@ViewBag.Name') });
    </script>
}