I have a table from my view and it loads data from my Mysql db and once you click the button update in the table it will have a pop-up which supposedly load the details from my table and my problem is it is not getting the correct value, every time that I will clicked any on my row table it will have the same value.
Here is my View:
<table border="1">
<thead>
<tr>
<th>OP</th>
<th>OP Desc</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>@item.op</td>
<td>@item.op_desc</td>
<td>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">Update</button>
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle"><b>Update selected values:</b></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<dl class="dl-horizontal">
<dt>
OP:
</dt>
<dd>
@item.op
</dd>
<dt>
OP Desc:
</dt>
<dd>
@item.op_desc
</dl>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
so rather than displaying on my current tab I decided to pass it to modal to make it as pop-up
The problem is all of your buttons are pointing to the same modal:
data-target="#exampleModalCenter"
and all of your modals have the same id (which is not a valid HTML):
id="exampleModalCenter"
To fix the problem, you need to give each modal a unique id, something like this:
@foreach (var item in Model)
{
<button data-toggle="modal" data-target="#@Model.UseSomeUniqueProperty" // other attributes...
<div id="@Model.UseSomeUniqueProperty" class="modal fade" // other attributes
// rest of your code...
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.