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

问题描述 投票：0回答：1

我需要一些帮助，找出如何从多个按钮传递数据到模式弹出窗口。我已经创建了一个按钮来执行此操作的代码，但我无法弄清楚如何使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>
jquery bootstrap-modal
1个回答
1
投票

如果您希望继续委派活动，则需要更改：

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

至：

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

有关更多信息，请阅读this

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

$(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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.