使用JavaScript在模态上实现窗体

Question

因此，我有两个htmls，一个是简单的表单，用于创建和编辑寄存器，带有描述和id，另一个用于列出数据库中的所有寄存器。

我的问题是，我试图将两者放在一个页面中，将我的表单放在模型上，但当反表单上的方法(保存和编辑(正在使用时，这个类的控制器会重定向URL。

有人告诉我，使用JavaScript可以解决我的问题，但我真的开始做这件事了，我不知道如何实现。我正在尝试使用百里香，如果它是相关的。

如果有人能帮忙，我很感激。

附言：英语不是我的母语，如果有任何拼写错误或难以理解，请道歉

表单：

<form  method="post" th:action="${marca.id == null} ? @{/marcas/salvar} : @{/marcas/editar} " th:object="${marca}">
<div class="form-row col-md-6">
<!--<label for="id">Codigo</label>-->
<label for="descricao">Descricao</label>
<input type="text" class="form-control" id="descricao" autofocus="autofocus"  placeholder="Marca"
th:field="*{descricao}" th:classappend="${#fields.hasErrors('descricao')} ? 'is-invalid'"/>
<div class="invalid-feedback" >
<span th:errors="*{descricao}"></span>
</div>
<br/>
</div>
<input type="hidden" id="id" th:field="*{id}"/>
<br/>
<button type="submit" class="btn btn-primary btn-sm">Salvar</button>
</form>

列表：

<div class="container" id="listagem">
<div th:replace="fragments/alert"></div>
<div class="table-responsive">
<table class="table table-striped table-hover table-sm">
<thead>
<tr>
<th>Cod.</th>
<th>Descricao</th>
<th>Acao</th>
</tr>
</thead>
<tbody>
<tr th:each="m : ${marcas}">
<td th:text="${m.id}"></td>
<td th:text="${m.descricao}"></td>
<td><a class="btn btn-info btn-sm" th:href="@{/marcas/editar/{id} (id=${m.id})}" role="button">
<span class="oi oi-pencil" title="Editar" aria-hidden="true"></span>
</a>
<a class="btn btn-danger btn-sm" th:href="@{/marcas/excluir/{id} (id=${m.id})}" role="button" >
<span class="oi oi-circle-x" title="Excluir"></span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>

控制器(如果需要(

@Controller
@RequestMapping("/marcas")
public class MarcaController {
@Autowired
private MarcaService service;
@GetMapping("/cadastrar")
public String cadastrar(ModelMap model){
model.addAttribute("marca", new Marca());
return "/marca/form";
}
@GetMapping("/listar")
public String listar(ModelMap model){
model.addAttribute("marcas", service.buscarTodos());
return "/marca/list";
}
@PostMapping("/salvar")
public String salvar(@Valid Marca marca, BindingResult result, RedirectAttributes attr) {
if (result.hasErrors()){
return "/marca/form";
}
service.salvar(marca);
attr.addFlashAttribute("success", "Marca inserida com sucesso!");
return "redirect:/marcas/listar";
}
@GetMapping("/editar/{id}")
public String preEditar(@PathVariable("id") Long id, ModelMap model) {
model.addAttribute("marca", service.buscarPorId(id));
return "/marca/form";
}
@PostMapping("/editar")
public String editar(@Valid Marca marca, BindingResult result, RedirectAttributes attr) {
if (result.hasErrors()){
return "/marca/form";
}
service.editar(marca);
attr.addFlashAttribute("success", "Marca editada com sucesso!");
return "redirect:/marcas/listar";
}
@GetMapping("/excluir/{id}")
public String excluir(@PathVariable("id") Long id, RedirectAttributes attr) {
service.excluir(id);
attr.addFlashAttribute("success", "Marca excluida com sucesso");
return "redirect:/marcas/listar";
}

}

Answer 1

由于您使用Bootstrap，因此很容易实现。你所要做的就是为你的按钮和模态设置一些标签。以下是您要做的操作。更改以下按钮的编辑<a>。

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" th:attr="data-target=${m.id}">Editar</button>

我们在最后一行代码中所做的是使用Thymelaf动态属性动态设置data-target。

现在，您所需要做的就是将表单添加到以下<div>中。需要为每个帖子创建这个<div>，并且每个帖子都必须有一个不同的id，也就是说，我们使用Thymelaf和th:id动态设置它们。

<div class="modal fade" th:id="${m.id}" role="dialog">
<form  method="post" th:action="@{/marcas/editar}" th:object="${marca}">
...
</form>
</div>