jquery - 使用PartialView的MVC 5 JQuery Bootstrap Modal

我正在尝试学习如何在显示PartialView的Bootstrap模态对话框中使用Ajax调用。我创建了一个简单的MVC 5应用程序。我可以在模式对话框中从父视图编辑记录，即


单击Person1的编辑按钮，调用Edit（获取）控制器动作，并显示模式和Person1的详细信息。
如果更改年龄值并单击“保存”，它将调用“编辑（发布）”控制器操作并更新Person1的年龄。
我可以为Person2做同样的事情。

但是，如果我尝试再次编辑同一条记录，即Person1，它将显示模式对话框，但不会从ajax get中调用控制器动作，而是显示Person2的数据，即我编辑的最后一条记录。


难道我做错了什么？我已经在下面发布了我的代码。

父视图（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>
}

模态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>

控制器（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;
        }
    }

最佳答案

$ .get默认情况下启用了缓存，请改用$ .ajax。您可以在通话中禁用缓存。

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

关于jquery - 使用PartialView的MVC 5 JQuery Bootstrap Modal，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36181562/