Question

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

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

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

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

父视图（index.cshtml）

@using WebApplication1.Models;

@model List<PersonViewModel>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

    <table>
    @foreach (var item in Model)
    {
        <tr>
            <td id="editor-success-@item.id">
                @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;
        }
    }

Answer 1

$ .get默认启用缓存，而是使用$ .ajax。您可以在通话时禁用缓存。

4*pi

Answer 2

我已经解决了我遇到的问题。我相信这与将部分视图加载到模态对话框的按钮有关。它在AJAX帖子中进行了修改，因为它位于部分视图内部，也位于用作updatetargetid的td元素内部。我做了以下更改：

我从ListItem partialview中删除了该按钮并将其放入父视图（index.cshtml）。
我删除了父视图中td元素上的id，并在我需要更新的字段周围添加了一个div元素。我给了它最初在td元素上使用的id。这个div是用于AJAX帖子的updatetargetid中使用的。

每次我点击一个人的编辑按钮时，现在在我的控制器中调用get动作，模态显示正确的人的详细信息。我已在下面添加了更新的代码：

父视图（index.cshtml）

@using WebApplication1.Models;

@model List<PersonViewModel>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<div class="container">
    <table>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    <div class="row">
                        <div id="editor-success-@item.id">
                            @Html.Partial("ListItem", item)
                        </div>
                        <div class="col-md-4">
                            <button type="button" class="btn editor-container" data-id="@item.id"
                                    data-toggle="modal" data-target="#editor-container">
                                Edit
                            </button>
                        </div>
                    </div>
                </td>
            </tr>
        }
    </table>
</div>

<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;
                $.ajax({
                    url: url,
                    cache: false,
                    success: function (data) {
                        $('#editor-content-container').html(data);
                        $('#editor-container').modal('show');
                    }
                });
            });

            $('#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>
}

ListItem partialview（ListItem.cshtml）

@using WebApplication1.Models;

@model PersonViewModel

@{
    var item = Model;
}

<div class="col-md-4">@item.name</div>
<div class="col-md-4">@item.age</div>

使用PartialView的MVC 5 JQuery Bootstrap模式

2 个答案: