MVC 5 JQuery Bootstrap Modal Using the Partial View

I'm trying to learn how to use ajax calls with a Bootstrap modal dialog displaying a partialview. I've created a simple MVC 5 application. I can edit a record from my parent view within the modal dialog ok i.e.

  1. Clicking on the edit button for Person1, calls the Edit (get) controller action and displays the modal with the details for Person1.
  2. If I change the age value and click Save it calls the Edit (post) controller action and updates the age for Person1.
  3. I can do the same for Person2.

    However if I try to edit the same record again i.e. Person1, it displays the modal dialog but it doesn't call the controller action from the ajax get and it displays the data for Person2 i.e the last record that I edited.

Am I doing something wrong? I've posted my code below.

Parent View (index.cshtml)

@using WebApplication1.Models;

@model List<PersonViewModel>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

    <table>
    @foreach (var item in Model)
    {
        <tr>
            <td id="[email protected]">
                @Html.Partial("ListItem", item)
            </td>
        </tr>
    }
</table>

<div class="modal" id="editor-container" tabindex="-1" role="dialog" aria-labelledby="editor-title">
    <div class="modal-dialog" role="document">
        <div class="modal-content" id="editor-content-container"></div>
    </div>
</div>

@section scripts
{
    <script type="text/javascript">
        $(function () {
            $('.editor-container').click(function () {
                var pid = $(this).attr('data-id');
                var url = "/Person/Edit/" + pid;
                $.get(url, function (data) {
                    $('#editor-container').modal('show');
                    $('#editor-content-container').html(data);
                });
            });

            $('#editor-container').on('hidden.bs.modal', function () {
                $(this).removeData('bs.modal');
            });
        });

        function success(data, status, xhr) {
            $('#editor-container').modal('hide');
        }

        function failure(xhr, status, error) {
            $('#editor-container').modal('show');
        }
</script>
}

Modal PartialView (Edit.cshtml)

@using WebApplication1.Models;

@model PersonViewModel

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title" id="editor-title">Edit Person</h4>
</div>

@using (Ajax.BeginForm("Edit", "Person", FormMethod.Post, new AjaxOptions
{
    InsertionMode = InsertionMode.Replace,
    HttpMethod = "POST",
    UpdateTargetId = "editor-success-" + @Model.id,
    OnSuccess = "success",
    OnFailure = "failure",
}))
{
    @Html.ValidationSummary()
    @Html.AntiForgeryToken()
    @Html.HiddenFor(model => model.id)
    <div class="modal-body">
        <div class="form-group">
            @Html.LabelFor(model => model.name)
            @Html.EditorFor(model => model.name)
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.age)
            @Html.EditorFor(model => model.age)
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="submit" class="btn btn-primary">Save</button>
    </div>
}

ListItem PartialView (ListItem.cshtml)

@using WebApplication1.Models;

@model PersonViewModel

@{
    var item = Model;
}

    <div class="row">
        <div class="col-md-5">@item.name</div>
        <div class="col-md-5">@item.age</div>
        <button type="button" class="btn editor-container" data-id="@item.id"
                data-toggle="modal" data-target="#editor-container">
            Edit
        </button>
    </div>

Controller (PersonController.cs)

public class PersonController : Controller
    {
        // GET: Person
        public ActionResult Index()
        {
            return View(GetPersons());
        }

        [HttpGet]
        public ActionResult Edit(int id)
        {
            PersonViewModel p = GetPersons().Find(m => m.id == id);

            return PartialView("Edit", p);
        }

        [HttpPost, ValidateAntiForgeryToken]
        public ActionResult Edit(PersonViewModel p)
        {
            if (TryValidateModel(p))
            {
                return PartialView("ListItem", p);
            }

            Response.StatusCode = 400;

            return PartialView("Edit", p);
        }

        private List<PersonViewModel> GetPersons()
        {
            List<PersonViewModel>  plist = new List<PersonViewModel>();

            PersonViewModel p = new PersonViewModel()
            {
                id = 1,
                name = "Person1",
                age = 33,
            };

            plist.Add(p);

            p = new PersonViewModel()
            {
                id = 2,
                name = "Person2",
                age = 30,
            };

            plist.Add(p);

            return plist;
        }
    }


the $.get has caching enabled by default, use the $.ajax instead. You can disable the cache on the call.

var url = "/Person/Edit/" + pid;
$.ajax({
  url: url,
  success: function(data){
     $('#editor-container').modal('show');
     $('#editor-content-container').html(data);
  },
  cache: false
});