Set jQuery UI Tabs active on Button Click in ASP.Net MVC

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