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

I have an MVC 1.0 application on VS2008.

I have a web page with search form fields and then when the search button is clicked, it uses the Ajax.BeginForm to load the results into a div. Works great!

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

Of course the same action used when clicking the search button.

So what happens is the results are displayed on a new page on their own. Because the links are not being called using Ajax.

So how can I structure my views and actions so that when the 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

+1


a source to share


2 answers


I think I understand what you are saying.

You are currently using Ajax to dynamically update the results in a div. Kewl.

The trick here is to make sure every "page" in the pager has a similar javascript function defined in the onclick event. So the pager doesn't do a "postback" to the server, but a javascript method works ... 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 it do it? make sure the pager is NOT inside the form And notice the "#" symbols? this ensures that when you click on the text, it doesn't try to navigate to another HTML page elsewhere.

Do you know how to connect any javascript to an html element? How to generate html code for a pager?

try this and keep us updated.

+1


a source


Use jquery to make your page bindings make an ajax call to the controller. Return the results in JSON or xhtml or any other format to make you feel happy and use this to replace the div content, or create and replace content if JSON.

If you haven't got into jquery, I highly recommend it. The documentation is pretty great. Let me provide you with some useful links for this:

JSON.net Serializer



jQuery Documentation

fair example of using jquery for swap

The example uses the rss feed (xml) as the source, but it should catch you.

+1


a source







All Articles