CODEWITHSUNDEEP
jqueryasp.net-mvc-4razor
SantasNotReal
SantasNotReal

Reputation: 1281

How to load a view within a jquery tab without refreshing other tabs - MVC 4 Razor

I have a dummy MVC 4 (razor view engine) set up, and I've followed directions to create a tabbed page using jquery. Here is my _Layout.cshtml file:

        <script>
            $(function () {
              $("#tabs").tabs();
            });
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
            $("menucontainer").tabs();
            });
        </script>
</head>
<body>
    <header>
        <div id="tabs">
          <ul>
            <li><a href="#tabs-1">Tab 1</a></li>
            <li><a href="#tabs-2">Tab 2</a></li>
            <li><a href="#tabs-3">Tab 3</a></li>
          </ul>
          <div id="tabs-1">
            //I want the Home page to load here,
          </div>
          <div id="tabs-2">
            //the About page to load here,
          </div>
          <div id="tabs-3">
            //and the Contact page to load here.
          </div>
        </div>
    </header>

What I was hoping was to be able to load "About" and "Contact" views when I click on tab 2 and tab 3, respectively (the about and contact views that come with creating a new mvc 4 internet project in VS 2012).

My end goal is to have multiple tabs on a page where the user will enter different information on each tab, but when they switch to a new tab, the information persists, if this is possible.

Any help or tutorials would be greatly appreciated!

Upvotes: 1

Views: 9526

Answers (1)

Saturnix
Saturnix

Reputation: 10564

My end goal is to have multiple tabs on a page where the user will enter different information on each tab, but when they switch to a new tab, the information persists, if this is possible.

There's no need of any additional line of code. If you use any standard <input> inside of one of your tabs, when the user will switch it, any data he inputted will remain there (unless the page is reloaded).

What I was hoping was to be able to load "About" and "Contact" views when I click on tab 2 and tab 3

Please define "load". You may just put the view inside of the div by rendering it as a partial view.

<div id="tabs-1">
@Html.Partial("~/Views/yourhomepage.cshtml");
</div>

Alternatively, if by "load" you mean loading the content of the view after the user have received the page you need to use AJAX. I'm really missing the point of using it for something like this, especially since you can render the view content directly inside of the div but... Well, if that's what you want nothing is more simple.

$.get("http://linkToYourHomepage").success(function(data){
$('#tabs-1').html(data);
});

Upvotes: 2

Related Questions