如何解决模态弹出窗口打开部分视图
我在 index.cshtml 页面中有一个表格,我想单击 Notes 列中的链接来触发 AJax 调用以打开部分视图 editNotes.cshtml 并提交文本以更新控制器操作“UpdateNotes”。现在,当我单击“编辑”链接时,表单会变灰,并且不会显示弹出的对等视图。当我查看调试器窗口时,我可以看到数据 html 被传递到 $('#modalWrapper').html(data);请帮忙看看是什么问题。谢谢。 索引.cshtml
...
<td class="Notes">
@Html.displayFor(modelItem => item.Notes)
<a href="#" onclick="editNotes(@item.id)" class="btn btn-primary" data-toggle="modal" data-target="#modalWrapper">Edit</a></td>
...
//modal window
<div id="modalWrapper" class="modal">
</div>
//_UpdateNotes.cshtml
@model NameSpace.Models.myTableModel
@using (Html.BeginForm())
{
<div class="modal fade" id="editModal">
<div class="modal-dialog">
<div class="modal-content">
<div id='myModalContent'>
<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">Edit</h4>
</div>
<div class="modal-body">
<form>
<input type="text" id="Notes" value="@Model.Notes" />
<input type="submit" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
}
custom.js
function editNotes(id) {
$.ajax({
url: '/Admin/UpdateNotes/'+id,// The method name + paramater
success: function (data) {
$('#modalWrapper').html(data); // html (the partial view)
$('#editModal').modal();
}
});
}
管理控制器
[HttpGet] // this action result returns the partial containing the modal
public ActionResult UpdateNotes(int id)
{
var viewmodel = new myTableModel ();
viewmodel.id = id;
return PartialView("_UpdateNotes",viewmodel);
}
[HttpPost]
public ActionResult UpdateNotes(myTableModel model)
{
using (DbContextModel db = new DbContextModel())
{
if (ModelState.IsValid)
{
myTableModel C = db.myTableModel.Where(x => x.id == model.id).Single<myTableModel>();
C.Notes = model.Notes;
db.SaveChanges();
}
return View("Index");
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。