0

I have a page with tabs across the top of the screen. Upon clicking a tab I do not want to be redirected to a different web page, rather have the area under the tabs be filled with my partial views. I have four tabs, so I need four partial views. I do not know how to render partial views. The tabs are not buttons rather they are images.

With the way my code is now, when I click on the tab I want to be directed to, it just renders the information on that tabs view page as a full view. It completely refreshes the page and redirects me to a different page without the tabs, showing just the stuff on my partial view.

Controller

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

Index

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

The partial views just have text on them now for testing purposes. My controller is HomeController, the index page is Index.cshtml, and the partial views are ServersTab and ProfilesTab.cshtml.

I'm not sure if I need a javascript function or if this can all be done using the Razor View engine.

Any help would be appreciated

Syed Jafri
  • 416
  • 8
  • 17
  • One way to do it is to set the div containing the tab content as display:none. Then use JavaScript/jQuery to hide/show the content when the tab is clicked. – jasonwarford Jun 18 '14 at 20:19
  • This should get you going: http://stackoverflow.com/questions/24236419/mvc4-update-partial-view/24236914#24236914 – Brendan Green Jun 18 '14 at 22:00

1 Answers1

0

you will be redirected to Different page as I can see forms inside, and these forms get posted. If you have some thing important to post, then do it via Ajax call and replace forms with Div.

Imran Arshad
  • 3,794
  • 2
  • 22
  • 27