मेरे पास एएसपीनेट एमवीसी एप्लीकेशन में एक दृश्य है, जिसमें मेरे पास एक टेबल है। प्रत्येक पंक्ति पर मेरे पास एक एंकर टैग है जो मोडल विंडो खोलेगा। मैंने मोडल शो इवेंट पर कुछ कोड लिखा है। लेकिन घटना फायरिंग नहीं है। मेरे विचार का लेआउट कस्टम लेआउट पेज से आ रहा है। मेरे विचार के लिए कोड निम्नलिखित है।

@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>

मोडल शो के लिए इवेंट फायरिंग के लिए जावास्क्रिप्ट निम्नलिखित है:

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

    </script>
0
MAK 19 अप्रैल 2020, 14:11

1 उत्तर

सबसे बढ़िया उत्तर

डेटा-लक्ष्य के बजाय कक्षा का उपयोग करके जावास्क्रिप्ट के माध्यम से मोडल को सक्रिय करने का प्रयास करें।

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

$('#cntdetail').on('show.bs.modal', function (e) {
    alert("a");
});
0
Shaikh Kamran Ahmed 19 अप्रैल 2020, 13:20