现在我有一个弹出模式框,其中包含我模型中的一些细节。当用户单击列表项时,它会弹出。 我做了什么我已经将Modal添加到foreach循环中,我知道这不是最好的方法。它可以工作,但它会为每个列表项创建一个模态...
有没有办法让模态在foreach循环之外,只是在click事件中填充内容?
这是我的模态:和foreach循环
@foreach (var item in Model.Where(p => p.CurrentStatus == "Start" && p.member == "budyn"))
{
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">@item.JobID</h4>
</div>
<div class="modal-body">
<p>@item.JobTitle</p>
<!-- etc... -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<li class="list-group-item"> <a data-toggle="modal" data-target="#myModal">@item.JobID @item.JobTitle </a> </li>
}
答案 0 :(得分:0)
在这里你可以继续。
您的行列表
@foreach (var list in Model)
{
//You can put other rows data like data-id and get them on popup open
<button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#myModal" data-id="@list.PrimaryKey">Click</button>
}
你的模态在循环之外
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Details</h4>
</div>
<div class="modal-body">
<input id="primaryKeyValue">
</div>
<div class="modal-footer">
<form asp-controller="Billing" asp-action="Delete" method="post" class="form-inline" role="form">
<input type="hidden" id="id">
<button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-trash" style="vertical-align:middle;margin-top: -5px"></span> Delete</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</form>
</div>
</div>
</div>
</div>
在模态打开
$(document).ready(function () {
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);//Button which is clicked
var clickedButtonId= button.data('id');
$("input #primaryKeyValue").val(clickedButtonId);
// If there are many values you want to show or want to make ajax call, you can do it here, and then setthem inside modal(popup)
});
有关引导事件的详细信息,请参阅https://getbootstrap.com/javascript/#modals-related-target