我正在尝试学习如何使用带有显示部分视图的Bootstrap模式对话框的ajax调用 . 我创建了一个简单的MVC 5应用程序 . 我可以在模态对话框中编辑父视图中的记录，即
-
单击Person1的编辑按钮，调用Edit（get）控制器操作并显示包含Person1详细信息的模式 .
-
如果我更改年龄值并单击“保存”，则调用“编辑（后）”控制器操作并更新Person1的年龄 .
-
我可以为Person2做同样的事情 .
但是，如果我再次尝试编辑相同的记录，即Person1，它会显示模态对话框，但它不会从ajax get调用控制器操作，它会显示Person2的数据，即我编辑的最后一条记录 .
难道我做错了什么？我在下面发布了我的代码 .
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="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>
}
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">×</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;
}
}
2 回答
$ .get默认启用缓存，而是使用$ .ajax . 您可以在呼叫上禁用缓存 .
我已经解决了我遇到的问题 . 我相信这与将部分视图加载到模态对话框的按钮有关 . 它在AJAX帖子中进行了修改，因为它位于部分视图内部，也位于用作updatetargetid的td元素内部 . 我做了以下更改：
我从ListItem partialview中删除了该按钮并将其放入父视图（index.cshtml） .
我删除了父视图中td元素的id，并在我需要更新的字段周围添加了一个div元素 . 我给了它最初在td元素上使用的id . 这个div是用于AJAX帖子的updatetargetid中使用的 .
每次我点击一个人的编辑按钮时，现在在我的控制器中调用get动作，模态显示正确的人的详细信息 . 我在下面添加了更新的代码：
Parent view (index.cshtml)
ListItem partialview (ListItem.cshtml)