使用 Thymeleaf 迭代卡片，然后将所选卡片的值发送到模型

Question

我正在使用 thymeleaf 为列表中的所有对象吐出卡片，但我希望用户能够单击其中一张卡片上的按钮，然后让我的后端知道哪张卡片（baseElement.name) 已通过发回 baseElement 的名称进行 select 编辑。这对于下拉菜单而不是卡片来说效果很好，但我更愿意使用卡片来获得用户体验。

在调试模式下，我看到 selectedElementName 返回为空字符串，因此我尝试用 baseElement.name 填充它的地方似乎不起作用。

查看：

<th:block th:each="baseElement : ${baseElements}">
   <div class="col-md">
      <form class="form-horizontal" method="post"
         th:action="@{/account/baseElementLevel}" th:object="${selectedElementName}">
         <div class="card text-center g-4">
            <div class="card-header">Base Element</div>
            <div >
               <div class="card-body">
                  <h5 class="card-title" name="selectedElementName" id="selectedElementName" th:value="${baseElement.name}" th:text="${baseElement.name}"></h5>
                  <p class="card-text" th:text="${baseElement.briefDescription}"></p>
                  <button class="btn btn-primary form-control" type="submit">Enter</button>
               </div>
            </div>
            <div class="card-footer text-muted">Entry Points:</div>
         </div>
      </form>
   </div>
</th:block>

控制器：

@RequestMapping(value = "/baseElementLevel", method = RequestMethod.GET)
public String baseElementLevel(Model model, Principal principal) {
    User user = userService.findByUsername(principal.getName());
    List<BaseElement> baseElements = elementService.findByUserUserIdAndType(user.getUserId(), "BASE");
    
    model.addAttribute("baseElements", baseElements);

    model.addAttribute("selectedElementName", "");
    model.addAttribute("baseElement", "");

    model.addAttribute("amount", "");

    return "baseElementLevel";
}

@RequestMapping(value = "/baseElementLevel", method = RequestMethod.POST)
public String baseElementLevelPOST(@ModelAttribute("amount") String amount,
        @ModelAttribute("selectedElementName") String selectedElementName, Principal principal) {
    User user = userService.findByUsername(principal.getName());

    user.setSelectedBaseElement(
            elementService.findByNameAndUserUserId(selectedElementName, user.getUserId()).getId());


    userService.save(user);

    return "redirect:/account/elementView";
}

我正在尝试显示一个元素列表，以便每个元素都有一张显示元素信息的卡片，然后在每张卡片上有一个按钮 post 并告诉控制器用户使用哪张卡片 selected.

如果我用 select 下拉列表替换卡片，我可以让它正常工作，但不确定如何让每个列表项与卡片对齐。

感谢您的帮助。

Answer 1

当您提交表单时，

<h5 />s 没有被提交。您可以为此使用隐藏的表单元素：

<div class="card-body">
  <h5 class="card-title" th:text="${baseElement.name}" />
  <input type="hidden" name="selectedElementName" th:value="${baseElement.name}" />
  <p class="card-text" th:text="${baseElement.briefDescription}" />
  <button class="btn btn-primary form-control" type="submit">Enter</button>
</div>

使用 Thymeleaf 迭代卡片，然后将所选卡片的值发送到模型

Using Thymeleaf to iterate cards then send value of selected card to model

java

thymeleaf

spring-boot

spring-thymeleaf