locked
Append the nav tab name to the url RRS feed

  • Question

  • User1185448985 posted

    Hello everyone i'm working with asp core and i would like to append the name of the tab to the url to become "https://localhost:44376/Home/Index/register" when the register tab is clicked and the same for the two other tabs is there any way to do that form the Index Action or using Javascript ?

    Razor View

    <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="Register-tab" data-toggle="tab" href="#Register" role="tab" aria-controls="home" aria-selected="true">Centers</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="Seats-tab" data-toggle="tab" href="#Seats" role="tab" aria-controls="profile" aria-selected="false">Children</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="Subscription-tab" data-toggle="tab" href="#Subscription" role="tab" aria-controls="contact" aria-selected="false">Subscribtions</a>
            </li>
    </ul>
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="Register" role="tabpanel" aria-labelledby="Register-tab">
    ..................
    </div>
            <div class="tab-pane" id="Seats" role="tabpanel" aria-labelledby="Seats-tab">
    ..................
    </div>
            <div class="tab-pane fade" id="Subscription" role="tabpanel" aria-labelledby="Subscription-tab">
    
    ..................
    </div>
    </div>
    

    Thank you in advance

    Wednesday, September 23, 2020 9:18 PM

Answers

  • User-474980206 posted

    or just do server side. change index to

    public ActionResult Index(string id)
    {
          ViewBag.Hash = id.ToLowerCase();
    }

    in the view its just:

    <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link @(ViewBag.Hash == "register" ? "active" ? "")" id="Register-tab" data-toggle="tab" href="#Register" role="tab" aria-controls="home" aria-selected="true">Centers</a>
            </li>
            <li class="nav-item">
                <a class="nav-link @(ViewBag.Hash == "seats" ? "active" ? "")" id="Seats-tab" data-toggle="tab" href="#Seats" role="tab" aria-controls="profile" aria-selected="false">Children</a>
            </li>
            <li class="nav-item">
                <a class="nav-link @(ViewBag.Hash == "subscription" ? "active" ? "")" id="Subscription-tab" data-toggle="tab" href="#Subscription" role="tab" aria-controls="contact" aria-selected="false">Subscribtions</a>
            </li>
    </ul>
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade @(ViewBag.Hash == "register" ? "show active" ? "")" id="Register" role="tabpanel" aria-labelledby="Register-tab">
    ..................
    </div>
            <div class="tab-pane fade @(ViewBag.Hash == "seats" ? "show active" ? "")" id="Seats" role="tabpanel" aria-labelledby="Seats-tab">
    ..................
    </div>
            <div class="tab-pane fade @(ViewBag.Hash == "subscription" ? "show active" ? "")" id="Subscription" role="tabpanel" aria-labelledby="Subscription-tab">
    
    ..................
    </div>
    </div>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 25, 2020 3:48 PM
  • User-474980206 posted

    of course not. the tab change is done by the bootstrap library. if you want the tab change to navigate, then make tabs links rather than bookmarks. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 25, 2020 7:57 PM
  • User1185448985 posted

    Exactly i've missed that, Thank you

    <ul> part now :

    <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item">
                @Html.ActionLink("Register", "IndexTest", "Request", new {Tab="Register" }, new { @class = "nav-link" })
            </li>
            <li class="nav-item">
                @Html.ActionLink("Seats", "IndexTest", "Request", new { Tab = "Seat"}, new { @class = "nav-link" })
            </li>
            <li class="nav-item">
                @Html.ActionLink("Subscription", "IndexTest", "Request", new { Tab = "Subscription"}, new { @class = "nav-link" })
            </li>
        </ul>

    for <div class="tab-content"> it is like Bruce's example 

    for the Action:

    public async Task<IActionResult> IndexTest(int Page = 1, string Tab = "Register") // register tab is active on load
            {
                ViewBag.Hash = Tab;
    ................ //Changing the value of ViewBag.Hash accordingly }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, September 26, 2020 4:17 PM

All replies

  • User1312693872 posted

    Hi, Amani AI

    Amani Al

    "https://localhost:44376/Home/Index/register" when the register tab is clicked and the same for the two other tabs

    You can add the following js:

    @section Scripts
    {
    <script>
        $(document).ready(() => {
            $('a[data-toggle="tab"]').on("click", function () {
                var newUrl;
                var hash = $(this).attr("href");
                hash = hash.substring(1, hash.length);
                newUrl = '/Home/Index/'+hash;
                history.replaceState(null, null, newUrl);
            });
        });
    </script>
    }

    Result:

    Best Regards,

    Jerry Cai

    Thursday, September 24, 2020 1:57 AM
  • User1185448985 posted

    your answer is very helpful, but if i want to to redirect from action to specific tab directly is it possible ??

    My situation is as follows:

    I'm sending 3 lists from my index action to index.cshml by populating my viewmodel with these three lists

    and I'm rendering each list in a different tabs.

    I'm also using pagination where i handle the page count and everything in the same action, and this is where the complexity is happening.

    i would like to rout from my action directly to the tab like "/Home/Index/register" where the register tab will be active. and the same for the other tabs "/Home/Index/seats" and "/Home/Index/subscription"

    Thursday, September 24, 2020 10:04 PM
  • User1312693872 posted

    Hi,Amani Al

    You can add these to the Script, get the last part of the url and show related tab content:

     var url = location.href;
            var index = url.lastIndexOf("\/");
            url = url.substring(index + 1, url.length);
    
            if (url == "Subscription") {
                $(this).removeClass('active').siblings().addClass('active');
                $('#Subscription').show().siblings().hide();
            }
            if (url == "Seats") {
                $(this).removeClass('active').siblings().addClass('active');
                $('#Seats').show().siblings().hide();
            }
            if (url == "Register") {
                $(this).removeClass('active').siblings().addClass('active');
                $('#Register').show().siblings().hide();
            }

    Best Regards,

    Jerry Cai

    Friday, September 25, 2020 10:00 AM
  • User-474980206 posted

    or just do server side. change index to

    public ActionResult Index(string id)
    {
          ViewBag.Hash = id.ToLowerCase();
    }

    in the view its just:

    <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link @(ViewBag.Hash == "register" ? "active" ? "")" id="Register-tab" data-toggle="tab" href="#Register" role="tab" aria-controls="home" aria-selected="true">Centers</a>
            </li>
            <li class="nav-item">
                <a class="nav-link @(ViewBag.Hash == "seats" ? "active" ? "")" id="Seats-tab" data-toggle="tab" href="#Seats" role="tab" aria-controls="profile" aria-selected="false">Children</a>
            </li>
            <li class="nav-item">
                <a class="nav-link @(ViewBag.Hash == "subscription" ? "active" ? "")" id="Subscription-tab" data-toggle="tab" href="#Subscription" role="tab" aria-controls="contact" aria-selected="false">Subscribtions</a>
            </li>
    </ul>
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade @(ViewBag.Hash == "register" ? "show active" ? "")" id="Register" role="tabpanel" aria-labelledby="Register-tab">
    ..................
    </div>
            <div class="tab-pane fade @(ViewBag.Hash == "seats" ? "show active" ? "")" id="Seats" role="tabpanel" aria-labelledby="Seats-tab">
    ..................
    </div>
            <div class="tab-pane fade @(ViewBag.Hash == "subscription" ? "show active" ? "")" id="Subscription" role="tabpanel" aria-labelledby="Subscription-tab">
    
    ..................
    </div>
    </div>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 25, 2020 3:48 PM
  • User1185448985 posted

    i've done the modifications but when the tab is changed it never hits the action

    Friday, September 25, 2020 6:36 PM
  • User-474980206 posted

    of course not. the tab change is done by the bootstrap library. if you want the tab change to navigate, then make tabs links rather than bookmarks. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 25, 2020 7:57 PM
  • User1185448985 posted

    Exactly i've missed that, Thank you

    <ul> part now :

    <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item">
                @Html.ActionLink("Register", "IndexTest", "Request", new {Tab="Register" }, new { @class = "nav-link" })
            </li>
            <li class="nav-item">
                @Html.ActionLink("Seats", "IndexTest", "Request", new { Tab = "Seat"}, new { @class = "nav-link" })
            </li>
            <li class="nav-item">
                @Html.ActionLink("Subscription", "IndexTest", "Request", new { Tab = "Subscription"}, new { @class = "nav-link" })
            </li>
        </ul>

    for <div class="tab-content"> it is like Bruce's example 

    for the Action:

    public async Task<IActionResult> IndexTest(int Page = 1, string Tab = "Register") // register tab is active on load
            {
                ViewBag.Hash = Tab;
    ................ //Changing the value of ViewBag.Hash accordingly }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, September 26, 2020 4:17 PM