I am having problems passing data to modal view. Either modal view doesn't open at all or reads data from first item every time I open it. The biggest problem I have is that I don't know jQuery. I want a button to open a modal that reads a variable of my item in this case item.Code. Items are in a foreach loop.
This is how i want my code to look.
<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>
}
I tried it with and without a partial view. This is the code I currently have which just opens a modal window but doesn't show anything else. I know the problem is in id's, but I tried to change all id's to unique ones which caused even more problems.
@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">×</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>
Thank you!