asp.net-mvc-4jquery-tabs

Jquery Tabs MVC 4 - Redirect to to tab from controller


I have the following code where 'SelectedTabToFind' is set in the controller. This is used for validation, so that the correct tab is displayed.

$("#tabs").tabs(
{
active: $("#SelectedTabToFind").val(),
cache: false
});

<div id="tabs">
<ul>
    <li><a href="#tabs-1" title="View">View</a></li>
    <li><a href="#tabs-2" title="Update">Update</a></li>
    <li><a href="#tabs-3" title="Validate">Validate</a></li>
    <li><a href="#tabs-4" title="Notes">Notes</a></li>
</ul>
<div id="tabs-1">
     @Html.Partial("View",Model)
</div>
<div id="tabs-2">
     @Html.Partial("Update",Model)
</div>
<div id="tabs-3">
     @Html.Partial("Validate",Model.ValidateModel)
</div>
<div id="tabs-4">
    @Html.Partial("Notes", Model)
</div>

View Tab - Displays Information

Update Tab - Can update information on tab

Validate Tab - Can update information on tab

Notes Tab - Displays a list of information with separate page outwith tabs to add/update a note

The validation works and displays correctly for Update and Validate tabs. The redirect does not work when I add/update a note as it uses a separate page outwith the tabs.

I have used the following code before to redirect to a tab

return Redirect(Url.Action("View", new { id = note.Id }) + "#tabs-4");

and this does not work with the above code

If I comment out 'active' it works correctly

$("#tabs").tabs(
    {
    //active: $("#SelectedTabToFind").val(),
    cache: false
    });

How do I redirect to the correct tab but keep active option for validation?


Solution

  • With the help of JQuery UI tabs: How do I navigate directly to a tab from another page?

    The correct tab is displayed when validating a form and the redirect from another page works as well.

    View Page

    if (document.location.hash != '')
            {
               var tabSelect = document.location.hash.substr(1, document.location.hash.length);
                //Used to return to tab using return Redirect(Url.Action("View", new { id = note.Id }) + "#4");
               $("#tabs").tabs(
               {
                   active: tabSelect,
                   cache: false
               });
            }
            else
            {
                $("#tabs").tabs(
                {
                    //Used to return to tab using return ViewModel.SelectedTab = 2;
                    active: $("#SelectedTabToFind").val(),
                    cache: false
                });
            }
    

    Used for note section in controller

    return Redirect(Url.Action("View", new { id = note.Id}) + "#4");
    

    Used for Update and Validate section in controller

    ViewModel.SelectedTab = 2;