URL showing # when toggling nav tab

Reply

amir1507

None

0 Points

2 Posts

URL showing # when toggling nav tab

Jul 07, 2020 11:18 AM|amir1507|LINK

The profile URL

            routes.MapPageRoute(
                "ProfileRoute",
                "Profile/{userid}",
                "~/Profile.aspx"
                );

So basically the URL contains the data of the current authenticated user and stored in the RouteData ["userid"]. The userid is fetched from the database with the user, currently logged in. In the Profile web-form, I have the following tab panes

        <div class="collapse navbar-collapse justify-content-center fixed" id="collapsibleNavbar">
        <ul class="nav nav-tabs" id="mainTab" role="tablist">
        <li class="nav-item">
        <a class="nav-link active" id="hometab" data-toggle="tab" name="home" href="#home" aria-controls="home" aria-selected="true" style="font-size: 90%; text-align:center;">Home</a>
        </li>
        <li class="nav-item">
        <a class="nav-link" id="protab" data-toggle="tab" href="#Profile" name="profile" aria-controls="profile" aria-selected="true" style="font-size: 90%;  text-align:center;">Profile</a>
        </li>
        </ul>
        </div>
        <div class="tab-content">
        <div class="tab-pane container active" id="home" aria-labelledby="hometab" data-ride="tab">
          ...
         <div>

        <div class="tab-pane container active" id="Profile" aria-labelledby="protab" data-ride="tab">
         ...
         <div>

         <div>

when I toggle the tab pane, the URL shows "Profile/userid/#home" or "Profile/userid/#Profile" and the tab pane does not activate.

I previously routed as following ("Profile.aspx?id={0}", userid") and the URL would look like "Profile.aspx?userid=(user)". I prefer to route the new way as I mentioned above using the MapPageRoute method registered in my RouteConfig.cs because I'll be further fetching more data from my database and generating URL's based on this data.

I'm working with bootstrap 4.5 in asp.net web-forms.

Reply

mgebhard

All-Star

49171 Points

21755 Posts

Re: URL showing # when toggling nav tab

Jul 07, 2020 11:34 AM|mgebhard|LINK

Never place the UserId in the URL. Use the standard web site security that comes with ASP.NET. The UserId is encrypted within an authentication cookie.

https://docs.microsoft.com/en-us/aspnet/identity/overview/getting-started/adding-aspnet-identity-to-an-empty-or-existing-web-forms-project

The reason you see the "#" is because you added it to the href attribute. The "#" is a special URL character used to navigate (bookmark) to a located on the current page.

https://www.w3schools.com/html/html_links_bookmarks.asp

Reply

amir1507

None

0 Points

2 Posts

Re: URL showing # when toggling nav tab

Jul 07, 2020 11:53 AM|amir1507|LINK

Thank you so much concerning the ASP.net Identity advice!!!

I read a lot about it, however, I felt like doing my own authentication. I create a login cookie, encrypt it and store it. Whenever the page loads, this cookie is fetched and the user is logged in according to this cookie. I don't know much about security, I'm learning a lot while writing my code & developing my project. So I don't know whether my way of authentication is secure. Thanks so much anyway.

However, I'm aware of the use of the href attribute. The toggle used to work perfectly when I routed with the following format ("Profile.aspx?id={0}", userid). When I changed the format from this one to the one in my question "routes.MapPageRoute("ProfileRoute", "Profile/{userid}", "~/Profile.aspx");" (the route would look like Profile/userid), it stopped working and it started showing the "#" in my URL. That's the problem that I'm unable to find an answer for.