ASP.NET MVC with Ajax calls to controller actions

Recently I was trouble shooting an ASP.NET MVC project which relies on some Ajax calls to controller
actions. The project has a view in which there are a couple of drop down lists which trigger an
action result as soon as an item is selected in each list.

The view has a drop down list defined as follows:

1

2

@Html.DropDownList("searchTemplate",

new SelectList(Model.DefaultSearchTemplates, "SearchFilterTemplateId", "Name"), "Choose")

And a change event triggers the action result:

1

2

3

4

5

6

7

8

9

10

$("select#searchTemplate").change(function () {

   var selectedTemplate = $("select#searchTemplate").val();

   if (selectedTemplate) {

   $.ajax({

       url: '@Url.Action("ApplySearchTemplate","Quote")',

       data: { templateId: selectedTemplate }

   });

   }

});

The functionality of the Action isn’t important for this post, but it essentially saves a users
last search criteria so that the next time they log in, they will see the same results.

The problem with the application was that the selection of a search template only worked once. And
on further inspection, it turned out that the controller action was not being called at all after
the first time.

This was an interesting problem because the change event was certainly being called every time that
an item was selected in the list. My initial thought was that there must be some bug in ajax itself,
but it did seem fairly unlikely that such a bug would have gone un-noticed.

As expected, after digging through the ajax source, the problem became apparant; user error. Ajax
caches requests by default and even though these particular calls are not returning values nor
expecting results; the requests are still cached.

Since the requests were cached, each subsequent selection in the dropdown list resulted in ajax
“ignoring” the request since it “already knew the results”.

Once I understood what was happening, it was just a matter of disabling ajax caching for the view.
There are two ways to disable the cache; the first is to disable it individually for each request:

1

2

3

4

5

6

7

8

9

10

11

$("select#searchTemplate").change(function () {

   var selectedTemplate = $("select#searchTemplate").val();

   if (selectedTemplate) {

   $.ajax({

       url: '@Url.Action("ApplySearchTemplate","Quote")',

       data: { templateId: selectedTemplate },

       cache: false

   });

   }

});

The second option is to globally disable ajax caching using ajaxSetup:

1

$.ajaxSetup({ cache: false });

Since this particular view has multiple similar calls to controller actions, setting it globally was
the solution that was chosen.

‍