CODEWITHSUNDEEP
jqueryasp.net-mvc
NateReid
NateReid

Reputation: 206

MVC Partial View Model Not Refreshing

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.

Upvotes: 6

Views: 15489

Answers (3)

Henry
Henry

Reputation: 2187

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.

Upvotes: 0

jgauffin
jgauffin

Reputation: 101140

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);
}

Upvotes: 8

Darin Dimitrov
Darin Dimitrov

Reputation: 1038720

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.

Upvotes: 5

Related Questions