【问题标题】:Springboot Checkbox Values to ControllerSpringboot复选框值到控制器
【发布时间】:2020-05-29 22:33:04
【问题描述】:

一个 springboot-thymeleaf 新手,我已经阅读了许多关于这个主题的类似问题,但我仍然在语法和整体 Springboot Thymeleaf 范例中遗漏了一些东西。

Web 应用程序从由 Thymeleaf 模板呈现的后端数据库中提取项目数据。用户还可以生成数据的 pdf 报告,该报告也在浏览器中呈现。

实体:

@Entity
@Table(name = "REPORT_CS")
public class ReportItemCs {

    public ReportItemCs () {}

    @Id
    @Column(name = "ITEM_ID")
    private Long itemId;

    @Column(name = "PROJ_NUM")
    private String projectNumber;

    @Column(name = "REGION")
    private String region;

//  additional fields, getters, setters

首先,一些可行的方法:

thymeleaf 中的一个简单文本字段用于在 post 请求中传递一个字符串。控制器在它作为 projectNumber 上的查询参数传递给 repo 的地方拾取它。该查询返回 thymeleaf 在表中呈现的对象列表。请注意,没有绑定到任何对象 - 它只是从 UI 发布字符串,然后将其作为查询参数传递。

HTML:

//Works without binding to backend

<section layout:fragment="content">

    <p>Quick Project Search:</p>

    <form method="post">
        <input type="text" name="keyword"
            placeholder="Project number keywords" /> <input type="submit"
            value="Search" />
    </form>

    <br /> <span th:text=" ${noProjectsMessage}"></span>

</section>

控制器:

@RequestMapping(value = "/", method = RequestMethod.POST)
    public String showProject(String keyword, ModelMap model) {



        List<ProjectView> p = repository.findByProjectsContaining(keyword);
            if (p.size() == 0) {

                model.put("noProjectsMessage",
                String.format("Project with id containing \"%s\" not found...", keyword));
                return "home";
            } else {

                model.put("projectViews", p);
            }
        return "show-projects";
    }

存储库:

    @Query("SELECT p FROM ProjectView p WHERE p.projectNumber like %?1%")
    List<ProjectView> findByProjectsContaining(@Param("keyword") String keyword);

所以,现在,我需要添加一些复选框来提供按区域、项目类别等进行的额外过滤。我计划以两种方式使用复选框:1)使用 jQuery 动态过滤 UI 中的项目列表,以及,此外,将复选框值传递回控制器,以便它们可用于填充 pdf 模板标题。然后,我将执行另一个数据库查询或使用 Stream() 过滤由原始查询生成的列表并将过滤后的列表发送到 pdf 服务。当用户点击“PDF”按钮时,复选框值被转发到生成报告标题和报告的 pdf 服务,并在单独的选项卡中以字节流的形式返回。

HTML

<div class="form-check">

<form th:action="@{/cs-report}" method="post">
<label for="form-check">Region</label>

<input class="form-check-input" type="checkbox" value="all" name="regions" id="allOffice" />
<label class="form-check-label" for="allOffice">Select All</label>

<input class="form-check-input" type="checkbox" value="region1" name="regions" id="region1"/>
<label class="form-check-label" for="region1">Region 1</label>

<input class="form-check-input" type="checkbox" value="region2" name="regions" id="region2"/>
<label class="form-check-label" for="region2">Region 2</label>

<input class="form-check-input" type="checkbox" value="region3" name= "regions" id="region3"/>
<label class="form-check-label" for="region1">Region 3</label>


<button type="submit" class="btn btn-primary">Test Checkboxes</button>
</form>

</div>

控制器

//Test the post method

@RequestMapping(value = "/cs-report", method = RequestMethod.POST)

public void printCheckboxValues(List<String> regions)

{

regions.foreach(s -> System.out.println(s));


}

如果这种方法有效,那么 repo 将类似于:

    @Query("SELECT p FROM ProjectView p WHERE p.region IN 1")
    List<ProjectView> findByRegion(@Param("regions") List<String> regions);

我认为控制器使用 name 属性来引用复选框值列表,但我不清楚如何设置控制器来执行此操作。我见过的大多数示例都将复选框绑定到它们的父对象,也许这就是需要做的。我有硬编码的复选框,因为没有那么多,我不希望数据库中的值发生变化。但是,如果我确实需要将复选框“区域”值绑定到 reportCs 实体,将不胜感激提供语法示例。

非常感谢任何其他有关方法的建议,如果代码可以概括为从多个复选框组中获取多个参数,则将获得巨大的奖励。谢谢。

【问题讨论】:

    标签: java spring-boot thymeleaf


    【解决方案1】:

    好的,复选框需要绑定到表单支持 bean。对 Thymeleaf 语法​​进行了一些修改,但这样做实际上对于将多个复选框组绑定到多个查询参数非常方便。此外,我已经意识到在模板中对复选框值进行硬编码是一个坏主意(不是松散耦合的代码,并且会产生问题)所以我的下一步是从数据库中动态获取复选框值。感谢您的阅读。

    html:

    <div class="form-check">
    
    <form action="#" th:action="@{/cs-report}" th:object="${queryDto}" method="post">
        <button type="submit" class="btn btn-primary">Get Report</button>
    
    <input class="form-check-input" type="checkbox" value="all" name="all" id="all" />
    <label class="form-check-label" for="all">Select All</label>
    
    <input class="form-check-input" type="checkbox" value="region1" name="regions" th:field="*{regions}" id="region1" />
    label class="form-check-label" for="region1">Region 1</label>
    
    <input class="form-check-input" type="checkbox" value="region2" name="regions" th:field="*{regions}" id="region2" />
    label class="form-check-label" for="region2">Region 2</label>
    
    <input class="form-check-input" type="checkbox" value="region3" name="regions" th:field="*{regions}" id="region3" />
    label class="form-check-label" for="region3">Region 3</label>
    
    </form>
    
    </div>
    

    DTO 对象:

    // Form-backing bean to hold checkbox values on post submission
    public class QueryDto {
    
    
        private List<String> regions;
        // Getter, setters
    
    

    控制器

        @PostMapping(value = "/cs-report")
        public String testCheckboxes(@ModelAttribute QueryDto queryDto) throws IOException {
    
    List<ReportDto> dtos = repository.findByRegion(queryDto.getRegions());
    
    dtos.foreach(s -> System.out.println(s.getProjectRegion()));
    }
    
    

    存储库

    @Query("SELECT p FROM ProjectView p WHERE p.region IN :regions")
        List<ProjectView> findByRegion(@Param("regions") List<String> regions);
    
    

    【讨论】:

      猜你喜欢
      • 2017-12-14
      • 1970-01-01
      • 2019-02-20
      • 1970-01-01
      • 2020-10-18
      • 1970-01-01
      • 2017-09-13
      • 1970-01-01
      • 2012-08-06
      相关资源
      最近更新 更多