MVC Partial View Model Not Refreshing

Question

I have a partial view which is being loaded into an jQuery modal in asp.net MVC 3. The problem is that the view is not refreshing properly. Here is the order of events:

1) The main view has a table listing different events records. There is a link on each row of the table to show the event detail. 2) When the link on this table is clicked, the partial view is loaded in the modal.

This works fine in some cases, in other cases the model will take very long to load. After closing the partial view/modal and clicking on another link from the table on the main view, the partial view will load showing the data from the previous load. It is not refreshing correctly.

Definition of Modal on Main View: Loading, please wait...

<script type="text/javascript">
    $(document).ready(function () {
        $("#EventRegistrantSummary").dialog({
            bgiframe: true, autoOpen: false, height: 500, width: 980, resizable: false, modal: true
        });
    });
    function showEventRegistrantSummary(id) {
        $.get("/Event/EventRegistrantSummary/" + id, function (data) {
            $("#EventRegistrantSummary").html(data);
        });
        $("#EventRegistrantSummary").dialog('open'); return false;
    }
</script>

Controller:

    public PartialViewResult EventRegistrantSummary(Guid id)
    {
        ModelState.Clear();
        Event e = db.Events.Single(ev => ev.ID == id);
        return PartialView(e);
    }

Partial View:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<model.Event>" %>
<% using (Ajax.BeginForm("EditUpdate", new AjaxOptions { UpdateTargetId="Target", InsertionMode= InsertionMode.Replace}))
       {%>

       <h6 style="text-align:center">Registration Summary: <%= Model.Name %></h6>

       <div style="float:left;width:35%">
            <fieldset id="Overview">
                <legend>Overview</legend>
                <div class="editor-label">
                    Total Registrants: <%= Model.BoatEventRegistrations.Count() %>
                </div>
            </fieldset>
           </div>
    <% } %>

Any help is much appreciated.

Answer 1

Use the OutputCacheAttribute on your controller action to disable caching.

[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
public PartialViewResult EventRegistrantSummary(Guid id)
{
    ModelState.Clear();
    Event e = db.Events.Single(ev => ev.ID == id);
    return PartialView(e);
}

Answer 2

Sounds like a caching issue. GET requests could be cached by some browsers. Try replacing the $.get AJAX call by a $.ajax by setting cache: false or try a $.post request:

$.ajax({
    url: '<%= Url.Action("EventRegistrantSummary", "Event") %>',
    type: 'GET',
    cache: false,
    data: { id: id },
    success: function(data) {
        $('#EventRegistrantSummary').html(data);
    }
});

Also you don't need clearing the ModelState in your EventRegistrantSummary action as you are not modifying any of the values.

Answer 3

Another approach is to attatch a random number to the query string as you are using the in build MVC helpers.

For example:

@Ajax.ActionLink("LinkText", "Index", "Home", new { rnd = DateTime.Now.Ticks }, new AjaxOptions { UpdateTargetId = "main", OnSuccess = "pageloadSuccess" })

Or for a form:

using (Ajax.BeginForm("EditUpdate", new { rnd = DateTime.Now.Ticks }, new AjaxOptions { UpdateTargetId="Target", InsertionMode= InsertionMode.Replace}))

Not always the best way to do things but if you want to avoid tagging each of your methods (If you have alot that need to avoid cache problems) or using jQuery to handle the submission yourself this is a quick work around.