MVC - How to structure views for a search form with results on same page.

Question

Hi,

I have MVC 1.0 app on VS2008.

I have webpage that has a search form fields and then when search button clicked uses Ajax.BeginForm to load results in a div. Works great!

But the results have a pager that just uses an anchor with href passing in page index to controller action.

Of course the same action that is used when the search button is clicked.

So what happens is the results are displayed in new page by themselves. Because the links are not called using Ajax.

So how can I structure my views and actions so that when a link is clicked in the pager that the form is submitted to the action as well as the page index for the results??

Do you understand me??

Malcolm

Answer 1

I think I understand what you are saying.

Currently, you're using Ajax to dynamically update your results to a div. Kewl.

The trick here is to make sure each 'page' in the pager has a similar javascript function defined on the onclick event. This way, the pager doesn't do a 'postback' to the server, but the javascript method is ran ... which calls some ajax.

here's some sample html...

<a href="#" onclick="DoPagedSearch(1)>1</a> | 
<a href="#" onclick="DoPagedSearch(2)>2</a> .. etc

does this make sence? make sure the pager is NOT inside a form AND notice the '#' characters? that makes sure that when u click on the text, it doesn't try and goto another HTML page, elsewhere.

Do you know how to wire up any javascript to an html element? How do u create the html code for the pager?

try that and keep us posted.

Answer 2

Use jquery to have the page anchors make an ajax call to the controller. Return the results as JSON or xhtml or whatever format makes you feel happy and use that to replace the content of the div, or build up and replace the contents if JSON.

If you haven't dug into jquery, I highly recommend it. The documentation is rather excellent. Let me provide you a few useful links for this:

JSON.net serializer

jQuery Documentation

fair example of using jquery for paging

The example uses an rss feed (xml) as the source, but It should get you going.