jquery - Asp Core Bootstrap 崩溃在动态列表中不起作用
问题描述
我似乎被我认为很简单的事情绊倒了。
我有一个在 .net Core MVC 应用程序中动态生成的 120 个项目的列表，在我的视图中我有以下代码
<table class="table">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.CreatedBy)
</th>
<th>
@Html.DisplayNameFor(model => model.CreatedOn)
</th>
<th>
@Html.DisplayNameFor(model => model.Notes)
</th>
<th>
@Html.DisplayNameFor(model => model.Application)
</th>
<th>
@Html.DisplayNameFor(model => model.Domain)
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.CreatedBy)
</td>
<td>
@Html.DisplayFor(modelItem => item.CreatedOn)
</td>
<td>
<button class="btn btn-outline-info" type="button" data-toggle="collapse" data-target="#d-@item.ObjID" aria-expanded="false" aria-controls="#d-@item.ObjID">
Notes
</button>
<div id="d-@item.ObjID" class="collapse">
<div class="card card-body">
@Html.Raw(item.Notes)
</div>
</div>
</td>
<td>
@Html.DisplayFor(modelItem => item.Application.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Domain.Name)
</td>
<td>
<a asp-action="Details" class="btn btn-outline-primary" asp-route-id="@item.ObjID">Details</a>
<a asp-action="Edit" class="btn btn-outline-primary" asp-route-id="@item.ObjID">Edit</a>
<a asp-action="Delete" class="btn btn-outline-dark" asp-route-id="@item.ObjID">Delete</a>
</td>
</tr>
}
</tbody>
</table>
按钮单击不会按预期展开或折叠 - 调试中没有任何内容，呈现的 HTML 看起来很好。
JQuery 和 Bootstrap 在其他地方运行良好。
有什么想法吗？
*** 更新 ***
我已按照建议更改了代码，但仍然无法正常工作。
如果有帮助，我在下面添加了生成的 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<script src="/lib/jquery/dist/jquery.min.js"></script>
<script src="/js/site.js?v=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0"></script>
<link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/site.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container-fluid">
<a class="navbar-brand" href="/Home"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" href="/Home">About</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div id="Message" class="container-fluid">
<div class="row">
</div>
</div>
<div class="container-fluid">
<main role="main" class="pb-3">
<h1 class="display-4">Use Cases</h1>
<p>
<a class="btn btn-outline-primary" href="/UseCases/Create">Create New</a>
</p>
<form method="get" action="/UseCases">
<div class="form-group row">
<div class="col-sm-2">
<input type="text" placeholder="Search ..." class="form-control" name="search" value="test" />
</div>
<div class="pl-3">
<input type="submit" class="form-control btn btn-outline-primary" value="Search" />
</div>
<div class="pl-2">
<a class="form-control btn btn-outline-primary" href="/UseCases">Back to Full List</a>
</div>
</div>
</form>
<table class="table">
<thead>
<tr>
<th>
Use Case Name
</th>
<th>
Created By
</th>
<th>
Created On
</th>
<th>
Notes
</th>
<th>
Application
</th>
<th>
Domain
</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
rich text test
</td>
<td>
</td>
<td>
16-03-2021 11:41
</td>
<td>
<button class="btn btn-outline-info" type="button" data-toggle="collapse" data-target="#d-132" aria-expanded="false" aria-controls="#d-132">
Notes
</button>
<div id="d-132" class="collapse">
<div class="card card-body">
<p>test 1</p>
<p style="padding-left: 40px;">indent 1</p>
<p style="padding-left: 40px;">indent 2</p>
<p><strong>bold text example</strong></p>
<p><span style="color: #ba372a;">red text exmple</span></p>
</div>
</div>
</td>
<td>
YorBill
</td>
<td>
</td>
<td>
<a class="btn btn-outline-primary" href="/UseCases/Details?id=132">Details</a>
<a class="btn btn-outline-primary" href="/UseCases/Edit?id=132">Edit</a>
<a class="btn btn-outline-dark" href="/UseCases/Delete?id=132">Delete</a>
</td>
</tr>
<tr>
<td>
test Use Case
</td>
<td>
</td>
<td>
15-02-2021 17:08
</td>
<td>
<button class="btn btn-outline-info" type="button" data-toggle="collapse" data-target="#d-129" aria-expanded="false" aria-controls="#d-129">
Notes
</button>
<div id="d-129" class="collapse">
<div class="card card-body">
</div>
</div>
</td>
<td>
YorBill
</td>
<td>
</td>
<td>
<a class="btn btn-outline-primary" href="/UseCases/Details?id=129">Details</a>
<a class="btn btn-outline-primary" href="/UseCases/Edit?id=129">Edit</a>
<a class="btn btn-outline-dark" href="/UseCases/Delete?id=129">Delete</a>
</td>
</tr>
<tr>
<td>
Test use case for notes
</td>
<td>
</td>
<td>
15-03-2021 11:00
</td>
<td>
<button class="btn btn-outline-info" type="button" data-toggle="collapse" data-target="#d-130" aria-expanded="false" aria-controls="#d-130">
Notes
</button>
<div id="d-130" class="collapse">
<div class="card card-body">
Test notes added to use case
2nd line
last line
</div>
</div>
</td>
<td>
YorBill
</td>
<td>
</td>
<td>
<a class="btn btn-outline-primary" href="/UseCases/Details?id=130">Details</a>
<a class="btn btn-outline-primary" href="/UseCases/Edit?id=130">Edit</a>
<a class="btn btn-outline-dark" href="/UseCases/Delete?id=130">Delete</a>
</td>
</tr>
</tbody>
</table>
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
</div>
</footer>
<script type="text/javascript">
$(window).on("load", function () {
$('#Message').delay(3000).fadeOut(1000);
});
var closing = true;
$(function () {
$("a, input[type=submit], input[type=text], input[type=radio], button[type=submit]").click(function () { closing = false; });
$(window).on("beforeunload", function () {
if (closing) {
$.post('/log/LogOff')
}
});
});
</script>
<script src="/lib/tinymce/js/tinymce/tinymce.min.js"></script>
<script>
tinymce.init({
selector: 'textarea',
plugins: 'lists advlist emoticons',
advlist_bullet_styles: 'square',
advlist_number_styles: 'lower-alpha',
menubar: false,
width: 600,
toolbar: 'undo redo | styleselect | bold italic | link image | outdent indent | numlist bullist | emoticons'
});
</script>
</body>
</html>
解决方案
看来您正在使用ObjIDtype int，这对 HTML id 属性无效，请参阅HTML5 id Naming rules。
ID 应以字母开头以保持兼容性。
只需在 all 前面添加一个字母@item.ObjID：
<button class="btn btn-outline-info" type="button" data-toggle="collapse" data-target="#d-@item.ObjID" aria-expanded="false" aria-controls="d-@item.ObjID">
Notes
</button>
<div id="d-@item.ObjID" class="collapse">
<div class="card card-body">
@Html.Raw(item.Notes)
</div>
</div>
推荐阅读
- django - 使用自定义用户模型登录 Facebook
- python - 雅典娜：在 python 中“创建外部表”的输入没有可行的替代方案
- php - 带有 JQUERY 函数的动态 ID
- sql - 在 SQL Server 中分离列值
- python - 如何将列表作为参数传递给数据类？TypeError: __init__() 缺少必需的位置参数
- node.js - Domino AppDev Pack TypeError：database.useAgent 不是函数
- robotframework - 在机器人框架中获取执行期间传递的标记名值
- java - 无法使用 liquibase 填充数据库
- git - 为什么我没有看到分支合并到源树中？
- javascript - 当我单击提交时，如何阻止电子邮件验证弹出窗口出现？