Html 如何使用thymeleaf将参数传递给模态？

我刚刚开始一个项目，我们正在使用thymeleaf，我是这项技术的新手。 这是一个确认要删除的对象的简单模式。因此，他们希望我在消息中添加我们要删除的项目的名称，而不是像这样的一般消息：“您确定要删除吗？” 他们想：“你想删除项目名称吗？” 所以我需要将这个名称作为参数传递

这是代码，我有显示模式：

<button id="btnDelete" value="delete" type="button" class="btn-link" data-toggle="modal" data-object-id="12345" data-object-name="NNN" th:attr="data-object-id=''+${assignment.assignmentId}+'', data-object-name='/nonInstructionalWorkload/deleteAssignment?asssignmentId='+${assignment.assignmentId}+'', data-target='#deleteAssignmentModal'">

这就是我在模式html上的代码：

<form role="form" th:action="@{/deleteAssignment}"
      name="assignmentDeleteForm" id="assignmentDeleteForm" method="post">

    <div class="modal-header">
        <h4 class="modal-title" id="deleteWorkItemabel">Confirm Assignment Delete</h4>
    </div>

    <div class="modal-body">
        <div class="form-group">
            <p>Assignment will be deleted, are you sure you want to proceed?</p>
            <input type="hidden" id="deleteId" name="deleteId" value="nnnn"/>
        </div>
    </div>

    <div class="modal-footer">
        <button type="submit" id="btnDelConfirm" class="btn btn-primary">
            Yes
        </button>
        <button type="button" id="btnDelCancel" class="btn btn-default" data-dismiss="modal">
            No
        </button>
    </div>
</form>

确认任务删除
作业将被删除，您确定要继续吗

对
不

在这一点上，我需要添加更多关于正在删除的任务项的确认消息的信息

已经尝试了一些方法来获取参数，但是没有成功，所以我正在寻找更多的选项

---

谢谢大家!

Thymeleaf只是一个模板引擎，它可以获取模板并从中生成静态html。因此，将动态值传递给模式是一项javascript工作（除非为每个项生成单独的模式，但这将是愚蠢的）

使用thymeleaf，您必须生成一个

data-

属性，该属性包含打开模式的按钮中所需的项目名称，仅此而已。您已经在

th:attr

中做过这样的事情：

th:attr="data-object-id=''+${assignment.assignmentId}+'', data-object-name='/nonInstructionalWorkload/deleteAssignment?asssignmentId='+${assignment.assignmentId}+'', data-target='#deleteAssignmentModal'"

上述代码将在按钮内生成属性

数据对象id

，

数据对象名称

和

数据目标

。我假设

数据对象名

就是您想要使用的名称（不过它看起来更像一个URL）

现在，您可以使用javascript自定义模式的内容。我可以看出，您正在使用引导作为前端库，因此您应该看看，了解如何实现这一点

下面的Javascript代码应该适合您：

$('#deleteAssignmentModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var objectName = button.data('object-name') // Extract info from data-object-name attribute

  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-body p').text('Do you want to delete ' + objectName + '?')
})

---

GitHub上的示例项目可以进行克隆和测试。自述文件下的完整视频

×
删除确认
确实要吗
是否删除此任务？
取消
$（'#modal delete'）。on（'show.bs.modal'，函数（e）{
$（this.find（'.btn ok'）.attr（'href'，$（e.relatedTarget.data（'href'））；
$（'#modal deleteHiddenId'）.val（$（this）.find（'.btn ok'）.attr（'href'））；
});

为什么在Grails项目中使用Thymeleaf而不是GSP？谢谢，但我对jquery代码有意见。我找不到地方叫它。“我做错了什么？”利科德不看密码很难说。我的猜测是，您没有包含模式插件或其依赖项的javascript。您是否已将

bootstrap.js

包含到页面中？

<div class="modal modal-delete" th:id="modal-delete+${task.id }">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h3 id="delModalLabel">Delete Confirmation</h3>
            </div>
            <div class="modal-body">
                <p class="error-text"><strong>Are you sure you want to
                    delete this task ?</strong></p>
            </div>
            <div class="modal-footer">
                <button class="btn " data-dismiss="modal" aria-hidden="true">
                    Cancel
                </button>
                <a th:href="@{/task/delete/{id}(id=${task.id})}">
                    <span class="btn btn-danger" value="delete">Delete</span></a>

            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!--end delete modal-->

<script>
    $('#modal-delete').on('show.bs.modal', function (e) {
        $(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
        $('#modal-deleteHiddenId').val($(this).find('.btn-ok').attr('href'));
    });
</script>