CODEWITHSUNDEEP
asp.netnavigationsingle-page-application
Warlock
Warlock

Reputation: 7471

Single Page Applications using ASP Web Forms

I need to implement single page applications using ASP Web Forms. I faced with a navigation problem. I need to use a navigation pattern like this:

http:// web site url / ... / page.aspx? {query string} # {ListId} / {ItemId}

When a user request a data from the server, the request on the server doesn't contain hash # (because this is a client-side feature). And it looks like this:

http:// web site url / ... / page.aspx? {query string}

So, actually I need two requests:

  1. to get a page without hash and load javascript;
  2. to handle hash data using javascript and async call required data from the server.

Is it possible to implement this logic with only one request?

Are there any best practices?

Upvotes: 1

Views: 2259

Answers (1)

user1068352
user1068352

Reputation: 632

You can append ListId/ItemId to query string before sending request and read it regularly on a server.

var url = 'http://example.com?param1=10&param2=20#1000';
var beforeHash = url.split('#')[0];
var itemId= url.split('#')[1];

var processedUrl =  beforeHash + '&itemId=' + itemId;

If your request is not already fired from JavaScript, you will have to hook into link's click event...

Or maybe you can get rid of # entirely and scroll content via JavaScript (my guess is that you use # because of local anchors to jump to different places in document)?

BTW There is window.location.hash property.

Update: Based on your comment the flow is like this:

  1. User types URL with #ItemId
  2. Server returns the page
  3. JavaScript reads #ItemId from window.location, puts it into QueryString and makes a request
  4. Server returns the page based on modified QueryString

In this situation the two-requests pattern seems to be the only viable option. By design server does not get #Item part (called fragment). So there is no way to guess ItemId upon initial request. If after second (ajax) request, you refresh #ItemId dependant parts of the page through JavaScirpt, user experience will not be hindered much.

Upvotes: 1

Related Questions