How to change URL on button click without page redirect in asp.net

问题

I have a page similar to this link which list items. All works fine. Just i am not able to rewrite the URL of a page on button clicked at different Levels.

EG: when i click on Button "CellPhone" on Level1 div and later on click on Button "BlackBerry" which is on Level2 div then URL must be "www.somesite.com/cellphone/blackberry" and again when i click on Button "cellphone" i must change URL to "www.somesite.com/cellphone"

Please can any one suggest me to do the same in asp.net.

Note: I am using Visual Studio 2008 Framework 3.5

Update:

function changeState(num) {
            var stateObj = { foo: "Default" };
            //alert(window.history.length);
            if (num == 1) {
                alert("cellphone");
                window.history.replaceState(stateObj, "HtmlPage", "Cellphone");
                Show("divLevel2");
            }
            else if (num == 2) {
                alert("sprint");

                window.history.replaceState(stateObj, "HtmlPage", "CellPhone/Sprint");
                Show("divLevel3");

            }
            else if (num == 3) {
                alert("iphone6");
                Show("divLevel3");
             window.history.replaceState(stateObj, "HtmlPage","CellPhone/Sprint/iPhone6");


            }
        }
        $(document).ready(function() {
            HideAll();

        });
        function Show(divid) {
            $("#" + divid).css("display", "block");

        }
        function HideAll() {
            $("#divLevel2").css("display", "none");
            $("#divLevel3").css("display", "none");

        }

ASPX MARKUP:

 <div class="divMain" class="box">
        <div id="divLevel1" class="box">
            <asp:UpdatePanel runat="server" ID="updatePanelLevel1">
                <Triggers>
                </Triggers>
                <ContentTemplate>
                    <asp:Button ID="Button1" runat="server" Text="CellPhone" class="Button1" OnClick="Button1_Click"
                        ForeColor="Black" />
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
        <div id="divLevel2" class="box">
            <asp:UpdatePanel runat="server" ID="updatePanelLevel2">
                <Triggers>
                </Triggers>
                <ContentTemplate>
                    <asp:Button ID="Button2" runat="server" Text="Sprint" class="Button2" OnClick="Button2_Click"
                        ForeColor="Black" />
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
        <div id="divLevel3" class="box">
            <asp:UpdatePanel runat="server" ID="updatePanelLevel3">
                <Triggers>
                </Triggers>
                <ContentTemplate>
                    <asp:Button ID="Button3" runat="server" Text="iPhone6" class="Button3" OnClick="Button3_Click"
                        ForeColor="Black" />
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </div>

Pagename.ASPX.CS

protected void Button1_Click(object sender, EventArgs e)
    {
        ScriptManager.RegisterStartupScript(this, GetType(), "myFunction1", "changeState(1);", true);
    }
    protected void Button2_Click(object sender, EventArgs e)
    {
        ScriptManager.RegisterStartupScript(this, GetType(), "myFunction2", "changeState(2);", true);
    }
    protected void Button3_Click(object sender, EventArgs e)
    {
        ScriptManager.RegisterStartupScript(this, GetType(), "myFunction3", "changeState(3);", true);
    }

When i click on "iPhone6" button the click event doesnt fire! any idea?

回答1:

As mentioned, you can't achieve this on the server side, but have to resort to using javascript.

You can manipulate the URL like that, without triggering actual navigation, in browsers that support history.pushState().

In other browsers, you can resort to manipulating the hash part of the URL, which will also not trigger navigation (``)

If you're using jQuery, it could look like this:

$('#buttonId').click(function(){
  if(history.pushState){
    //Will become example.com/cellphone/blackberry
    history.pushState(null, '', 'cellphone/blackberry');
  }
  else {
    //Will become example.com#cellphone/blackberry
    window.location.hash = 'cellphone/blackberry'
  }
});

回答2:

Try Below Code

• You need client script (JavaScript) for this.

`

$('#<%= ButtonID.ClientID %>').click(function () {            
     window.location.hash = "blckberry"; //  Change URL with any TEXT************         
    });

`

• OR you can use this also.

  window.history.pushState('obj', 'newtitle', '/blckberry');

来源：https://stackoverflow.com/questions/26908098/how-to-change-url-on-button-click-without-page-redirect-in-asp-net