Question

我已经构建了一个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();
    }

Etc等。

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

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的困境。

Answer 1

如果我错了，请纠正我：你想在点击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>

家庭控制器

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

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

<强>更新

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

...
</ul>

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

</body>
...

使用jQuery load（）加载MVC 4默认视图

1 个答案: