jquery - 使用 PartialView 的 MVC 5 JQuery Bootstrap Modal

Question

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

1. 单击 Person1 的编辑按钮，调用编辑(获取) Controller 操作并显示包含 Person1 详细信息的模式。

2. 如果我更改年龄值并单击“保存”，它将调用编辑(发布) Controller 操作并更新 Person1 的年龄。

3. 我可以对 Person2 执行相同的操作。

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

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

父 View (index.cshtml)

@using WebApplication1.Models;

@model List<PersonViewModel>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

    <table>
    @foreach (var item in Model)
    {
        <tr>
            <td id="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f590919c819a87d886809696908686d8b59c819098db9c91" rel="noreferrer noopener nofollow">[email protected]</a>">
                @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>  

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

Answer 1

$.get 默认启用缓存，请改用 $.ajax。您可以在调用时禁用缓存。

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