Loading model in modal works only once

Question

I've got this annoying problem that i've been trying to fix for the last few nights. No luck so far though. I have a view with a modal and a partial view that is rendered into the modal. I fill the partialview with data based on a parameter I pass to my controller when clicking a button in a table. The first one goes nicely, button calls controller -> controller passes model to partialview -> the modal opens and the right data is in the fields.

When I click a button on another record, the modal is opened and the old data is displayed. The controller isn't being called again, so the data doesn't refresh. The thing is, it does work again for one more time if i refresh the page with shift + f5. So it seems to be a cache issue.

What i've tried so far - Disabling cache in my controller and methods - Calling javascript method to remove the data from my modal - Using other kind of modals

Code Index view

<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
    <div class="col-lg-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>List of registrations</h5>
                <div class="ibox-tools">
                    @Html.ActionLink("Create New", "Create", null, new { @class = "btn btn-primary btn-xs" })
                </div>
            </div>
            <div class="ibox-content">
                <table class="table table-striped" id="datatable">
                    <thead>
                        <tr>
                            <th>
                                @Html.DisplayNameFor(model => model.Date)
                            </th>

                            <th>
                                @Html.DisplayNameFor(model => model.Car.Kenteken)
                            </th>

                            <th>
                                @Html.DisplayNameFor(model => model.DepartureLocation)
                            </th>

                            <th>
                                @Html.DisplayNameFor(model => model.ArrivalLocation)
                            </th>

                            <th>
                                @Html.DisplayNameFor(model => model.Distance)
                            </th>
                            <th>
                                @Html.DisplayNameFor(model => model.Allowance)
                            </th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item in Model)
                        {
                            <tr>
                                <td>
                                    @Html.DisplayFor(modelItem => item.Date)
                                </td>

                                <td>
                                    @Html.DisplayFor(modelItem => item.Car.Kenteken)
                                </td>

                                <td>
                                    @Html.DisplayFor(modelItem => item.DepartureLocation)
                                </td>

                                <td>
                                    @Html.DisplayFor(modelItem => item.ArrivalLocation)
                                </td>

                                <td>
                                    @Html.DisplayFor(modelItem => item.Distance)
                                </td>

                                <td>
                                    @Html.DisplayFor(modelItem => item.Allowance)
                                </td>
                                <td>
                                    @Html.ActionLink("Edit", "Edit", new { id = item.CarId }, new { @class = "btn btn-white btn-sm" })
                                    @Html.ActionLink("Delete", "Delete", new { id = item.CarId }, new { @class = "btn btn-white btn-sm" })
                                    @Html.ActionLink("Copy", "CopyTripRegistrationModal", "TripRegistration", new { registrationId = item.RegistrationID }, new { @class = "img-btn-addnote modal-link btn btn-white btn-sm" })
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div id="modal-container" class="modal fade" tabindex="-1" role="dialog">
<a href="#close" title="Close" class="modal-close-btn">X</a>
<div class="modal-content">
    <div class="modal-body"></div>
</div>

Javascript

<script>
$(function () {
    $('body').on('click', '.modal-link', function (e) {
        e.preventDefault();
        $(this).attr('data-target', '#modal-container');
        $(this).attr('data-toggle', 'modal');
    });

    $('body').on('click', '.modal-close-btn', function () {
        $('#modal-container').modal('hide');
    });

    debugger;
    $("#modal-container").on("hidden.bs.modal", function () {
        $(".modal-body").removeData();
    });
});

Partial view

<div class="modal-body">
        @using (Html.BeginForm("Create", "TripRegistration"))
        {
            @Html.AntiForgeryToken()

            <div class="form-horizontal">

                @Html.ValidationSummary(true)
                @Html.HiddenFor(model => model.CarId)

                <div class="form-group">
                    @Html.LabelFor(model => model.Date, new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => Model.Date, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Date)
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.DepartureLocation, new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.DepartureLocation)
                        @Html.ValidationMessageFor(model => model.DepartureLocation)
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.DepartureZipcode, new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.DepartureZipcode)
                        @Html.ValidationMessageFor(model => model.DepartureZipcode)
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.ArrivalLocation, new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.ArrivalLocation)
                        @Html.ValidationMessageFor(model => model.ArrivalLocation)
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.ArrivalZipcode, new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.ArrivalZipcode)
                        @Html.ValidationMessageFor(model => model.ArrivalZipcode)
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.Distance, new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.Distance)
                        @Html.ValidationMessageFor(model => model.Distance)
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <button type="button" class="btn btn-white" id="cancel">Close</button>
                        <button type="submit" class="btn btn-primary">Copy registration</button>
                    </div>
                </div>
            </div>
        }
    </div>

Controller action

        [NoCache]
    public PartialViewResult CopyTripRegistrationModal(int registrationId)
    {
        var tripRegistration = _tripRegistrationService.getTripRegistrationById(registrationId);
        var tripRegistrationVM = AutoMapper.Mapper.Map<tblTripRegistration, TripRegistrationViewModel>(tripRegistration);
        return PartialView("_CopyTripRegistration", tripRegistrationVM);        
    }

And I have added "[OutputCache(Duration = 0)]" to the top of the controller.

I hope someone can help me out!

Answer 1

You can explicitly make the ajax call and set the response of that to as the modal body.

$(function () {

     $('body').on('click', '.modal-link', function (e) {
         e.preventDefault();

         $("#modal-container").remove();
         $.get($(this).attr("href"), function (data) {
                 $('<div id="modal-container" class="modal fade">
                        <div class="modal-content" id="modalbody">' 
                                               + data + '</div></div>').modal();
         });
    });
});

This will work with all your unique urls.