Question

I’m pretty new to MVC so this may seem like an obvious question, but when posting to my ActionResult, the ActionResult gets called, but the View doesn’t change.

What I’m doing is having a basic search page where a user can search my database and the results are returned and paginated.

Here is javascript that calls that ActionResult in my controller.

    function SubmitSearch() {

    var searchBox = document.getElementById('searchBox');

    $.post("MyController/SearchResults/",
    {
        searchString: searchBox.value,
        page: 0
    });

    window.location = "../DriverStudio/Drivers/SearchResults/" + searchBox.value + '/0';
}

My current solution (which is a horrible hack) is to comment out the $.post(since my route is set up in a way where the window.location will call the SearchResutls ActionResult) and set the window.location to what the user searched for, starting at page 0.

There has to be a better way. What should I do?

Answer 1

Set up your SearchResults action to return a partial view containing only the part of the page to be updated when the search is performed. This piece should be contained in some container, making it easy to replace. Then use the callback mechanism on the post method to replace the contents of that DIV with the partial view result returned from your SearchResults action. Return false from your handler to stop the default submit action from being taken.

function SubmitSearch() { 

    var searchBox = $('#searchBox'); 

    $.post("MyController/SearchResults/", 
    { 
        searchString: searchBox.val(), 
        page: 0 
    }, function(data) {
        $('#searchResults').html( data );
    }); 

    return false;
}

This assumes some view code that looks something like:

 <% using (Html.BeginForm()) { %
      <label for="searchBox">Search:</label>
      <%= Html.TextBox("searchBox") %>
 <% } %>
 <div id="searchResults">
 </div>