Loading partial view into div only works once

Question

I have the following controller and view:

SearchController.cs:

  public class SearchController : Controller
  {
    public ActionResult Index()
    {
      return View();
    }

    public ActionResult SearchResults()
    {
      int rnd = new Random().Next(100);
      var model = new List<SearchResultModel>
      {
        new SearchResultModel { Id=rnd, FirstName="Peter" + rnd, Surname="Pan" },
        new SearchResultModel { Id=rnd+1, FirstName="Jane", Surname="Doe"+rnd }
      };
      return PartialView("SearchResults", model);
    }
  }

Index.cshtml:

@model WebApplication1.Models.SearchCriterionModel

@{
  ViewBag.Title = "Index";
}

<script type="text/javascript">
  $(document).ready(function () {
    $('#btnSearch').click(function (evt) {
      evt.preventDefault();
      $('#placeholder').load("/Search/SearchResults");
    })
  });
</script>

<button id="btnSearch">Search</button>
<div id="placeholder"></div>

I just figured out that the template I used for the view (the standard Edit template) inserted a Html.BeginForm which somehow didn't let me fill a partial view into my div. So I removed the clutter and tried 'from scratch' and look - it worked. I can now successfully load the partial view SearchResults into the div with id = placeholder.

But: this only works once. That is, on the first button click, the code-behind method SearchResults() is called and the div is filled with the first set of 'randomized' data. Clicking more than once does enter the client-side click method, but doesn't go into my SearchResults() method anymore, so I guess no post-back is happening!? Why is that so? And how can I 'fix' this, that is, learn how to do it right and get new data everytime I press the button?

http://stackoverflow.com/questions/168963/stop-jquery-load-response-from-being-cached — Rake36, Mar 19 '15 at 14:11
@Rake36 Ahh, so this is basically a duplicate I guess. I have used search criteria to look for clues that were way off. Thanks! — InvisiblePanda, Mar 19 '15 at 14:15
But perhaps the question with this title is useful to others who have the same problem as I did/do, and who used different search keywords as well. — InvisiblePanda, Mar 19 '15 at 14:16
"Only loads once" is a tip-off to at least check for possibility of cached responses. You can do this very easily using Fiddler to see if you get the partial view via 304 or 200 response codes. — Rake36, Mar 19 '15 at 14:29

score 1 · Accepted Answer · answered Mar 19 '15 at 14:37

1

My MVC is a bit rusty, but you could try adding a random number to the URL so the browser won't get it from cache. Not sure if the controller method will ignore the 'r' parameter or not.

<script type="text/javascript">
   $(document).ready(function () {
     $('#btnSearch').click(function (evt) {
       evt.preventDefault();
       var random = getRandomNumber();  //TODO: implement
       $('#placeholder').load("/Search/SearchResults?r=" + random);
     })
   });
</script>

answered Mar 19 '15 at 14:37

Rake36

992
2
10
17

I'm gonna try it out tomorrow if you don't mind :) I'm sure something like this works though, but in the thread you linked there's another working solution using `$.ajax` to process the matter without caching. – InvisiblePanda Mar 19 '15 at 14:42
Right, and if you look at the jQuery documentation for what the cache option does, it just adds a random string to each request. Try both and watch what the network calls look like. http://api.jquery.com/jquery.ajax/ – Rake36 Mar 19 '15 at 16:57

score 1 · Answer 2 · answered Mar 26 '15 at 13:19

For completion's sake, this is how I ended up doing it.

First, I used a form because I wanted to pass parameters to the action method in the controller, similar to this:

@using(Html.BeginForm())
{
  .
  .
  some input elements
  .
  .
  <input type="submit" value="Search" />
}

Then I used the following script. Note that for this to work the action method now has to take an instance of the ViewModel as parameter as well.

<script type="text/javascript">
  $(document).ready(function () {
    $("form").submit(function () {
      var model = $(this).serialize();
      $.ajax({
        url: '@Url.Action("SearchResults", "Search")',
        data: model,
        cache: false,
        dataType: "html",
        success: function (response) {
          $("#placeholder").html(response);
        }
      });
      return false;
    })
  });
</script>

Loading partial view into div only works once

2 Answers2