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

Posted 2023-02-19

【中文标题】使用 Thymeleaf 迭代卡片，然后将所选卡片的值发送到模型

【英文标题】：Using Thymeleaf to iterate cards then send value of selected card to model

【发布时间】：2022-01-22 11:01:08

【问题描述】：

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

在调试模式下，我看到 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";

我正在尝试显示一个元素列表，以便每个元素都获得一张显示元素信息的卡片，然后在每张卡片上发布一个按钮来发布并告诉控制器用户选择了哪张卡片。

如果我用选择下拉列表替换卡片，但不知道如何将其与每个列表项的卡片对齐，我可以让它正常工作。

感谢您的帮助。

【参考方案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 和前端开发的新手，所以我非常感激。知道这很有帮助。我将不得不更多地研究表单提交，并了解提交和不提交的内容。非常感谢。