我有一个小问题,我无法获得一个模态来从HTML表中读取数据并将其输入到Bootstrap 4模态中。我尝试了多种方法,如下面的代码片段所示。
这只是我的学习,因为我需要能够使用ASP.Net做到这一点,并从数据库中填充一个表,然后将数据传递到Modal中,但首先需要获得基本的Modal工作。有人可以帮忙弄清楚为什么它不起作用。
HTML:
@{
ViewData["Title"] = "PlayTest";
}
@model ViewModel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="~/css/site.css" type="text/css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" id="bootstrap-css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>@ViewData["Title"]</h1>
<br />
<br />
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="name">John</td>
<td class="age">45</td>
<td>Male</td>
<td><button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal" data-name="John">View</button></td>
</tr>
<tr>
<td class="name">Samantha</td>
<td class="age">32</td>
<td>Female</td>
<td><button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">View</button></td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Name</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p class="ageMessage">Age</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
JS:
<script type="text/javascript">
$(document).ready(function () {
$('#myModal').on('show.bs.modal', function (e) {
var button = $(e.relatedTarget);
var _name = button.data('name');
var row = button.parents('tr');
//var name = row.find('.name').text();
var age = row.find('.age').text();
$(this).find('.modal-title').val(_name);
//$(this).find('.modal-title').val(name);
$(this).find('.ageMessage').val('Your age is: ' + age + '!');
})
})
</script>
它仍然打开一个模态,除了硬编码的“名称”和“年龄”以外,什么都没有显示,没有我期望看到的表中的值。
[我注意到您的JavaScript使用myModel
作为ID,但是您的模式的ID为myModal
。
由于事件侦听器未侦听您的模态,因此不会调用您的JQuery函数。
代替$('#myModel')
使用此-> $('#myModal')
?