URL is changing unexpectedly in JQuery mobile

Question

I have a page like this:

<%@ Page Title="" Language="C#" MasterPageFile="~/TekContent.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="ContentPage" ContentPlaceHolderID="PageIdContent" runat="Server">
    <div data-role="page" id="pageHome">
        <div data-role="header" data-position="inline">
            <h1>Welcome To My App</h1>
        </div>
        <div data-role="content">
            <ul data-role="listview" data-inset="true">
                <li><a href="#pageSignMe">Sign me up</a></li>
                <li><a href="AddTag.aspx">Add Tag</a></li>
                <li><a href="ShowList.aspx">Tag List</a></li>
            </ul>
        </div>
        <div data-role="footer" class="ui-bar" id="div2">
        </div>
    </div>
</asp:Content>

When I clicked on Tag List, url is changing from http://localhost/MyApp/ to http://localhost/MyApp/#AddTag.aspx . I couldn't get why # adding to before Tag.aspx.

Later links are changing url more. Like: http://localhost/MyApp/#MyApp/AddTag.aspx?id=1 this is because my page script inside AddTag.aspx isn't working properly.

I think I didn't get the JQuery mobile URL rules.

Answer 1

Your URLs will be rewritten by jQuery Mobile. You should add the following to tell it that the link is external:

<li><a href="AddTag.aspx" rel="external">Add Tag</a></li>

See: Page Links documentation