我有一个Bootstrap modal,可以从不同的超链接启动,每个超链接提供另一个ID。
但我想要的是每次启动模态时,都会填充传递给模态的ID的数据。这是(简化)代码(请参阅代码中的注释以获得解释):
@model ViewModels.BookcaseItem.EditBookcaseItemViewModel
<div class="modal hide modal-large" id="editBookDialog">
@using (Html.BeginForm("Edit", "Bookcase", FormMethod.Post, new { @class = "form-horizontal" }))
{
<!-- this is where the ID will be passed to -->
@Html.HiddenFor(x => x.Id)
<div class="modal-body">
<!-- there's actually a couple of editors and labels here, but that doesn't really matter -->
@Html.EditorFor(x => x.Bla)
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a>
<input type="submit" value="Save" class="btn btn-primary" />
</div>
}
</div>
以下是用于启动模态并将ID传递给它的超链接之一:
<a href="#editBookDialog" data-toggle="modal" data-id="@bookcaseItem.Id" title="Edit this item" class="open-EditBookDialog"></a>
最后但并非最不重要的是实际传递ID的JQuery部分:
$(document).on("click", ".open-EditBookDialog", function () {
var myBookcaseItemId = $(this).data('id');
$(".modal #Id").val(myBookcaseItemId);
$('#editBookDialog').modal('show');
});
让我们假设有一个带有签名ActionResult Edit(字符串id)的方法,该方法将数据返回到放置模态的PartialView。
模态已经嵌入到包含所有超链接的页面中,默认情况下它不可见。
我根本无法弄清楚如何使用基于传递的ID的不同数据填充它。
答案 0 :(得分:2)
您可以使用AJAX通过执行控制器操作从服务器加载新数据:
$(function() {
$(document).on('click', '.open-EditBookDialog', function () {
var myBookcaseItemId = $(this).data('id');
// send an AJAX request to fetch the data
$.get(this.href, { id: myBookcaseItemId }, function(data) {
$('#editBookDialog').html(data).modal('show');
});
return false;
});
});
现在显然你应该修改应该打开对话框的锚点,以便它的href指向编辑控制器动作:
@Html.ActionLink(
"Some text",
"Edit",
null,
new {
data_toggle = "modal",
data_id = bookcaseItem.Id,
title = "Edit this item",
@class = "open-EditBookDialog"
}
)