Asp.net mvc 4 在图像上渲染局部视图单击MVC5

我有一个页面，屏幕顶部有选项卡。单击选项卡时，我不希望被重定向到其他网页，而是希望选项卡下的区域充满我的局部视图。我有四个选项卡，所以我需要四个局部视图。我不知道如何渲染局部视图。选项卡不是按钮，而是图像

按照我的代码现在的方式，当我单击我想要指向的选项卡时，它只是将选项卡视图页面上的信息呈现为完整视图。它完全刷新了页面，并将我重定向到另一个没有选项卡的页面，只显示部分视图中的内容

控制器

        [HttpPost]
        public ActionResult ProfilesTab()
        {
            return View();
        }

索引

服务器
@Html.Partial（“ServersTab”）
轮廓
@Html.Partial（“ProfilesTab”）

局部视图上现在只有文本用于测试目的。 我的控制器是HomeController，索引页是index.cshtml，部分视图是ServersTab和ProfilesTab.cshtml

我不确定我是否需要javascript函数，或者是否可以使用Razor视图引擎来完成这一切

---

如果您有任何帮助，我们将不胜感激。

您将被重定向到不同的页面，因为我可以看到其中的表单，这些表单将被发布。如果您有一些重要的内容要发布，那么可以通过Ajax调用并用Div替换表单。

一种方法是将包含选项卡内容的Div设置为display:none。然后在单击选项卡时，使用JavaScript/jQuery隐藏/显示内容。这应该可以帮助您：

<div id="TabBar">
    <form class="TabActive" method="POST" action="Home/ServersTab">
        <input class="TabIcon" type="image" src="~/Images/servers_orange.png" alt="Servers" />
        <b class="TabLabel">Servers</b>
        <div>@Html.Partial("ServersTab")</div>
    </form>
    <form class="TabInactive" method="POST" action="Home/ProfilesTab">
        <input class="TabIcon" type="image" src="~/Images/profiles_white.png" alt="Profiles" />
        <b class="TabLabel">Profiles</b>
    <div>@Html.Partial("ProfilesTab")</div>
</form>
</div>