Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

why a # character is added to the url?

I have a simple page displaying thumbnail list ,

I want to to add a pager , i have added two action links

  <li class="ui-pagination-next">@Html.ActionLink("Next", "Paginate", "Home", new { nbSkip = ViewBag.nextSkip }, null)</li>

when i click on the link i'm redirected to

http://localhost:41626/#/Home/Paginate?nbSkip=60

instead of

http://localhost:41626/Home/Paginate?nbSkip=60 , 

does anyone know why the '#' character is added to the URL ?

Route copnfig :

public class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
        );
    }
}
like image 365
Mouadh Avatar asked Sep 07 '12 09:09

Mouadh


2 Answers

by looking at your code i could find ui-pagination-next
this might mean that some other JS framework is actually listening to the click events of this link and doing some kind of ajax
hash "#" character is being used so that actually browser does not redirects to the page and at the same time maintains history
so if you press the browsers back button this additional peice of the link after # is removed and any JS framework subscribed to the evet knows how to handle it then

in simpler terms.
anything after the # in a url isnt sent to the server. Because some JS framework is handling the ajax part, it does not want that request should directly go to the server and also at the same time show look proper in the browsers address bar hence adds whatever you have in the link after the # and carries on with AJAX

heres an indepth article using hash for back and forward

like image 53
Parv Sharma Avatar answered Oct 09 '22 09:10

Parv Sharma


From looking at your li class of ui-pagination-next im assuming jQuery Mobile is being used here.

jQuery Mobile by default, makes your links AJAX enabled


If you wish, you can prevent this by using:

$.mobile.ajaxLinksEnabled = false; 

<script type="text/javascript">
   $(function(){
       $.mobile.ajaxLinksEnabled = false; 
   });
</script>
like image 36
Curtis Avatar answered Oct 09 '22 09:10

Curtis