[Solved] Weird Caching Issue on Grid?

[Forest]

Hi all,

I'm having what appears to be a cache issue...

Consider the following partial view which contains my Grid declaration:

@model IEnumerable<CraftTraxNG.Model.ViewModels.VisitViewModel>

@(Html.Telerik().Grid(Model)
    .Name("Visits")
        .Columns
            (columns =>
            {
                columns.Bound(o => o.FormattedWhen).Width(200).Filterable(false).Title("Visit Date");
                columns.Bound(o => o.Description).Width(200).Filterable(true).Title("Notes");
                columns.Bound(o => o.PersonnelOfficeDisplay).Width(150).Filterable(false).Title("Office");
                columns.Bound(o => o.RecruiterFullName).Width(100).Filterable(false).Title("Recruiter");
                columns.Bound(o => o.VisitType).Width(50).Filterable(true).Title("Walk-in/Call-in");
            })

    .DataBinding(dataBinding =>
    {
        dataBinding.Server().Select("_Visits", "Visitor").Enabled(true);
        dataBinding.Ajax().Select("_ClientLook", "Visitor").Enabled(true);
    })

    .NoRecordsTemplate("No records found")
    .Scrollable(scrolling => scrolling.Enabled(false))
    .Sortable(sorting => sorting.Enabled(true))
    .Pageable(paging => paging.Enabled(true).PageSize(5))
    .Filterable(filtering => filtering.Enabled(true))
    .Groupable(grouping => grouping.Enabled(false))
    .Footer(true)
    .HtmlAttributes(new { style = "width:700px;" })
)

And here is the snippet from the controller that interacts with this grid:

public PartialViewResult _Visits()
{
   return PartialView("_Visits", (List<VisitViewModel>)Session["Visits"]);
}

[GridAction]
public ActionResult _ClientLook()
{
    return View(new GridModel((List<VisitViewModel>)Session["Visits"]));
}

//
// GET: /Visitor/Edit/5
[HttpGet]
public ActionResult Edit(int id)
{
    VisitorSearchResponse response =
        service.FindVisitorsBy(new VisitorSearchRequest() { Id = id });

    if (response.Success)
    {
        ViewData["VisitorDetails"] = response.VisitorDetails;
        Session["Visits"]          = response.VisitorDetails.Visits.OrderByDescending(visit => visit.When).ToList();
        return View(response.VisitorDetails);
    }
}

Finally, here is the view that loads the Grid via jQuery:

@model CraftTraxNG.Model.ViewModels.VisitorDetailViewModel

@using (Ajax.BeginForm("Edit",
                       new AjaxOptions
                       {
                           HttpMethod = "Post",
                           OnFailure  = "PostFailure",
                           OnSuccess  = "PostSuccess"
                       }))
{
  // Form stuff...ommitted as the grid is outside the Form and is unrelated to this issue.
}
<div id="visitGrid"></div>

@section scripts
{
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.maskedinput-1.3.js")" type="text/javascript"></script>

    <script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/2011.1.315/telerik.common.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/2011.1.315/telerik.grid.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/2011.1.315/telerik.grid.filtering.min.js")"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            loadPartialView();
        });

        function loadPartialView() {
            $('#visitGrid').load('@Url.Action("_Visits", "Visitor")');
        }

        function PostFailure() {
              // Omitted
        }

        function PostComplete() {
              // Omitted
        }

        function PostSuccess(context) {
             // Omitted
         }
    </script>
}

How this works is there is a search page with a Grid of people.  When you select one it goes to this Edit page.  On the first load everything is great.  However, when I go back to my search page, do another search and select an entirely different person, it goes to his edit page but the visit grid is cached/stale.  As soon as I hit the refresh button on the grid or move to the next page, the right data loads up.

I debugged this as best I could and noticed that the second time through it does in fact enter the loadPartialView JavaScript function, but the controller action _Visits does not fire this time.  It fires the first time.

So my question is if I'm doing something silly here and if I'm not, can someone tell me how to just refresh the grid in the JavaScript method itself so it can get the appropriate data?

Thanks in advance,

Forest

[Forest]

Just an fyi:

I have this problem is I use a hyper link as well which just executes the loadPartialView() method via it's onclick event.

Thanks in advance.

Forest 

[Atanas Korchev]

Hello Forest,

 Could it be a JavaScript error? Also I would recommend registering the grid JavaScript files via the ScriptRegistrar. Check this help topic for more info.

Greetings,
Atanas Korchev
the Telerik team

[Forest]

I'm not sure.  if it is a JavaScript issue Firebug and the IE web developer tools are not picking it up.

Ironically, I've just tested this on my staging server and the issue seems exclusive to Internet Explorer (7, 8 and 9).  I cannot reproduce the error in Firefox 5 or Chrome.

I'll try using the script registrar to see if that changes. 

Thank you for the suggestion.

[Forest]

Resolved:

To my discovery, Internet Explorer is particularly bad about caching ajax requests...

So the solution was to decorate the server side action that loads the partial view with:

[OutputCache(Duration=0)] 

[madmike210]

Thanks Forest!  I have been banging my head against the wall for 5 hours trying to figure this out.