I would like to have a webpage something like windows tab control. Each webpage does not lose the contents and data while moving between pages, postbacks, etc.

Here is the website design and my idea:

[Master Page]

"Fruits"  "Cars"   "Animals"  "Operators"

• clicking on "Fruits" will forwards to "Fruits" page, and the same for other links (tabs)
• The user works on "Fruits" page searching fruits, fill up some fields, etc.
• The user then moves to "Cars" page and then builds up his own car by filling some fields, etc
• and then the user goes back to "Fruits" page again -> the user sees the same page where she/he left on "Fruits" page.

Please suggest some good ways other than using javascript:history.go(-1). Is this possible to implement?

I would like to have a webpage something like windows tab control. Each webpage does not lose the contents and data while moving between pages, postbacks, etc.

Here is the website design and my idea:

[Master Page]

"Fruits"  "Cars"   "Animals"  "Operators"

• clicking on "Fruits" will forwards to "Fruits" page, and the same for other links (tabs)
• The user works on "Fruits" page searching fruits, fill up some fields, etc.
• The user then moves to "Cars" page and then builds up his own car by filling some fields, etc
• and then the user goes back to "Fruits" page again -> the user sees the same page where she/he left on "Fruits" page.

Please suggest some good ways other than using javascript:history.go(-1). Is this possible to implement?

• javascript
• asp
• asp-mvc
• web-applications

5 Answers 5

Using Jquery post method we can do the same... let us try this,here is a sample for you...

<div class="Tabclass" id="TabId1" onclick="TabClick('Fruits')">
        Fruits
    </div>
  <div class="activeTab" id="TabId2" onclick="TabClick('cars')">
        cars
    </div>

here TabClick("var") is a javascript function,parametr is to identify which tab is selected.

suppose the id of data containing div is "DivMainContent". let us see the javascript function

<script type="text/javascript">
           function TabClick(bType) {
               $(#DivMainContent").html("");
               if (bType == 'Fruits') {
                         $.post("@Url.Content("~/Controllername/actionname")",
                         function (data) {
                         $("#DivMainContent").html(data);
                    });
               }
               else if (bType == 'cars') {

                          $.post("@Url.Content("~/Controllername/actionname")",
                          function (data) {
                          $("#DivMainContent").html(data);
                    });
 }
</script>

The Twitter bootstrap api is perfect for HTML UI, check out their tabs think you'll find its what you are looking for

http://twitter.github./bootstrap/javascript.html#tabs

It is most definitely possible, a very simple solution would be to have 4 divs and hide/show the div corresponding to the the link the user clicks "eg: Fruits link will show the fruits div" this sort of plumbing is already with most JavaScript libraries, a good one is the Jquery UI framework, the tab control would achieve what you want to do

Look at the jQuery demos and documentation it makes it very easy to have client side tabs via ajax.

http://jqueryui./demos/tabs/

http://www.randomsnippets./2011/04/10/how-to-hide-show-or-toggle-your-div-with-jquery/

If using a 3party javascript library is not an option for you, then there is always the plain old javascript way of showing/hiding div's

http://webdesign.about./od/dhtml/a/aa101507.htm

There are lots of ways to achieve what you want to do. You could make make a user session and send AJAX calls to the server setting inputs and processing it. Or you could use a single page application where you only have one page and navigate inside it. There might be lots more. Which one you should chose depends on what your project specifications are.

The easiest way to do this is to have all of the content for all tabs rendered and use Javascript to toggle the different tabs on the client side (by adjusting the css property "display" is one way for instance). There's no reason to make an AJAX call unless you need to submit data that updates another tab before it should be shown.