如何将包含复选框的表单数据发送到弹簧控制器

Question

这是帮助理解它的表格

https://i.imgur.com/KRdy6ln.png

带有该表单的 html 页面的模型数据填充了下面的控制器方法。因此每个复选框都指代放置在模型中的音乐或广告对象。如何将选定复选框的对象发送到弹簧控制器?html也在下面

@Autowired
AdvertisementService advertisementService;
@Autowired
MusicService musicService;
@RequestMapping("/web/createSchedule")
public String createSchedule(Model model) {
    //display the create schedule page
    //get logged in user
    Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
    User user = (User) authentication.getPrincipal();
    //add advertisements to model
    List<Advertisement> advertisements =advertisementService.findByUserGroup_IdOrderByDateAddedDesc(user.getUserGroup().getId());
    model.addAttribute("advertisements",advertisements);
    List<Music> musics = musicService.findAll();
    model.addAttribute("musics",musics);
    return "createschedule";
}

HTML

<form th:action="@{/web/createschedule}" method="post">
<div class="form-group">
    <label for="inputDescription">Enter the description of the schedule(eg week schedule 10/03/18--17/03/18)</label>
    <input type="text"  class="form-control" name = "inputDescription" id="inputDescription" placeholder="description"></input>
</div>
<div class="form-group">
    <div class="container">
        <div class="row">
            <div class="col-sm" style=" height: 200px; width: 600px; overflow-y: scroll;">
                <h3>Pick the advertisements you want this schedule to have</h3>
                <div  th:each="advertisement : ${advertisements}">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="defaultCheck1"/>
                        <label th:text="${advertisement.description + ' Added:' +advertisement.dateAdded} " class="form-check-label" for="defaultCheck1"/>
                    </div>
                </div>
            </div>
            <div class="col-sm" style=" height: 200px; width: 600px; overflow-y: scroll;">
                <h3>Pick the music you want this schedule to have</h3>
                <div  th:each="music : ${musics}">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="defaultCheck2"/>
                        <label th:text="${music.description} " class="form-check-label" for="defaultCheck2"/>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </div>
<p>You select when you want your advertisements to play in the next step</p>
<button type="submit" class="btn btn-primary">Create schedule</button>

 </form>

Answer 1

你必须考虑一些事情来实现这一点。

在您的表单中包含th:object，一旦您提交表单，它就会将yourObject 返回给控制器。

<form th:action="@{/web/createschedule}"  th:object="${yourObject}" method="post">

您需要在复选框中包含th:field

 <input class="form-check-input" type="checkbox" th:field="*{checkedItems}" th:value="this_value_will_map_to_your_modal_Object" id="defaultCheck1"/>

现在在您的控制器上，您需要 @ModelAttribute 注释，它将 yourObject 映射到 YourModel 对象。

public String createSchedule(@ModelAttribute YourModel model)

确保使用适当的参数定义YourModel 类。

public class YourModel{
  private List<String> checkedItems;
 //other parameters as needed

 //getters setters

}