在剃刀中将迭代数据从按钮传递到模态

Posted 2023-05-08

【中文标题】在剃刀中将迭代数据从按钮传递到模态

【英文标题】：Passing iterative data from button to modal in razor

【发布时间】：2020-02-15 11:00:52

【问题描述】：

我有一个 razor 视图页面，我在其中循环浏览我的列表并将其逐行呈现在表格上。在每一行都有一个按钮，用于将存储在特定行中的信息通过邮件发送，但该按钮本身并不会触发邮件发送操作。它打开一个模式并询问用户是否继续该过程。之后，模态框内的按钮将触发邮件发送过程的javascript方法。这是我的循环；

@foreach (var file in Model.ExcelLogListPaged)
                
                    <tr>
                        <td class="">@file.ID</td>
                        <td>@file.UploadedDate</td>
                        <td><button class="btn btn-info btn-lg" type="button"  data-toggle ="modal" data-target="#warningModal" id="[e-mail]">Send Mail</button></td>
                    </tr>
                 

这是我的模态；

div id="warningModal" class="modal fade" role="dialog" style="z-index:9999;">
    <div class="modal-dialog">

        <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?</h4>
            </div>

            <div class="modal-body">
                <p>Are you sure to send the mail manually?</p>
            </div>

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

正如我所提到的，我有一个 javascript 方法 SendMail() 负责发送邮件。我想通过模态按钮触发它，这就是为什么我需要通过onclickattribute 分配它。但是，此方法需要一个参数，并且此参数应通过模态的调用者按钮传递。更具体地说，我想将循环中的数据@file.ID 传递给我的模态，然后使用它分配给模态提交按钮的onclick 属性，如SendMail(@file.ID)。我怎样才能做到这一点？提前致谢。

【参考方案1】：

在循环中为按钮添加 fileid 属性，并且任何 css 类都说“文件”

@foreach (var file in Model.ExcelLogListPaged)
            
                <tr>
                    <td class="">@file.ID</td>
                    <td>@file.UploadedDate</td>
                    <td><button fileid="@file.ID" class="btn btn-info btn-lg" type="button"  data-toggle 
        ="modal" class="file" data-target="#warningModal" id="[e-mail]">Send Mail</button></td>
                </tr>
            

然后在模态弹出窗口中添加隐藏字段

     div id="warningModal" class="modal fade" role="dialog" style="z-index:9999;">
<div class="modal-dialog">

    <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?</h4>
        </div>

        <div class="modal-body">
            <p>Are you sure to send the mail manually?</p>
        </div>

        <div class="modal-footer">
            <button type="button" class="btn btn-default" data- 
             dismiss="modal">Close</button>
            <button type="button" class="btn btn-success" data- 
             dismiss="modal">Send</button>
              <input type="hidden" id="hdnselectedfield" /> 
           </div>
         </div>
      </div>
  </div>

添加下面的脚本

<script>
 $(".file").on("click",function()
    $("#hdnselectedfield").val($(this).val()))
  )

 </script>

您将在隐藏字段中获得文件ID，您可以将其发送至

   SendMail($("#hdnselectedfield").val())