使用 Sprint Boot 和 Thymeleaf 将复选框映射到列表 [英] Map checkboxes to List using Sprint Boot and Thymeleaf

问题描述

我有一个使用 Thymeleaf 的 Spring Boot 1.3.0 应用.我在页面上有一个表单，允许用户上传文件.我想添加一些复选框也返回到我的控制器.

I have a Spring Boot 1.3.0 app that uses Thymeleaf. I have a form on a page that allows a user to upload a file. I would like to add some checkboxes also return back to my controller.

我还没有找到一个很好的例子，如何以这种方式做复选框.我想我必须在我的模型中定义一个列表，并让 Thymeleaf 显示所有复选框，但我一直无法使其工作.

I have not found a good example how to do checkboxes this way. I think I have to define a list in my model, and let Thymeleaf display all the check boxes, but I have not been able to make it work.

这是我的控制器:

@Controller
public class CustomerDataController {

    private static final String SEARCH_TYPES = "searchTypes";

    @RequestMapping(value = "/upload", method = RequestMethod.GET)
    public String displayUpload(Model model) {
        initModel( model );
        return "upload";
    }

    private void initModel(Model model) {
        model.addAttribute( UPLOAD, null );
        // the values to display as check box title & values
        model.addAttribute(SEARCH_TYPES, Arrays.asList("Search A", "Search B"));
        // list to store what the user checks on the UI 
        model.addAttribute("searchValue", new ArrayList<>());
        model.addAttribute( customerResults );
    }

    @Transactional
    @RequestMapping(value = "/userFile", method = RequestMethod.POST)
    public String handleFileUpload(@RequestParam("myFile") MultipartFile file, Model model, Authentication authentication) {

    // looking to get searchValue list, but not sure this is right
    }
}

这里是我的 html 的重要部分:

And here the important bits of my html:

<form onsubmit="return validate(this)" action="userFile"
      th:action="@{/userFile}" method="post" enctype="multipart/form-data">
    <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
    <ul>
        <li th:each="search : ${searchTypes}">
            <input type="checkbox" th:field="*{searchValue}" th:value="${search}"/>
            <label th:text="#{${search}}"></label>
        </li>
    </ul>
    <p><input type="file" name="myFile" id="myFile"/></p>
    <p><input type="submit" class="btn btn-success" value="Submit Customer Data"/></p>
    <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
</form>

复选框列表正确构建，但是当我选择其中任何一个时，我的控制器模型中没有显示任何值.

The list of checkboxes build properly, but when I select any of them, no values show up in the model of my controller.

有人可以指出我正确的方向，将选定的复选框列表返回给我的控制器吗?

Can someone please point me in the right direction to return a list of selected checkboxes to my controller?

推荐答案

我已经修复了你的代码.

I have fixed your code.

控制器

我使用 initValues() 方法用值填充 model.

I use initValues() method to populate model with values.

我还添加了 @RequestParam List;handleFileUpload() 方法的 searchValues 参数.

Also I added @RequestParam List<String> searchValues parameter to handleFileUpload() method.

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;

import java.util.Arrays;
import java.util.List;

@Controller
public class CustomerDataController {

    private static final String SEARCH_TYPES = "searchTypes";

    @ModelAttribute
    public void initValues(Model model) {
        model.addAttribute(SEARCH_TYPES, Arrays.asList("Search A", "Search B"));
    }

    @RequestMapping(value = "/upload", method = RequestMethod.GET)
    public String displayUpload() {
        return "upload";
    }

    @RequestMapping(value = "/userFile", method = RequestMethod.POST)
    public String handleFileUpload(@RequestParam("myFile") MultipartFile file,
                                   @RequestParam List<String> searchValues) {

        // here you can use searchValues and file
        return "result";
    }
}

<小时>

upload.html

我将 <label th:text="#{${search}}"></label> 固定为 <label th:text="${search}"></label>.

我还修复了

和 标签.

Also I fixed <form> and <input type="checkbox"> tags.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      lang="en"
      xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8"/>
    <title>Upload</title>
</head>
<body>

<form th:action="@{/userFile}" method="post" enctype="multipart/form-data">
    <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
    <ul>
        <li th:each="search : ${searchTypes}">
            <input type="checkbox" name="searchValues" th:value="${search}"/>
            <label th:text="${search}"></label>
        </li>
    </ul>
    <p><input type="file" name="myFile" id="myFile"/></p>
    <p><input type="submit" class="btn btn-success" value="Submit Customer Data"/></p>
    <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
</form>

</body>
</html>

这篇关于使用 Sprint Boot 和 Thymeleaf 将复选框映射到列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！