ASP.NET MVC将现有（独立）视图动态添加为Partial

Question

是否有人知道如何将现有（独立）视图加载为部分视图？我在此链接(gillesleblanc.wordpress.com/…)找到了一个教程，但它看起来比我想象的要复杂需要。

我可以使用以下语法加载部分视图：

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

上述语法应该与以下语法相同，但我没有成功使用它。但这不是我目前的问题，只是一个观察陈述。

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

我的问题是我想将现有（独立）视图用作部分视图。

我为现有（独立）视图创建了一个controllerPartialViewMethod来返回视图，当然，JavaScript没有被连接起来。

我们所有现有的（独立）视图都使用Razor语法调用，如下所示：

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

我发现这个Redirecting to another page in ASP.NET MVC using JavaScript/jQuery 看起来很有希望。我会看着它，也许正在创建一个可以替换的容器。

如果有人知道该怎么做，请帮助。

现有报告视图

@{
    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>
}

主视图

@{
    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>
}