Question

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

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

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

如果有人可以帮助，我会感激不尽。

P.S。英语不是我的母语，对不起，如果有错字或难以理解

表格：

<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>

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

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

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

使用JavaScript在模态上实现表单

1 个答案: