我有一个替代方案，类似但足够不同，我认为值得分享 - 我想使用不显眼的 jquery 仅通过属性标记来实现相同的目标，所以我为模态和它的脚本定义了一个单独的局部视图，并将其包含在我的布局页面中，以便在每个其他视图中我需要做的就是添加标记以使用我在该部分脚本中构建的模式和功能。我向模态添加了功能，以允许我指定在模态提交成功时调用的脚本等。从服务器检索对话框内容（通过调用返回部分视图的控制器方法 - 因此需要禁用ajax缓存）。下面是一个列表之外的示例，它在完成时调用 javascript RefreshAll：
<button class="btn btn-sm btn-success completeFixtureButton"
data-submittext="Update"
data-modalsubmit="CompleteFixtureForm"
data-modaltitle="Fixture Completed"
data-modalsuccess="RefreshAll();"
data-modalload="@Url.Action("FixtureCompleted", new { fixtureId = fix.Id })">
这是一个类似的示例，但来自一个按钮而不是按钮样式的链接：
<a class="btn btn-default" href="#"
data-modalsubmit="editLeagueForm"
data-modaltitle="Edit Season"
data-modalsize="lg"
data-modalload="@Url.Action("EditLeaguePartial", "League", new { leagueId = Model.Season.League.Id, seasonId = Model.Season.Id })"><span class="glyphicon glyphicon-white glyphicon-cog"></span>Season Settings</a>
这是列表/表格中的一个：
<tbody id="clubList">
@foreach (Player p in Model.Club.Players.OrderBy(p => p.LastName))
{
bool playerManager = Model.Club.Managers.Any(m => m.Id == p.Id);
<tr>
<td>
<a href='#' data-modaltitle="@p.FullName" data-modalload="@Url.Action("ContactPlayerPartial", "Player", new { playerId = p.Id })">
<img src="@Url.Action("ProfilePictureById", "Player", new { playerId = p.Id })" style="max-width:3em; margin-right:10px;" class="pull-left" /> @p.FullName
</a>
</td>
</tr>
...
}
这是共享视图文件夹中的模态部分 (_ModalDialogPartial.cshtml)：
<div id="details" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 id="detailsHeader"></h2>
</div>
<div class="modal-body">
<div id="detailsBody" ></div>
</div>
<div class="modal-footer">
<a href="#" id="btnModalCancel" class="btn" data-dismiss="modal">Close</a>
<input type="submit" id="btnModalSave" class="btn btn-primary" value="Save"/>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$.ajaxSetup({ cache: false });
initialiseModals();
});
function initialiseModals() {
$('#details').on('shown.bs.modal', function () {
$.validator.unobtrusive.parse($('#details'));
});
$(document).on('click', '*[data-modalload]', function () {
var e = $(this);
if (e.data('submittext') != undefined) {
$('#btnModalSave').html(e.data('submittext'));
} else $('#btnModalSave').html('Save');
if (e.data('class') != undefined) {
var cls = e.data('class');
$('#details').removeClass(cls).addClass(cls);
}
if(e.data('modalsize') != undefined) {
var size = e.data('modalsize');
$('.modal-dialog').addClass('modal-' + size);
}
if (e.data('modalsubmit') == undefined) {
$('#btnModalSave').hide();
$('#btnModalCancel').addClass("btn-primary");
}
else {
$('#btnModalSave').show();
$('#btnModalCancel').removeClass("btn-primary");
$('#btnModalSave').unbind('click').click(function (ctrl) {
$('#btnModalSave').attr('disabled', 'disabled');
ctrl.preventDefault();
var submitUrl = $('#' + e.data('modalsubmit')).attr("action");
var formData = $('#' + e.data('modalsubmit')).serialize();
$.post(submitUrl,
formData,
function (data, status, xhr) {
$('#btnModalSave').removeAttr('disabled');
$('#details').modal('hide');
if (e.data('modalsuccess') != undefined) {
eval(e.data('modalsuccess'));
}
}).error(function () {
$('#btnModalSave').prop('disabled', false);
});
});
}
$('#detailsBody').load(e.data('modalload'), function () {
$('#detailsHeader').html(e.data('modaltitle'));
$('#details').modal('show');
$.validator.unobtrusive.parse($('#detailsBody'));
});
});
}
</script>