Question

I have an ASPX page .In the Top i am displaying 5 categories (Ex : Pen,Book,Shoe,Mobile,Mirror)
When i click on any of the categories,I want to show the products under that category below the header. I dont want to reload the entire page for this.I want to maintain my page as it is (The header,footer and side panels would ) when a click happens except the center place of the image (may be a DIV or Table to show Product). Whats the best way to do this ?.I dont want to go for the ASP.NET Ajax update panel.I am already using jQuery in my project.So is there anyway to do this with jQuery ? Please advice .Thanks in advance

Answer 1

As Kirtan mentioned, the easiest answer is to use an Update Panel.

If you don’t want to go that route, then you can use jQuery to make Ajax calls to an IHttpHandler which returns the data you need to populate the panel you want to update.

The steps would go as follows:

• Use jQuery to call “.ashx” Ajax handler.
• Have your “.ashx” file generate a response in your format of choice. This could be JSON or XML (if you want JavaScript to parse out the response and generate the list), or the HTML content itself to be added to the page.
• jQuery will receive the response from your handler, and populate your panel with the appropriate data.

There are a few tutorials online about how to use an IHttpHander. Basically it’s a very simple interface that ASP.NET’s “Page” class is derived from. It is much lighter weight than the Page class so you can get better performance than you would from an UpdatePanel, however, as with most performance boosting techniques, you have slightly more complex code.

Here is a tutorial on how to use an IHttpHandler class.