html - 如何使用 thymeleaf 或 Jquery 将参数从模态表单传递到 Spring Controller?
问题描述
任何人都可以帮助我吗?我用表格制作了一个模态来更新数据库。我从 Mysql DB 接收数据,但是当我单击提交时,模式关闭,但新参数不会传递给 Spring 控制器......错误在哪里?
型号类:
@Entity
@Table(name = "generi")
public class Genere {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private int idGenere;
@Column
private String nomeGenere;
public Genere () {}
/**
* @param idGenere
* @param nomeGenere
*/
public Genere(int idGenere, String nomeGenere) {
setIdGenere(idGenere);
setNomeGenere(nomeGenere);
}
...and GETTERS and SETTERS
服务等级
@Service
public class GenereService {
@Autowired
private GenereRepository genereRepository;
public List<Genere> getGeneri(){
List<Genere> listGeneri = new ArrayList<Genere>();
genereRepository.findAll().forEach(listGeneri::add);
return listGeneri;
}
public void inserisciNuovoGenere(Genere genere) {
genereRepository.save(genere);
}
public void cancellaGenere(int idGenere) {
if (genereRepository.findById(idGenere) != null) {
genereRepository.deleteById(idGenere);
}
}
public void updateGenere (Genere genere) {
if (genereRepository.findById(genere.getIdGenere()) != null )
genereRepository.save(genere);
}
控制器
@Controller
public class GenereController {
@Autowired
private GenereService genereService;
@GetMapping("/generi")
public String getGeneri (Model model) {
model.addAttribute("newGen", new Genere());
model.addAttribute("generi", genereService.getGeneri());
return "generi";
}
@PostMapping("/generi")
public String postGeneriInsert(@ModelAttribute (name = "newGen") Genere newGen) {
genereService.inserisciNuovoGenere(newGen);
return "redirect:/generi";
}
@GetMapping("/generi/delete/{idGenere}")
public String getGenereDelete (@PathVariable int idGenere) {
genereService.cancellaGenere(idGenere);
return "redirect:/generi";
}
@PostMapping("/updateGen")
public String postUpdateGenere(@ModelAttribute Genere genere) {
genereService.updateGenere(genere);
return "redirect:/generi";
}
通用的.html
<body>
<th:block th:include="fragments/update_scripts.html"></th:block>
<div class="container">
<div th:replace="fragments/common :: Logout"></div>
</div> <!-- end container -->
<div class="container login">
<h3>Gestione Generi</h3>
<form th:object="${newGen}" th:action="@{/generi}" method="post">
<div class="form-group">
<label for="gen">Aggiungi un nuovo genere</label>
<input type="text" id="gen" class="form-control" th:field="*{nomeGenere}" required="required">
</div>
<input type="submit" class="btn btn-primary" value="Aggiungi">
</form>
<br><br>
<table class="table table-stripped">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Genere</th>
<th></th>
</tr>
</thead>
<tbody>
<tr th:each="genere : ${generi}">
<td th:text="${genere.idGenere}"></td>
<td th:text="${genere.nomeGenere}"></td>
<td>
<button type="button"
class="btn btn-info btn-sm"
data-toggle="modal"
data-target="#updateGen"
th:attr="data-id=${genere.idGenere},
data-lab=${genere.nomeGenere}">Modifica</button>
<button type="button"
class="btn btn-outline-danger btn-sm"
data-toggle="modal"
data-target="#deleteConfirm"
th:attr="data-id=${genere.idGenere},
data-lab=${genere.nomeGenere}">Elimina</button>
</td>
</tr>
</tbody>
</table>
</div>
<div th:replace="fragments/common :: deleteConfirm"></div>
<div th:replace="fragments/update_modals :: updateGen"></div>
<div th:replace="fragments/common :: bootstrap"></div>
</body>
update_modal.html
<!-- modal Update Genere -->
<div class="modal fade" id="updateGen" tabindex="-1" th:fragment="updateGen" aria-labelledby="updGenModal">
<div class="modal-dialog" >
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="updGenModal">Modifica il Genere</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div>
<p id="Prova">Modal di Prova: </p>
</div>
<form th:action="@{/updateGen}" th:object="${genere}" method="post">
<input type="hidden" class="form-control" id="idGen" name="idGenere" value=""/>
<div class="form-group">
<label for="modGen" class="col-form-label">Genere</label>
<input type="text" class="form-control" id="modGen" name="nomeGenere" th:field="*{nomeGenere}" value="" required="required" />
</div>
</form>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-outline-warning" id="btnUpdGen" value="Aggiorna" data-dismiss="modal" />
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal" >Annulla</button>
</div>
</div>
</div>
</div>
<!-- End modal Update Genere -->
更新脚本
<script >
$(document).ready(function() {
$('#updateGen').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var id = button.data('id');
var label = button.data('lab');
var modal = $(this);
$('#Prova').html('Modifica -> ' + label);
modal.find('.modal-body #modGen').val(label);
})
});
</script>
就是这样......对不起我的长篇文章,如果我在创建它时犯了一些错误......但这是我第一次在 StackOverflow 上......
解决方案
推荐阅读
- docker - 如何根据图像名称 docker 删除所有容器
- mongodb - Mongoose Geolocation,获取按属于不同mongoose模型的位置订购的产品
- vim - 如何解决 ~/. vimrc
- r - 将 PCA 输出转换为 R 中的数据帧
- matlab - 在 Matlab Appdesigner 中围绕一组组件绘制边框
- amazon-ec2 - 具有不同 Internet 访问可用性的两个相似实例
- fortran - 这是用什么“语言”写的?(从 1994 年开始) - 是 Fortran 吗?
- html - 尝试设置 css 面板,并在缩放时惨遭失败:(
- java - 从排序的 LinkedList Relation b/w "slow" 和 "head" 中删除重复项
- python - 'str' 对象没有属性 'decode' & “write() 参数必须是 str,而不是字节”