URL showing # when toggling nav tab

Question

User256094225 posted

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.

Answer 1

User475983607 posted

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

Answer 2

User256094225 posted

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.

Answer 3

User-939850651 posted

Hi amir1507,

Have you tried using it with extensions? If this is the case, it may be related to it.

I found some cases that may be similar to the issue you encountered, please refer to blow link:

https://stackoverflow.com/questions/31514230/routes-mappageroute-does-not-work-with-point.

https://forums.asp.net/t/1857674.aspx?Problem+with+MapPageRoute

Best regards,

Xudong Peng