通过多个ASP链接按钮发送Bootstrap模态多个数据

时间：2019-03-06 20:51:44

标签： jquery bootstrap-modal

我需要一些帮助来弄清楚如何从多个按钮将数据传递到模式弹出窗口。我已经创建了将对一个按钮执行此操作的代码，但是我无法弄清楚如何使jQuery泛型来从单击的任何按钮进行管理。我的最终目标是使它与ASP数据视图一起使用，但首先让这一关键部分起作用。

这是jQuery。

<script>
    $(document).on("click", ".open-AddBookDialog", function () { 
        var sTrainingSwipeID = $('#btnExtend_1').data('extend').TrainingSwipeID;
        var sCurrentDate = $('#btnExtend_1').data('extend').CurrentDate;

        $(".modal-body #TrainingSwipeID").val(sTrainingSwipeID);
        $(".modal-body #CurrentDate").val(sCurrentDate);
    });
</script>

这是我正在玩的2个链接按钮。

<asp:LinkButton ID="btnExtend_1" href="#addBookDialog" runat="server" Text="Extend" 
    class="open-AddBookDialog btn btn-outline-secondary btn-med" 
    data-extend='{"TrainingSwipeID":1,"CurrentDate":"03/07/2019"}' 
    data-toggle="modal" data-target="#myModal" />

<asp:LinkButton ID="btnExtend_2" href="#addBookDialog" runat="server" Text="Extend" 
    class="open-AddBookDialog btn btn-outline-secondary btn-med" 
    data-extend='{"TrainingSwipeID":2,"CurrentDate":"03/07/2017"}' 
    data-toggle="modal" data-target="#myModal" />

这也是我正在使用的模式。

<div runat="server" id="divButtonPopup">                 

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

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Extend Date</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body"> 
                <asp:HiddenField  ID="TrainingSwipeID" runat="server"></asp:HiddenField>
                <asp:TextBox ID="CurrentDate" runat="server"></asp:TextBox>

            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <asp:Button ID="btnExtendFromModal" runat="server" Text="Extend" class="btn btn-primary" OnClick="btnExtendDate_Click" UseSubmitBehavior="false" data-dismiss="modal" />
                <button type="button" class="btn btn-outline-secondary btn-med" data-dismiss="modal">Close</button>
            </div>

            </div>
        </div>
    </div>
</div>

更新： 这是完整的代码，以及gaetanoM的编辑建议。使用此代码，模态会从任一按钮弹出，但模态的TrainingSwipeID或CurrentDate文本框中将不包含任何内容。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Time Entry</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <script>
        $('#myModal').on('show.bs.modal', function (e) {
            var ele = e.relatedTarget;
            var sTrainingSwipeID = $(ele).data('extend').TrainingSwipeID;
            var sCurrentDate = $(ele).data('extend').CurrentDate;

            $("#TrainingSwipeID").val(sTrainingSwipeID);
            $("#CurrentDate").val(sCurrentDate);
        });
    </script>
</head>
<body>
<form id="form1" runat="server">
    <div class="container-fluid">

        <a id="btnExtend_1" class="open-AddBookDialog btn btn-outline-secondary btn-med" href="#addBookDialog"
           data-extend='{"TrainingSwipeID":1,"CurrentDate":"03/07/2019"}'
           data-toggle="modal" data-target="#myModal">Extend1</a>
        <a id="btnExtend_2" class="open-AddBookDialog btn btn-outline-secondary btn-med" href="#addBookDialog"
           data-extend='{"TrainingSwipeID":2,"CurrentDate":"04/07/2017"}'
           data-toggle="modal" data-target="#myModal">Extend2</a>

        <div runat="server" id="divButtonPopup">

            <!-- The Modal -->
            <div class="modal fade" id="myModal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <!-- Modal Header -->
                        <div class="modal-header">
                            <h4 class="modal-title">Extend Date</h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <!-- Modal body -->
                        <div class="modal-body">
                            <input type="text"  id="TrainingSwipeID" />
                            <input type="text" id="CurrentDate" />

                        </div>
                        <!-- Modal footer -->
                        <div class="modal-footer">
                            <button type="button" id="btnExtendFromModal" class="btn btn-primary"
                                        OnClick="btnExtendDate_Click" UseSubmitBehavior="false" data-dismiss="modal">Extend</button>
                            <button type="button" class="btn btn-outline-secondary btn-med" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>   

    </div>
</form>
</body>
</html>

1 个答案:

答案 0 :(得分：1)

如果您希望继续进行委派的事件，则需要更改：

var sTrainingSwipeID = $('#btnExtend_1').data('extend').TrainingSwipeID;

收件人：

var sTrainingSwipeID = $(this).data('extend').TrainingSwipeID;

有关更多信息，您可以阅读this

在任何情况下，您都可以使用show.bs.modal，在这种情况下，您需要使用 event.relatedTarget 来代替 this ：

$(function() {
//^^^^^^^^^^^^^^^^^^^^
  $('#myModal').on('show.bs.modal', function (e) {
     var ele = e.relatedTarget;
      var sTrainingSwipeID = $(ele).data('extend').TrainingSwipeID;
      var sCurrentDate = $(ele).data('extend').CurrentDate;

      $("#TrainingSwipeID").val(sTrainingSwipeID);
      $("#CurrentDate").val(sCurrentDate);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<a id="btnExtend_1" class="open-AddBookDialog btn btn-outline-secondary btn-med" href="#addBookDialog"
   data-extend='{"TrainingSwipeID":1,"CurrentDate":"03/07/2019"}'
   data-toggle="modal" data-target="#myModal" href="#addBookDialog">Extend1</a>
<a id="btnExtend_2" class="open-AddBookDialog btn btn-outline-secondary btn-med" href="#addBookDialog"
   data-extend='{"TrainingSwipeID":2,"CurrentDate":"04/07/2017"}'
   data-toggle="modal" data-target="#myModal" href="#addBookDialog">Extend2</a>

<div runat="server" id="divButtonPopup">

    <!-- The Modal -->
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Extend Date</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- Modal body -->
                <div class="modal-body">
                    <input type="text"  id="TrainingSwipeID">
                    <input type="text" id="CurrentDate">

                </div>
                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" id="btnExtendFromModal" class="btn btn-primary"
                                OnClick="btnExtendDate_Click" UseSubmitBehavior="false" data-dismiss="modal">Extend</button>
                    <button type="button" class="btn btn-outline-secondary btn-med" data-dismiss="modal">Close</button>
                </div>

            </div>
        </div>
    </div>
</div>

相关问题
最新问题