如何使用 bootsrap 将数据传递到模态

how to pass data to modal using bootsrap

本文关键字：模态 数据 何使用 bootsrap      更新时间：2023-09-26

我试图弄清楚如何将变量传递给模型。例如，我有一个包含学生列表的表。我想单击其中一个并有一个与该学生匹配的模式弹出窗口。所以我显然需要将表中的 id 传递给模型。这一切都是使用剃须刀 Asp.net。然后在弹出该模型后，我想编辑并重新提交，然后刷新表格。也许甚至有一个成功的信息。我正在使用引导程序，所以我正在考虑使用警报说已成功更新！什么的。这是代码。请帮助我解决此问题。

<body>
    <p>
        @Html.ActionLink("Create New", "Create")
    </p>
    <div class="box-content">
        <table class="table table-striped table-bordered bootstrap-datatable datatable">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>DNIS </th>
                    <th>Created by</th>
                    <th>Created Date</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
                        <td> @Html.DisplayFor(modelItem => item.service_name)</td>
                        <td class="center"> @Html.DisplayFor(modelItem => item.dnis)</td>
                        <td class="center"> @Html.DisplayFor(modelItem => item.created_by) </td>
                        <td class="center"> @Html.DisplayFor(modelItem => item.date_time)</td>
                        <td class="center">
                            <a class="btn btn-success" href="~/Service/AssignSkillGroup/@item.service_name">
                                Add/Del SkillGroup
                            </a>
                            <a class="btn btn-info" href="~/Service/Edit/@item.service_name">
                                <i class="icon-edit icon-white"></i>
                                Edit
                            </a>
                            <a  class="btn btn-danger" data-toggle="modal" data-id="@item.service_name" data-target="#myModal" >
                                <i class="icon-trash icon-white"></i>
                                Delete                          
                            </a>
                        </td>
                    </tr>                  
                }
            </tbody>
        </table>
    </div>
    <span class="modal" id="myModal" role="dialog" style="height: 175px">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Are you sure to want to delete this service ? </h4>
            </div>
            <div class="modal-body">
                <p>If you delete the service, Wrap-up codes will not appear for this service</p>
            </div>
            <div class="modal-footer">
                <a class="btn btn-default" href="/Service/Delete/">
                    Delete
                    <a><button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> </a>
                </a>
            </div>
        </div>
    </span>

</body>

您可以使用引导对话框事件来实现您想要的：

//triggered when modal is about to be shown
$('#my_modal').on('show.bs.modal', function(e) {
  //get id attribute of the clicked element (delete button)
  var id = $(e.relatedTarget).data('id');
  // do what you want with the id ..
});

您可以像下面这样制作模态 

<span class="modal" id="myModal" role="dialog" style="height: 175px">
       <!-- Modal content-->
       <div class="modal-content">
           <div class="modal-header">
               <button type="button" onclick="Close()" class="close" data-dismiss="modal">&times;</button>
               <h4 class="modal-title">Are you sure to want to delete this service ? </h4>
           </div>
           <div class="modal-body">
               <p>If you delete the service, Wrap-up codes will not appear for this service</p>
           </div>
           <div class="modal-footer">
               <a class="btn btn-default" id="del" >
                   Yes
               </a>
               <a class="btn btn-default" onclick="Close()">
                   No
               </a>
           </div>
       </div>
</span>

添加以下脚本并通过删除按钮调用这些方法，并将 id 传递给脚本函数。

<script>
   function deleteFunction(id) {
       $('#myModal').show();
       var a = document.getElementById('del');
       a.href = "/Service/Delete/" + id;
   }
   function Close()
   {
       $('#myModal').hide();
   }
</script>
相关文章：