ASP.NET partial page upload without Updatepanel /With jQuery

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

According to me, using an UpdatePanel wrapped around a Repeater/DataGrid/GridView will be a much more easier-to-implement approach.

It can also be done with jQuery. It would consist of sending the CateogryId using an ajax request to the server, getting the products' JSON in response, and filling up a div with the JSON data using DOM manipulation.

EDIT: Using JSON, complex data can be represented in an easy to read text format, in an object oriented way. Take a look at this -

var person = {
     "firstName": "John",
     "lastName": "Smith",
     "address": {
         "streetAddress": "21 2nd Street",
         "city": "New York",
         "state": "NY",
         "postalCode": 10021
     },
     "phoneNumbers": [
         "212 555-1234",
         "646 555-4567"
     ]
 };

person is a JSON object consisting of the following properties: "firstName", "lastName", etc. You can access these properties using person.firstName, person.lastName,etc.

This is an example of JSON, you can utilize this to create your own JSON string containing product information and send it in an array to the client. In short, it will be an array of objects like this -

var persons = [person1, person2, person3, ...]; //person1, person2, etc. are objects like the person object declared above.

You can use the DataContractJsonSerializer class (in Framework 3.5) to serialize/deserialize object to and from JSON. If you are using Framework < 3.5, you can use the JavaScriptSerializer class of AjaxToolKit to do the same.

Answer 2

I would recommend reading up on

• calling Web Services using jQuery

or

• calling Page Methods using jQuery.

Depending on where your web application is running (intranet as opposed to internet), using an UpdatePanel may be a quicker option to implement AJAX-style functionality.

Answer 3

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.

Answer 4

You could also consider a "quick and dirty" solution: in your page code-behind, implement ICallbackEventHandler, and return a block of html, which you stuff into your div or table.

Update: Take a look at http://msdn.microsoft.com/en-us/library/ms178208.aspx for additional details on what you need to implement this.