如何使用 javascript 打开外部引导模式答案

【问题标题】：How to open an external Bootstrap Modal using javascript如何使用 javascript 打开外部引导模式
【发布时间】：2018-04-23 23:44:06
【问题描述】：

我有一个 html 文件，它显示一个带有 CRUD 按钮的表格（引导表），这些按钮使用引导模式调用表单。我的文件 ListeCategorie_Demandeurs.cshtml（下面的快照）包含基本流程并且到目前为止工作正常。

        //**** NE FONCTIONNE PAS SI MIS DANS LE SECTION $(document).ready(function () {} ****
        $('#table').bootstrapTable({
            url: 'GetListeCatDdeurs',
            locale: 'fr-CA',
            pagination: true,
            paginationLoop: true,
            search: true,
            clickToSelect: true,
            singleSelect: true,
            sortable: true,
            sortOrder: 'asc',
            idField: 'ID_Type_Demandeur',
            sortName: 'ID_Type_Demandeur',

        });
        var $table = $('#table');
        //**** FIN SECTION NON FONCTIONNELLE ****

        $(document).ready(function () {
            $(function () {
                //**** Action click du bouton pour appeler le modal ****
                $table.on('click-row.bs.table', function (e, row, $element) {   //**** SECTION MIS EN COMMENTAIRE: BOUTON NE FONCTIONNE PAS ****
                    $('.success').removeClass('success');
                    $($element).addClass('success');
                });
            });

            //**** Lancement de la fenetre modale avec les valeurs de l'enregistrement choisi ****
            $("#myBtn").click(function () {
                //**** On encapsule la ligne choisie ****
                var index = $table.find('tr.success').data('index');
                var enregChoisi = $table.bootstrapTable('getData')[index];

                //**** Ventilation dans les champs du modal les données de l'enregistrement choisi ****
                $("#myModal").on('show.bs.modal', function (e) {
                    $(e.currentTarget).find('input[id="textBox"]').val(enregChoisi.Nom_Type_Demandeur);
                });

                //**** Affichage du modal ****
                $("#myModal").modal();

            });

        });

<!doctype html>
<html lang="en">
<head>
    @{
        ViewBag.Title = "Catégorie Demandeurs (Liste des)";
    }
    <title></title>
    @* **** Required meta tags **** *@
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    @* **** END required meta tags **** *@
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>

    @* **** Référence Bootstrap CSS / js **** *@
    <link rel="stylesheet" href="~/Content/bootstrap.css">
    <link href="~/Content/bootstrap-table.css" rel="stylesheet" />
    <script src="~/Scripts/bootstrap-table/bootstrap-table.js"></script>
    <script src="~/Scripts/bootstrap-table/locale/bootstrap-table-fr-FR.min.js"></script>
    @* **** FIN référence **** *@

    @* **** Référence Font-Awesome **** *@
    <link href="~/css/font-awesome.min.css" rel="stylesheet">
    @* **** FIN référence **** *@
</head>
<body>
    @* ****************** SECTION COLONNE DU BOOTSTRAP-TABLE ****************** *@
    <div class="container" style="border:1px solid #cecece; background-color: azure">
        <table id="table">
            <thead>
                <tr>
                    <th data-field="state" data-radio="true" data-sortable="false" data-searchable="false"></th>
                    <th data-field="ID_Type_Demandeur" data-sortable="true" data-searchable="true" data-align="right">ID <i class="fa fa-fw fa-sort"></i></th>
                    <th data-field="Nom_Type_Demandeur" data-sortable="true" data-searchable="true">Nom catégorie <i class="fa fa-fw fa-sort"></i></th>
                    <th data-field="Remarques_Type_Demandeur" data-sortable="true" data-searchable="true">Remarques <i class="fa fa-fw fa-sort"></i></th>
                    <th data-field="Actif_Inactif" data-sortable="false" data-searchable="false" data-align="center" data-formatter="ticksFormatter">Actif / Inactif</th>
                    <th data-field="Dte_Saisie" data-sortable="true" data-searchable="true" data-align="right" data-formatter="dateFormat">Date de saisie <i class="fa fa-fw fa-sort"></i></th>
                    <th data-field="UserName" data-sortable="false" data-searchable="false">Utilisateur</th>
                </tr>
            </thead>
        </table>
    </div>

    @* ****************** SECTION MODAL ****************** *@
    <button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>
    @*<div class="container" style="margin-top:10px;">

            <!-- Modal -->
            <div class="modal fade" id="myModal" role="dialog">
                <div class="modal-dialog">

                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <div class="modal-body">
                            <p>Some text in the modal.</p>
                           <input id="textBox" type="text" placeholder="test" />
                            <button type="button" class="btn btn-info" id="btnModal">Afficher la valeur passee </button>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>

                </div>
            </div>

        </div>*@
</body>
</html>

当所有 CRUD 操作都被编码时，它会变得更大，为了清晰和便于调试，我想在其他一些 .cshtml 文件（suprimer.cshtml、ajouter.cshtml、modifier.cshtml）中隔离 CRUD 操作）。因此，我的主 .cshtml 文件上的 3 个按钮将为我的每个 CRUD 操作调用一个包含引导模式的子文件。更实际：

 <div class="container" style="margin-top:10px;">

        <!-- Modal -->
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <p>Some text in the modal.</p>
                       <input id="textBox" type="text" placeholder="test" />
                        <button type="button" class="btn btn-info" id="btnModal">Afficher la valeur passee </button>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>

            </div>
        </div>

    </div>

需要在子文件中移动并可以被调用：

$(function () {
            //**** Action click du bouton pour appeler le modal ****
            $table.on('click-row.bs.table', function (e, row, $element) {   //**** SECTION MIS EN COMMENTAIRE: BOUTON NE FONCTIONNE PAS ****
                $('.success').removeClass('success');
                $($element).addClass('success');
            });
        });

        //**** Lancement de la fenetre modale avec les valeurs de l'enregistrement choisi ****
        $("#myBtn").click(function () {
            //**** On encapsule la ligne choisie ****
            var index = $table.find('tr.success').data('index');
            var enregChoisi = $table.bootstrapTable('getData')[index];

            //**** Ventilation dans les champs dumodal les données de l'enregistrement choisi ****
            $("#myModal").on('show.bs.modal', function (e) {
                $(e.currentTarget).find('input[id="textBox"]').val(enregChoisi.Nom_Type_Demandeur);
            });

            //**** Affichage du modal ****
            $("#myModal").modal();

        });

只要所有内容都放在一个文件中，我知道一切都会正常工作。问题是：如何让我的 Javascript 代码（在 ListeCategorie_Demandeurs.cshtml 中）调用并将数据（选定的行）传递给我在 suprimer.cshtml、ajouter.cshtml 和 modifier.cshtml 中定义的 Bootsrap 模态？

【问题讨论】：

标签： javascript jquery html asp.net-mvc bootstrap-modal

【解决方案1】：

我希望我能理解你的问题。如果您将 javascript 和/或 html 拆分为单独的文件，然后将它们包含在一个文档中，您的 html 和 javascript 函数都将可用。这是因为您包含的每个脚本都将共享相同范围：全局范围

例如：

part1.js

function callMe(){
    alert (getMsg());
}

part2.js

function getMsg() {
    return 'Hello';
}

html:

<script src="part1.js"></script>
<script src="part2.js"></script>
<script>
    $(function () {
        callMe(); //this will alert 'Hello'
    });
</script>

【讨论】：

嗨，Damián Pablo González 我的问题是我有：file1.cshtml 包含一个引导表，3 个引导按钮。每个按钮调用 add.cshtml、modify.cshtml 和 delete.cshtml。最后 3 个文件实际上是 Bootstrap-Modals，其形式为执行每个操作。我只想能够从第一个文件中的给定按钮调用这 3 个文件