How do I pass data to modal view in ASP.NET MVC

Question

我在向模态视图传递数据时遇到问题。要么模态视图根本不打开，要么每次打开它时都从第一个项中读取数据。我遇到的最大问题是我不了解jQuery。我想要一个按钮来打开一个模态，该模态读取我的项的变量，在本例中为项。密码项目处于foreach循环中。

这就是我想要的代码外观。

<div class="row" style="padding: 0px 50px">
@foreach (var item in Model)
{
<div style="width: 200px; height:200px; border: 1px dotted #fff; text-align:center; display: inline-block">
<h4>@item.Name</h4>
<!-- Button to open modal view here for this specific item -->
</div>
}

我试了试，有没有局部的看法。这是我目前拥有的代码，它只打开一个模态窗口，但不显示任何其他内容。我知道问题出在id中，但我试图将所有id更改为唯一的id，这导致了更多的问题。

@foreach (var item in Model)
{
<div style="width: 200px; height:200px; border: 1px dotted #fff; text-align:center; display: inline-block">
<h4>@item.Name</h4>
</div>
<input class="btn btn-default" type="button" value="Details" id="@item.id" onclick="Details(this.id);" />

<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
@Html.Raw(item.Code);
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
}

<script>
function Details(id) {
$.get("@Url.Action("preview","Generator")/"+id, function (data) { $('.modal-body').html(data); });
$('#myModal').modal('show');
}
$('#myModal').on('hidden.bs.modal' , function (e) {
$('.modal-body').html("");
})
</script>

谢谢！

Answer 1

例如。这是你完成forLoop后的html

<div class="row" style="padding: 0px 50px">
<div style="width: 200px; height:200px; border: 1px dotted #fff; text-align:center; display: inline-block">
<h4>Item Name - 1</h4>
<button type="button" data-item="Item Name - 1" class="btn btn-default clsDetails">Details</button>
</div>
<div style="width: 200px; height:200px; border: 1px dotted #fff; text-align:center; display: inline-block">
<h4>Item Name - 2</h4>
<button type="button" data-item="Item Name - 2" class="btn btn-default clsDetails">Details</button>
</div>
<div style="width: 200px; height:200px; border: 1px dotted #fff; text-align:center; display: inline-block">
<h4>Item Name - 3</h4>
<button type="button" data-item="Item Name - 3" class="btn btn-default clsDetails">Details</button>
</div>
</div>

HTML模式

<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="dvData"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

脚本

$(document).ready(function(){
$(document).on("click",".clsDetails",OpenModalPopUp);   
});
function OpenModalPopUp(){
var itemName = $(this).data("item");
alert(itemName);
$('#dvData').html(itemName);
$("#myModal").modal();
}