how to prevent IE from caching get ajax request results

Question

i have the following inside my asp.net mvc view:-

 <div class=" b" >Show   @Html.DropDownList("type", new SelectList(ViewBag.type, "Value", "Text", "" ), new { @id= "typeOptions",@class="SmallDropDown3"}) Requestors.
                        <img src="~/Content/sortloading.gif" class="loadingimage" id="progressSort3" /></div>  

@Html.Partial("_GetRequestors", Model)
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
<script>
        $("body").on('change', '#typeOptions', function () {


            $('#progressSort3').show();

            $.ajax({
                type: "Get",
                url: '@Url.Action("GetRequestors","Customer")',

                data: { id: "@ViewBag.AccountID", page: "1", type: $("#typeOptions").val() },

                success: function (html) {
                    $('#RequestorTable').html(html);
                    $('#progressSort3').hide(); //This could also be dialog("open") depending on the version of jquery ui.

                }
            });
        });
    </script>

Which mainly display a dropdownlsit which will initiate an Ajax call when the list items changed. Here is the action method that will be called:-

 public ActionResult GetRequestors (int id = 0,int page=1,string type="")
        {
            int pagesize;
            ViewBag.type = ViewBag.PagedSizeOptions = new PageOptions().RequestorTypeOptions;
            bool succeed = int.TryParse(System.Web.Configuration.WebConfigurationManager.AppSettings["TechPageSize"], out pagesize);
           var aUser = repository.populateRequestorDetials2(id,type).OrderBy(a=>a.FIRST_NAME).ToPagedList(page, pagesize);

           ViewBag.AccountID = id;
           ViewBag.currenttype = type;
           if (Request.IsAjaxRequest())
           {

               return PartialView("_GetRequestors", aUser);
           }
           return View(aUser);
  }

currently seems that IE will cache the result for a long time, and when changing the dropdpwnlist IE will always show the cached result for the same dropdown item, even doing a hard refresh (ctrl-f5) will not delete the cached result... So i have mainly these two questions :-

1. for how long IE will keeps the cached data ?

2. I know that i can add cache:false as an ajax parameter . but the question is what the default behavior if i do not specify any cache setting in my Ajax call for IE. as in chrome and firefox no cache problem will be faced?

can anyone advice on these issues?

Thanks.

Answer 1

1. The cache duration is specified by your server settings, not IE.

2. All browsers should cache the same way, but no guarantees.

Razor caching should be solved server-side as you have a lot more options and flexibility over what causes a request to cache or not (e.g. based on parameters changing).

The simplest option to stop caching is to add the following on a Partial View action:

[OutputCache(Duration = 1)]
public ActionResult GetRequestors (int id = 0,int page=1,string type="")

This sets the cache to 1 second. 0 is not a valid option for partial views.

Note: I am assuming you code returns a partial view. The options are different (simpler) for a full page view

Answer 2

You can use ajaxSetup to prevent caching.

Example

$.ajaxSetup({ cache: false });

Or if you just wanted it for that request you could:

$.ajax({
        type: "Get",
        cache: false,
        url: '@Url.Action("GetRequestors","Customer")',
        data: { id: "@ViewBag.AccountID", page: "1", type: $("#typeOptions").val() },
        success: function (html) {
            $('#RequestorTable').html(html);
            $('#progressSort3').hide(); //This could also be dialog("open") depending on the version of jquery ui.

        }
    });

Answer 3

Add "?" + (new Date()).getTime() to the end of your URL.

i.e.:

$.ajax({
            type: "Get",
            url: '@Url.Action("GetRequestors","Customer")' + "?" + (new Date()).getTime(),

            data: { id: "@ViewBag.AccountID", page: "1", type: $("#typeOptions").val() },

            success: function (html) {
                $('#RequestorTable').html(html);
                $('#progressSort3').hide(); //This could also be dialog("open") depending on the version of jquery ui.

            }
        });