What could cause an MVC app to not display current information in IE after it's pulled from the DB?

Question

Bottom Line Up Front: MVC fields update on Firefox/Chrome but not IE (unless I do a specific sequence).

I have an ASP.NET MVC 5 application which displays information about events. If you click on a given list item, the main section of the page will display all the relevant information about the event. From here, you can edit information and save changes to the database.

This works across Firefox, Chrome and IE 11. When the user clicks to a different event and returns back to the original event, you would expect the most recent data to get pulled from the DB and filled into the main section. On Firefox/Chrome, this happens. On IE 11 this only happens if you:

1. Debug it in VS
2. Run in IE 11 and right click on something and “Inspect Element”
3. Go to the Debugger tab
4. Let it use VS for debugging
5. Set a break point in VS

OR

1. Exit current IE 11 instance
2. Reload IE 11
3. Click on the original event entry again

I’ve tried setting the cache to force-update every time the page loads. Below is the code for the get event method:

[Authorize(Roles = "Community Admin, Global Admin")]
public JsonResult GetEvent(int? EventId)
{
    EventContext context = new EventContext();
    Event events = context.Events.Where(a => a.EventId == EventId && a.Active == true).SingleOrDefault();

    if (events == null)
    {
        events = new Event();
        events.CommunityId = this.GetUserProfile().CommunityId;
    }

    JsonResult json = new JsonResult();
    json.Data = events;
    json.JsonRequestBehavior = JsonRequestBehavior.AllowGet;

    return json;
}

Here’s the javascript that handles the GetEvent method:

var url = '@Url.Action("GetEvent", "Event")';
$.getJSON(url, { EventId: eventid },
    function (data) {
        $("#hdnEventId").val(data.EventId);
        $("#txtEventName").val(data.EventName);
        $("#txtEventDescription").val(data.Description);
        $("#txtAddress1").val(data.Address1);
        $("#txtAddress2").val(data.Address2);
        $("#txtCity").val(data.City);
        $("#StateSelector").val(data.State);
        $("#txtZipCode").val(data.Zip);
        $("#txtWebsite").val(data.WebsiteURL);
        $("#txtPhone").val(data.Phone);
        $("#txtEmail").val(data.Email);
        if (data.Active == "1")
            $("#cbxActive").prop('checked', true);
        else
            $("#cbxActive").prop('checked', false);
    });

This makes me think that the getEvent() method doesn’t execute except… it does. Could there be some sort of disconnect between the controller method and the javascript? I would be surprised at this since it works fine on other browsers.

Can I provide anything else to help you understand the problem?

Answer 1

Looks like $.getJSON is somehow caching the data. Try disabling that.

How to set cache false for getJSON in JQuery?

$(document).ready(function() { $.ajaxSetup({ cache: false }); });