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");

There are many ways to achieve this. Save the selected tab into a hidden field, save it into a cookie, save it into the browser storage (HTML 5)... http://stackoverflow.com/questions/14313270/jquery-ui-tabs-no-longer-supporting-cookie-now-what — emerson.marini, Oct 28 '13 at 10:35
How would i go about doing this in local Storage using HTML5 — Inkey, Nov 01 '13 at 11:15
This shows how to save values in local storage http://stackoverflow.com/questions/17087636/how-to-save-data-from-a-form-with-html5-local-storage — user2315985, Nov 01 '13 at 13:48

Uroš Goljat · Accepted Answer · 2013-11-03T18:59:14.917

4

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

edited Nov 03 '13 at 18:59

answered Nov 03 '13 at 17:28

Uroš Goljat

1,806
14
15

@afzalulh thank's for noting, i was to quick :) I'll revise my answer. – Uroš Goljat Nov 03 '13 at 17:54
Thanks for the answer however i am passing data from my controller using @ViewData and not a model. How would i store the @Html.HiddenFor(m=>m.LastTabIndex) without a model as such. – Inkey Nov 04 '13 at 12:35
Hi, use @Html.Hidden("LastTabIndex", ViewData["LastTabIndex"] ?? 0) and then add a parameter int LastTabIndex to action method UpdateProductionData (which handles post). Inside action method add the value of LastTabIndex to ViewData like this: ViewData["LastTabIndex"] = LastTabIndex; – Uroš Goljat Nov 04 '13 at 13:29
When i run this code i always get 0 as the tab selected and when it executes it does not return me the previous tab but it back to the home page. Any ideas why this would be? Thanks – Inkey Nov 04 '13 at 14:46
Did you put @Html.Hidden("LastTabIndex", ViewData["LastTabIndex"] ?? 0) inside your form tag? – Uroš Goljat Nov 04 '13 at 14:55
yea i have it as follows @{ using (Html.BeginForm("GetSigmaDateInfo", "Home", FormMethod.Post)) { @Html.Hidden("LastTabIndex", ViewData["LastTabIndex"] ?? 2)
Date :
} } – Inkey Nov 04 '13 at 15:22
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/40508/discussion-between-inkey-and-uros-goljat) – Inkey Nov 04 '13 at 15:26

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

1 Answers1

Date :