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

Asp.net mvc 4 在图像上渲染局部视图单击MVC5,asp.net-mvc-4,razor,Asp.net Mvc 4,Razor,我有一个页面,屏幕顶部有选项卡。单击选项卡时,我不希望被重定向到其他网页,而是希望选项卡下的区域充满我的局部视图。我有四个选项卡,所以我需要四个局部视图。我不知道如何渲染局部视图。选项卡不是按钮,而是图像 按照我的代码现在的方式,当我单击我想要指向的选项卡时,它只是将选项卡视图页面上的信息呈现为完整视图。它完全刷新了页面,并将我重定向到另一个没有选项卡的页面,只显示部分视图中的内容 控制器 [HttpPost] public ActionResult Profil

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

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

控制器

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