1

我已经构建了一个 mvc 4 网站，并且我构建了它以便在使用 jQuery 加载不同的部分时不会刷新主布局页面。我将导航器和 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>

然后我有我的控制器：

namespace MyApp.Controllers
{
public class HomeController : Controller
{

    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Item1()
    {
        if (Request.IsAjaxRequest())
        {
            return PartialView();
        }
        return View();
    }

    [HttpPost]
    public ActionResult Item2()
    {
        if (Request.IsAjaxRequest())
        {
            return PartialView();
        }
        return View();
    }

等等等等。

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

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 调用仍然让我回到主要内容。有谁知道我需要做什么？当我想更新主要内容时，必须同时更新两个视图似乎有点过头了。

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

我对javascript相当陌生，所以我确信我可以制作一个更好的onclick处理程序而不是使用锚标签，所以如果有人想向我展示一个更好的方法，请这样做。但我的主要问题是 index.cshtml 与 item1.cshtml 的困境。

4

1 回答 1

3

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

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

html

<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>

家庭控制器

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

您的 PartialViews 应该只包含特定于当前项目的 HTML。

更新

如果您希望避免 Ajax 调用，您也可以在 cshml 中执行此操作

...
</ul>

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

</body>
...
于 2013-01-13T04:11:32.290 回答