如何在具有索引布局的视图（MVC）的索引页面上直接调用部分视图（基于ajax）答案

【问题标题】：How to call partial views (ajax based) directly on index page of a VIEW (MVC) with layout of index too如何在具有索引布局的视图（MVC）的索引页面上直接调用部分视图（基于ajax）
【发布时间】：2012-10-11 20:44:39
【问题描述】：

让我更具体一点..我想做的是，例如，当我单击子菜单时，说 XYZ 是主菜单 ABC 的子菜单..当我单击 XYZ 时，它会通过主页上的 ajax 加载，即ABC .. ajax 部分已经完成，我不知道如何通过菜单调用它.. 我将把我的代码粘贴到更清晰的位置..

<li>@Html.ActionLink("About Us", "Index", "AboutUs")
    <ul>
        <li>@Html.ActionLink("Vision & Misson", "Index", "AboutUs")</li>
        <li>@Html.ActionLink("Our Ethics", "Index", "AboutUs")</li>
    </ul>
</li>

这是一个关于我们的页面，通常当点击关于我们时，它会被定向到其索引页面。然而，当您将鼠标悬停在关于我们上时，会打开一个下拉菜单，显示更多选项：愿景和使命我们的道德......目前他们都指向索引我想要的是当我点击愿景和使命时，它应该直接在关于我们的索引页面上打开愿景和使命的部分视图...... 同样，当点击“我们的道德”页面时，它应该直接调用部分视图“我们的道德”并将其显示在关于我们的索引页面上

【问题讨论】：

标签： ajax asp.net-mvc asp.net-mvc-partialview

【解决方案1】：

将@Html.ActionLink 更改为@Ajax.ActionLink

<li>@Html.ActionLink("About Us", "Index", "AboutUs")
    <ul>
        <li>@Ajax.ActionLink("Vision & Misson", "VisionAndEthics", new AjaxOptions {
                InsertionMode = InsertionMode.Replace, UpdateTargetId = "divTarget"
            })</li>
        <li>@Ajax.ActionLink("Our Ethics", "OurEthics", new AjaxOptions {
                InsertionMode = InsertionMode.Replace, UpdateTargetId = "divTarget"
            })</li>
    </ul>
</li>

插入模式属性设置为replace，UpdateTargetId属性是要放入结果的HTML容器的id。

然后在你的控制器中

public PartialViewResult VisionAndEthics() {
    return PartialView("VisionAndMission");
}

public PartialViewResult OurEthics() {
    return PartialView("OurEthics");
}

这样，您还可以通过扩展此解决方案来处理关闭 javascript 的客户端。

【讨论】：