Partial MVC viewer is not refreshing

Question

I have a partial view that loads into modal jQuery 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 the records of various events. Each line of the table has a link to show detailed information about the event. 2) When a link to this table is clicked, a partial view is loaded into a modal view.

In some cases, this works great; in other cases, the model takes a very long time 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 loaded file. It does not refresh correctly.

Definition of modality on the main screen: Download, 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 greatly appreciated.

Answer 1

Use OutputCacheAttribute in 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 can be cached by some browsers. Try replacing the $.get AJAX call with $.ajax by setting cache: false or try the $.post request:

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

You also do not need to clear ModelState in your EventRegistrantSummary action, since you are not changing any values.

Answer 3

Another approach is to randomly add a random number to the query string, since you use the built-in MVC helpers.

For instance:

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

Or for the form:

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

Not always the best way to do something, but if you want to avoid tagging each of your methods (if you have everything you need to avoid cache problems) or using jQuery to process the view yourself, this works quickly.