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

时间:2018-03-12 23:03:49

标签: spring-mvc spring-boot thymeleaf

这是帮助理解它的表格

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>

1 个答案:

答案 0 :(得分:0)

你必须考虑很少的事情来实现这一点。

在您的表单上,加上# start event 14:09:10: type: timer, event_type: start record 14:09:10: time_from_course: 0, ... ... record 14:09:22: time_from_course: 12,... event 14:15:13: type: timer, event_type: stop event 14:20:07: type: timer, event_type: start record 14:20:08: time_from_course: 13,... ... event 15:45:39: type: timer, event_type: stop # end ,一旦您提交表单,它就会将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