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!
Check my code i hope you are understanding with my code.
Eg. This is the your html after the complete the forLoop
<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 Modal
<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">
<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>
Scripts
$(document).ready(function(){
$(document).on("click",".clsDetails",OpenModalPopUp);
});
function OpenModalPopUp(){
var itemName = $(this).data("item");
alert(itemName);
$('#dvData').html(itemName);
$("#myModal").modal();
}
This is perfectly working for me if you have some problem with code the please ask me i will help you.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.