Question

With ASP.NET MVC3 (Razor) I have a simple page that loads a jQuery UI dialog.

@{
    ViewBag.Title = "Home Page";
}
<h2>yo</h2>
<div id="fileUpload">
</div>
<button id="button2">
    Upload file
</button>
<script type="text/javascript">
    $(document).ready(function () {
        $('#button2').click(function () {
            $fileUpload = $('#fileUpload');
            $fileUpload.dialog({
                minWidth: 500,
                minHeight: 100,
                title: 'Upload File(s)',
                autoOpen: true,
                buttons: {
                    'Upload': function () {
                        $('form').submit();
                    },
                    'Cancel': function () {
                        $(this).dialog('close');
                    }
                },
                open: function (event, ui) {
                    $(this).load('@Url.Action(MVC.FileUpload.FileUpload())');
                },
                close: function (event, ui) {
                    $(this).dialog('destroy');
                    //$(this).remove();
                },
                dialogClass: 'no-close',
                closeText: '',
                modal: true
            });
        });
    });
</script>

Notice on open() the form makes a call to a controller method. It returns a PartialView and looks like this…

public virtual ActionResult FileUpload() { return new
PartialViewResult(); }

The problem I am having is IE is caching the call to the partial view. If I update the partial view then it does not load until I clear the browser cache.

I have tried the ‘destroy’ method on close() as well as .remove(). Neither have an effect. I have also confirmed open() is called each time #button2 is clicked.

Any ideas on how to keep the dialog contents from getting cached?

Answer 1

You can add this to your global js code to prevent IE from ever caching ajax request:

$.ajaxSetup({ cache: false });