Redirect page to specific tabs in mvc

Last Reply 7 days ago By dharmendr

Posted 8 days ago

Hi,

I have a page that has 2 tabs which is #tabs-1 and #tabs-2.

I want to redirect the page to #tabs-2 after submit form. I tried the code but it didn't work.

Here is my code.

 FormRequest View

<script type="text/javascript">
    $(function () {
        if ($('#hfSelected').val() != '') {
            var enabled = [];
            var disabled = [];
            if ($('#hfEnabled').val() != '') {
                enabled = $('#hfEnabled').val().split(',').map(Number);
            }
            if ($('#hfDisabled').val() != '') {
                disabled = $('#hfDisabled').val().split(',').map(Number);
            }

            $("#tabs").tabs({ active: $('#hfSelected').val(), enabled: enabled, disabled: disabled });
        } else {
            $("#tabs").tabs({ disabled: [1, 2] });
        }

        $('#ddlMaterial').change(function () {
            $('#req_material').val($(this).find('option:selected').text());
        });
        $('#ddlQuantity').change(function () {
            $('#req_quantity').val($(this).find('option:selected').text());
        });
    });

 $(function () {
    var selector = '@ViewBag.ActiveTab';
    if(selector)
    {
       $("#tabs"+selector).tab('show');
    }        
});
</script>

<input type="hidden" value="@TempData["Selected"]" id="hfSelected" />
<input type="hidden" value="@TempData["Enabled"]" id="hfEnabled" />
<input type="hidden" value="@TempData["Disabled"]" id="hfDisabled" />
<div id="tabs">
    <ul class="nav nav-pills">
        <li class="active"><a href="#tabs-1" data-toggle="tab">Details</a></li>
        <li><a href="#tabs-2" data-toggle="tab">Material</a></li>
       
    </ul>
    <div class="tab-pane active" id="tabs-1"> Hello
<input id="btnSaveMaterial" type="submit" value="Next" class="btn btn-primary" />
</div>

<div class="tab-pane" id="tabs-2">

        @using (Html.BeginForm("AddMaterial", "Home", FormMethod.Post))
        {
            //////form section details
        </div>
        }

 AddMaterial controller

[HttpPost]
        public ActionResult AddMaterial(ItemModel model, string id)
        {
            TempData["Selected"] = "2";
            TempData["Enabled"] = "0,1,2";
            
            id = Convert.ToString(TempData["NewID"]);
            ViewBag.ActiveTab = id;

            ////insert data into database part

            return new RedirectResult(Url.Action("FormRequest", new { id }) + "#tabs-2");
            
        }

 

You are viewing reply posted by: dharmendr 7 days ago.
Posted 7 days ago
nabilabolo says:
return new RedirectResult(Url.Action("FormRequest", new { id }) + "#tabs-2");

Here you are setting #tabs-2 in the Url. In order to set active tab you need to set it dynamically.

return new RedirectResult(Url.Action("FormRequest", new { id }) + "#tabs-2");

Check the example.

Controller

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new ItemModel());
    }

    public ActionResult FormRequest()
    {
        return View(new ItemModel());
    }

    [HttpPost]
    public ActionResult AddMaterial(ItemModel Imodel, string id)
    {
        TempData["Selected"] = "2";
        TempData["Enabled"] = "0,1,2";

        ////insert data into database part
        string activeTab = "#tabs-2";
        return new RedirectResult(Url.Action("FormRequest", new { id }) + activeTab);
    }
}

View

Index

<input type="hidden" value="<%=TempData["Selected"] %>" id="hfSelected" />
<input type="hidden" value="<%=TempData["Enabled"]%>" id="hfEnabled" />
<input type="hidden" value="<%=TempData["Disabled"]%>" id="hfDisabled" />
<div id="tabs">
    <ul class="nav nav-pills">
        <li class="active"><a href="#tabs-1" data-toggle="tab">Details</a></li>
        <li><a href="#tabs-2" data-toggle="tab">Material</a></li>
    </ul>
    <%using (Html.BeginForm("AddMaterial", "Home", FormMethod.Post))
        {%>
    <div class="tab-pane active" id="tabs-1">
        Hello
        <input id="btnSaveMaterial" type="submit" value="Next" class="btn btn-primary" />
    </div>
    <div class="tab-pane" id="tabs-2">
    </div>
    <%}%>
</div>
<link rel="stylesheet" media="screen" href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css' />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#tabs").tabs();
    });
</script>

FormRequest

<input type="hidden" value="<%=TempData["Selected"] %>" id="hfSelected" />
<input type="hidden" value="<%=TempData["Enabled"]%>" id="hfEnabled" />
<input type="hidden" value="<%=TempData["Disabled"]%>" id="hfDisabled" />
<div id="tabs">
    <ul class="nav nav-pills">
        <li><a href="#tabs-1" data-toggle="tab">Details</a></li>
        <li><a href="#tabs-2" data-toggle="tab">Material</a></li>
    </ul>
    <div class="tab-pane active" id="tabs-1">
        Hello
        <input id="btnSaveMaterial" type="submit" value="Next" class="btn btn-primary" />
    </div>
    <div class="tab-pane" id="tabs-2">
        Material Tab
    </div>
</div>
<link rel="stylesheet" media="screen" href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css' />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#tabs").tabs();
    });
</script>

Screenshot