Asp.net 使用jQuery load（）加载MVC4默认视图

我已经建立了一个MVC4网站，我这样做是为了在不同的部分加载jQuery时，主布局页面不会刷新。我将navigator和jQuery脚本放在_Layout.cshtml中：

<ul id="menu" class="menu-items">
                <li><a id="Item1" href="#" onclick="loadPage(this.id)">Item1</a></li>
                <li><a id="Item2" href="#" onclick="loadPage(this.id)">Item2</a></li>
                <li><a id="Item3" href="#" onclick="loadPage(this.id)">Item3</a></li>
                <li><a id="Item4" href="#" onclick="loadPage(this.id)">Item4</a></li>
            </ul>

</body>

<script>

    function loadPage(action) {

        $.post("/Home/" + action, function (data) {
            $(content).html(data);
        });
    }
</script>

等等等等

一切正常，只是我不知道如何只使用一个主内容视图（当网站加载到浏览器中时是index.cshtml）。我被迫将index.cshtml中的相同内容放入item1.cshtml中，这样当我触发onlick for item1时，它将返回到主内容。我仅有的路由配置是默认的，它最初设置为索引：

public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
        );
    }

我想要的是，能够只使用一个主内容页，但是当我单击Item1时，ajax调用仍然可以让我返回主内容。有人知道我需要做什么吗？当我想更新主要内容时，必须同时更新两个视图似乎有点过分了

另外，我认为其他web开发人员也会喜欢这段代码。特别是如果你像我一样建立一个乐队的网站。它允许我将演示歌曲媒体播放器放在_layout.cshtml页面中，这样当用户单击其他部分时，它不会刷新（即，如果刷新，媒体播放器将停止）。通过这种设计，用户可以在歌曲继续播放的同时浏览整个网站

---

我对javascript比较陌生，所以我相信我可以制作一个更好的onclick处理程序，而不是使用锚定标记，所以如果有人想给我展示一个更好的方法，请这样做。但我的主要问题是index.cshtml与item1.cshtml之间的矛盾。

如果我错了，请纠正我：当单击ItemX链接时，您希望刷新部分页面，而控制器方法ItemX仅通过Ajax使用（因为您正在构建单页应用程序）

在这种情况下，您可以执行以下操作：

Cshtml

<ul id="menu" class="menu-items">
    <li><a id="Item1" href="#" onclick="loadPage(this.id)">Item1</a></li>
    <li><a id="Item2" href="#" onclick="loadPage(this.id)">Item2</a></li>
    <li><a id="Item3" href="#" onclick="loadPage(this.id)">Item3</a></li>
    <li><a id="Item4" href="#" onclick="loadPage(this.id)">Item4</a></li>
</ul>

<div id="container">
</div>

</body>

<script>
    function loadPage(action) {
        $.post("/Home/" + action, function (data) {
            $("#container").html(data);
        });
    }
    // Will load Item1 via Ajax on page load
    loadPage('Item1');
</script>

PartialView应该只包含特定于当前项的HTML

更新

如果希望避免Ajax调用，也可以在cshml中这样做

...
</ul>

<div id="container">
    @Html.Partial("Item1PartialView")
</div>

</body>
...

。。。

@Html.Partial（“Item1PartialView”）
...

我已经完成了令人耳目一新的部分。问题是，当加载站点时，它会加载index.cshtml，用_layout.cshtml包装，并带有主要内容，我需要一个菜单项，该菜单项将使用ajax加载index.cshtml的内容。到目前为止，我还不能像对待其他局部视图一样对待索引。因此，我必须创建另一个名为item1.cshtml的文件，该文件的内容与index.cshtm相同，我不希望每次需要在主页上更改内容时都复制数据这样，用户将首先通过Ajax加载布局和item1。现在问题归结到index.cshtml。我该怎么处理它？它甚至不是真正需要的，但是没有它网站就无法加载。在这种情况下，请保持它为空。如果它没有坏，就不要修复：）我还建议您阅读更多关于使用ASP.NET MVC的单页应用程序的信息。它很可能会回答此类问题，并帮助您更好地构建应用程序。如果我的答案解决了您的问题，请将其设置为答案。

[HttpPost]
public ActionResult Item1()
{
    return PartialView();
}

...
</ul>

<div id="container">
    @Html.Partial("Item1PartialView")
</div>

</body>
...