Load page with Target in URI when returning from Postback

Question

I have multiple segments on a web page, identified with targets, like this:

<div id="target1" class="section">
          <h4><a href="#target1">Buildings by Name</a></h4>
          <div>

              // button to call server side function
          </div>
</div>

So when user clicks "Buildings by Name", the URI changes to http://www.mydomain.com/page.aspx#target1

i need to call a server side function, which will do some processing. And when i return from the server side script, i want to reload the page with the same targeted URI http://www.mydomain.com/page.aspx#target1 . Right now, when I return from the postback, the URI is just /page.aspx

is there a way to do this?

thanks!

Answer 1

I found a way to do this. Not the most glamorous, but it seems to work. I used this post as a guide: Programmatically scroll to an Anchor Tag

So, in the server side code, after processing, I called a javascript function: ClientScript.RegisterStartupScript(this.GetType(), "scrolling", "scrollToResults()");

Then, in the aspx page, i threw in the javascrpt function:

<Script>
function scrollToResults() {
         // next 2 lines work on desktop browsers, but not mobile
         // var el = document.getElementById("target1");
         // el.scrollIntoView(true);

         // this bit will work for most mobile browsers
            window.location.href = window.location.protocol + "//" + window.location.host +
                   window.location.pathname + window.location.search +
                   "#target1";
  }
  </script>

Answer 2

I would go down the AJAX route with this. Basically, use JavaScript to override the click handler on your tag, run a call to the server, and populate the data from the response into your .

I'm a fan of the jQuery library for these tasks, but there's a slew of great tools out there to help.

And some tutorials on doing AJAX w/ jQuery:

http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/ http://www.sitepoint.com/ajax-jquery/