Getting a particular ID from a web-grid for a modal - html

Question

I want a model to open when I click on a button in a web-grid. I have created a button which targets a modal by its ID. For each item in the model(a list), I want to create a modal with the id of the item. Below is my code:
<div id="divCurrentRented">
#{
WebGrid obj = new WebGrid(Model, rowsPerPage: 5);
}
#obj.Table(htmlAttributes: new
{
id="tableCurrentRented",
#class = "table"
},
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
alternatingRowStyle: "webgrid-alternating-row",
rowStyle: "webgrid-row-style",
columns: obj.Columns(
obj.Column("Title", header: "Title"),
obj.Column("Author", header: "Author"),
obj.Column("Avaible", header: "Available", canSort:false),
obj.Column(header: "Rent", format:#<button type="button" class="btn btn-default" data-toggle="modal" data-target="##item.BookID">Yes</button>)
))
As you can see the data target of the button is equal to the id of the item.
my modal code as below:
<div class="modal fade" id="#Model.First().BookID" ( 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">Return confirmation</h4>
</div>
<div class="modal-body">
<p class="modalBody">Are you sure you want to return this book?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
As you can see in the first line, I am fetching the bookID of the first item. What I need is to fetch the id for each item of the list so that each button click would open its corresponding modal. Any idea how to do that?

Answer 1

To pass information from page to modal while staying to same page, you can do with bootstrap modal event listener show or shown and pass the data attributes value to modal
e.g to pass id and title to modal as data attributes inside modal trigger button.
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal" data-id="123" data-title="I'm First Modal Title">Open Modal</button>
and use event property relatedTarget to get the data-attribute value e.g id inside modal event listener
var id = $(e.relatedTarget).data('id');
and pass it to modal e.g to <div class="modal-body"></div>
$(".modal-body").html(id);
example with id and title as data attributes passing to modal
$('#myModal').on('show.bs.modal', function (e) {
var id = $(e.relatedTarget).data('id');
var title = $(e.relatedTarget).data('title');
//pass date-title to modal header
$(".modal-title").html(title);
//Pass Id to modal body or any element in modal
$(".modal-body").html(id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal" data-id="123" data-title="I'm First Modal Title">Open Modal</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal" data-id="456" data-title="I'm Second Modal Title">Open Modal</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" aria-label="Close"> <span aria-hidden="true">×</span></button>
<h4 class="modal-title" aria-labellbyid="writeLabel"></h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer" id="edit-footer">
<input type="submit" data-dismiss="modal" class="btn btn-success" value="Submit">
</div>
</div>
</div>
</div>
Fiddle