событие модального шоу не стреляет

Question

У меня есть одно представление в 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>

Answer 1

Попробуйте активировать модал с помощью javascript, используя класс вместо data-target.

$(".yourModalClassHere").click(() => {
    $('#cntdetail').modal('show');
})

$('#cntdetail').on('show.bs.modal', function (e) {
    alert("a");
});