ASP.NET Return View(“Index”); Return to same tab

Question

I have a single asp.net page it contains a number of tabs and a datetime picker.

When the user selects a date from the datetime picker and clicks on the update button it does that it should do but it does not return the user to the same tab.

HTML Code

        <ul class='tabs'>
                <li><a href='#tab1'>Production</a></li>
                <li><a href='#tab2'>Page2</a></li>
                <li><a href='#tab4'>Page3</a></li>
                <li><a href='#tab6'>Page4</a></li>
            </ul>
    <div id='tab1'>
    <hr />
            <div class="ProductionDiv">
     <label class="ProductionLabel">Production Data</label>
         @{

            using (Html.BeginForm("UpdateProductionData", "Home", FormMethod.Post))
            { 
               <h3>Date :</h3>   <input type="text" id="dp4" name="dp4"/>
               <input type="submit" value="Update"/>
            }
        }
</div>
    <div id='tab2'>
    <hr />
            <div class="ProductionDiv">
     <label class="ProductionLabel">Production Data</label>
         @{

            using (Html.BeginForm("UpdateProductionData", "Home", FormMethod.Post))
            { 
               <h3>Date :</h3>   <input type="text" id="dp4" name="dp4"/>
               <input type="submit" value="Update"/>
            }
        }
</div>
    <div id='tab3'>
    <hr />
            <div class="ProductionDiv">
     <label class="ProductionLabel">Production Data</label>
         @{

            using (Html.BeginForm("UpdateProductionData", "Home", FormMethod.Post))
            { 
               <h3>Date :</h3>   <input type="text" id="dp4" name="dp4"/>
               <input type="submit" value="Update"/>
            }
        }
</div>
    <div id='tab4'>
    <hr />
            <div class="ProductionDiv">
     <label class="ProductionLabel">Production Data</label>
         @{

            using (Html.BeginForm("UpdateProductionData", "Home", FormMethod.Post))
            { 
               <h3>Date :</h3>   <input type="text" id="dp4" name="dp4"/>
               <input type="submit" value="Update"/>
            }
        }
</div>

C# code I do what i need to do and return to the Index form is there any way to specify what tab to return too. return View("Index");

Answer 1

How about using hidden field + jquery, like this:

Update your ViewModel and add an int property for example LastTabIndex, then Add a hidden field to your form:

@Html.HiddenFor(m=>m.LastTabIndex)

and then use jquery :

<script type="text/javascript">
    $(function() {

        $(".tabs").tabs({
            create: function() {

                var index = 0;

                if (Modernizr.localstorage) {
                    if (localStorage.getItem("LastTabIndex") === null) {
                        localStorage.setItem("LastTabIndex", 0);
                    } else {
                        index = localStorage.getItem("LastTabIndex");
                    }
                } else {
                    index = $('#LastTabIndex').val();
                }

                $(".tabs").tabs("option", "active", index);
            },

            activate: function() {
                var sel = $('.tabs').tabs('option', 'active');
                $("#LastTabIndex").val(sel);

                if (Modernizr.localstorage) {
                    localStorage.setItem("LastTabIndex", sel);
                }
            }
        });
    });
</script>

EDIT: I've updated my code to use a hybrid solution (localstorage and if local storage is unsupported then use hidden field).

Hope this helps!

Regards, Uros