我在asp.net MVC应用程序中有一个视图，其中有一个表。在每一行上，我都有一个锚标记，它将打开模式窗口。我已经编写了一些有关模态表演事件的代码。但事件并未触发。我的视图的布局来自自定义布局页面。以下是我的视图的代码。
@Model
@Imports System.Data
@Code
ViewBag.Title = ViewBag.Title
Layout = "~/Views/Shared/_MyLayout.vbhtml"
End Code
@Section js
<script src="@Session("baseurl")/Scripts/bootstrap.min.js"></script>
<script src="@Session("baseurl")/Scripts/jquery-3.3.1.slim.min.js"></script>
<script src="@Session("baseurl")/Scripts/jquery.min.js"></script>
End Section
@section css
End Section
<script src="@Session("baseurl")/Scripts/jquery-1.12.4.js"></script>
<script src="@Session("baseurl")/Scripts/jquery-ui.js"></script>
<link href="@Session("baseurl")/Styles/jquery-ui.css" rel="stylesheet" />
<link href="@Session("baseurl")/Styles/jquery.dataTables.min.css" rel="stylesheet" />
<script src="@Session("baseurl")/Scripts/jquery.dataTables.min.js"></script>
<form action="@Session("baseurl")/ContainerList/List" method="post">
<div class="row pl-md-1 pb-0">
<div class="col-md-12 pl-1">
<p class="lead" id="heading">@ViewBag.Heading</p>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<div class="alert alert-info form-control" id="infomsg">
<label id="lblInfo" class="fa fa-info-circle">@Session("InfoMsg")</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10 border border-primary pt-2 pb-2">
<div class="row pb-3">
<!--<div class="col-md-2 pt-1">
<label Class="col-form-label">@Session("ContainerNo")</label>
</div>
<div class="col-md-3">
<input type="text" name="containerno" id="containerno" class="form-control form-control-sm font-weight-bold text-uppercase" />
</div>
<div class="col-md-2"></div>-->
<div class="col-md-2">
<label Class="col-form-label">@Session("BOLNumber")</label>
</div>
<div class="col-md-5">
<input type="text" name="bolnumber" class="form-control form-control-sm font-weight-bold text-uppercase" />
</div>
</div>
<div class="row">
@If Session("Lang") = "E" Then
@:<div Class="col-md-2 pr-0">
Else
@:<div Class="col-md-2 pl-0">
End If
<Label Class="col-form-label">@Session("FromRecvdDate")</label>
</div>
<div class="col-md-3">
<div class="inputWithIcon inputIconBg">
<i class="fa fa-calendar fa-lg"></i>
<input class="form-control form-control-sm font-weight-bold readonly" type="text" placeholder="dd/mm/yyyy"
name="fromrecvdate" id="fromrecvdate" style="width:100%" maxlength="12" />
</div>
</div>
<div class="col-md-2"></div>
<div class="col-md-2">
<label Class="col-form-label">@Session("UptoRecvdDate")</label>
</div>
<div class="col-md-3">
<div class="inputWithIcon inputIconBg">
<i class="fa fa-calendar fa-lg"></i>
<input type="text" class="form-control form-control-sm font-weight-bold readonly" placeholder="dd/mm/yyyy"
name="uptorecvdate" id="uptorecvdate" style="width:100%" maxlength="12" />
</div>
</div>
</div>
<div class="row pt-3">
@If Session("Lang") = "E" Then
@:<div Class="col-md-12 text-right">
Else
@:<div Class="col-md-12 text-left">
End If
<button type="submit" name="BtnCntList" class="btn btn-info">
<i class="fa fa-search"></i>
@Session("BtnCntList")
</button>
</div>
</div>
</div>
<div class="col-md-1"></div>
</div>
<div class="row pt-3">
<div class="col-md-12">
@If ViewBag.RowCount > 0 Then
@:<table id="cntlist" class="table-responsive table table-bordered table-hover table-lightfont table-condensed">
@:<thead class="thead-light">
@:<th>@Session("tdcontainerno")</th>
@:<th>@Session("tdbolnumber")</th>
@:<th>@Session("tdarrivaldate")</th>
@:<th>@Session("tdrecvddate")</th>
@:<th>@Session("tdsku")</th>
@:<th>@Session("tdagent")</th>
@:<th>@Session("tdlot")</th>
@:<th>@Session("tdstatus")</th>
@:<th></th>
@:</thead>
@:<tbody>
@For Each row As System.Data.DataRow In Model.Rows
@:<tr>
For Each cell In row.ItemArray
@:<td>@cell.ToString</td>
Next
@:<td><a href="#" data-toggle="modal" title="@Session("MoreDetails")" data-target="#cntdetail" data-book_id='{"containerno":"@row.Item(0).ToString","lot":"@row.Item(6).ToString"}' class="btn"><i class="fa fa-file-text-o"></i></a></td>
@:</tr>
Next
@:</tbody>
@:</table>
End If
</div>
</div>
以下是模式的HTML代码
<div id="cntdetail" class="modal show fade" data-backdrop="static" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h6>@Session("CntDetails")</h6>
</div>
<div class="modal-body">
<input type="text" name="containerno" />
<input type="text" name="lot" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">
<i class="fa fa-close"></i>
Close
</button>
</div>
</div>
</div>
</div>
以下是用于模式展示的事件触发的JavaScript
<script>
$(function () {
$('#cntdetail').on('show.bs.modal', function (e) {
alert("a");
});
});
</script>
答案 0 :(得分：0)
尝试使用类而不是数据目标通过javascript激活模式。
$(".yourModalClassHere").click(() => {
$('#cntdetail').modal('show');
})
$('#cntdetail').on('show.bs.modal', function (e) {
alert("a");
});