在图像上渲染部分视图单击 MVC5

Question

我在屏幕顶部有一个带有标签的页面。单击选项卡后，我不想被重定向到不同的网页，而是让选项卡下的区域填充我的部分视图。我有四个选项卡，所以我需要四个局部视图。我不知道如何渲染部分视图。选项卡不是按钮，而是图像。

按照我的代码现在的方式，当我单击要定向到的选项卡时，它只会将该选项卡视图页面上的信息呈现为完整视图。它完全刷新了页面并将我重定向到没有标签的不同页面，只显示我的部分视图上的内容。

控制器

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

索引

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

部分视图现在只是为了测试目的而在它们上面添加了文本。 我的控制器是HomeController，索引页面是Index.cshtml，部分视图是ServersTab和ProfilesTab.cshtml。

我不确定我是否需要一个 javascript 函数，或者这是否都可以使用 Razor View 引擎来完成。

任何帮助将不胜感激

Answer 1

您将被重定向到不同的页面，因为我可以看到里面的表格，并且这些表格会被发布。如果您有重要的事情要发布，请通过 Ajax 调用并用 Div 替换表单。