why a # character is added to the url?

Question

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 }
        );
    }
}

Mislay

Answer 1

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>

Photic

the question was not how to solve this but what is hash and why is it used – Brisson

@ParvSharma Reformatted my answer. My answer provides documentation links as to why this is in place, and the option to disable – Photic

Answer 2

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

Brisson

Answer 3

If i were you , I would use Ajax Raw ActionLink :

@Ajax.RawActionLink("NameofLink", "Action", "Controller", new { oid = 0, type = "oid and type are 2 parameters you want to send to action " }, new { id = "btnNewB", @class = "anyclass" })

Anguished

Answer 4

Thank you all for your responses,

well seen @curt, in fact I'm using jQuery mobile, and what was causing the problem is mobile.changePage

Now I'm using simple button to navigate throw pages, but

$.mobile.ajaxLinksEnabled = false; 

Does not resolve my problem with ajax link's. So I've done this, and it's working now

 @Html.ActionLink("Previous", "Index", new { nbSkip = ViewBag.previousSkip }, new { data_role = "button", data_icon = "arrow-l", rel = "external", data_ajax = false })

Thanks @Parv Sharma for your explanation

Mislay