CODEWITHSUNDEEP
asp.netajaxsearchfilter
RohitWagh
RohitWagh

Reputation: 2097

Ajax enabled search for products with multiple criteria

want to have search functionality as on this website

http://www.carwale.com/new/search.aspx#budget=6&budget=8&fuel=2

here whenever the user filters search(checks any checkbox), it updates results accordingly, that can be understood as an ajax filter.

But at the same time, the query string also reflects for the change, which helps the user to bookmark the filter search for later reference.

changing it through asp.net/javascript may cause the page to reload..

any hint or suggestions on implementing the same would be really helpful..

Upvotes: 1

Views: 1263

Answers (2)

Chris
Chris

Reputation: 174

This can be done with the help of 3 things together

1) as @Aristos said, checkboxes with Auto Postback enabled

2) Ajax control toolkit Modalpopup, which gets fired automatically on every async postback (http://weblogs.asp.net/ruslan/pages/ajax-update-progress-updateprogress-in-ajax-modal-popup-modalpopupextender.aspx or http://mattberseth.com/blog/2007/07/modalpopup_as_an_ajax_progress.html)

3) History Points (http://msdn.microsoft.com/en-us/library/cc488548.aspx)

This can be done completely without the use of jQuery, if you dont want to use it.

Upvotes: 1

Aristos
Aristos

Reputation: 66641

-- For the first part, he have a set of check boxes list with autopostback.

In every post back the list is updated base on the selected check box.

All is simple until now, the cool is that is have a nice interactive interface (made with javascript and jQuery).

-- About the second part, how its change the url so can be bookmark with out reload the page. The trick here is that is place the parameters after the anchor # eg:

/new/search.aspx#budget=2

Using the anchor # the page is not reload and stay as it is. So when some one click on the check boxes, via javascript is also update the url, but only what is after the # so the page stay as is with out fully reload.

Now the parameters after the # can not read on code behind but only via javascript.

So when you have bookmark this page and you go direct to eg /new/search.aspx#budget=2 the javascript reads what is after the # and translate it to commands, check the appropriate checkboxes, and ask for refresh the content. All that can be done only via javascript.

I see that is use the jQuery history plugin as helper with this schema.

http://archive.plugins.jquery.com/project/history

The same trick with parameters after # is done from amazon, when you navigate on catalog, from page to page.

-- One more clever trick that is done is that is open a full page wait, so the user can not interact with the page until the page is ready again. If it not do that, and the user make very fast two clicks on the check boxes, then this can cause a full page post back on updatepanel and this can lose the previous settings.

Upvotes: 1

Related Questions