Java 使用Spring和Thymeleaf进行编辑

我正在尝试编辑一个类别。这是通过点击编辑按钮并显示一个弹出窗口来完成的。Java代码是

@GetMapping(path = "/category/edit/{id}")
    public String showEditUserCategoryForm(@PathVariable("id") Long id, Model model) {
        Optional<UserCategory> selectedCategory = userCategoryService.findById(id);
        model.addAttribute("newCategory", new UserCategoryForm());
        model.addAttribute("selectedCategory", selectedCategory.get());
        return "redirect:/categories";
    }

    @PostMapping(path = "/category/edit/{id}/complete")
    public String submitEditedUserCategoryForm(@PathVariable("id") Long id,
                                               @ModelAttribute("newCategory")
                                               @Valid UserCategoryForm userCategoryForm,
                                               @SessionAttribute("selectedCategory")
                                                           UserCategory selectedCategory,
                                               @SessionAttribute User user,
                                               BindingResult bindingResult,
                                               Model model) {
        userCategoryForm.setName(selectedCategory.getName());
        String newName = userCategoryForm.getName();
        userCategoryService.updateCategoryNameById(newName, selectedCategory.getId());
        return "redirect:/categories";
    }

弹出窗口的HTML代码是

<div id="ex4" class="modal">
        <h3 class="display-4">Update Category</h3>
        <form th:action="@{/category/edit/}" th:object="${newCategory}" method="post">
            <div class="form-group">
                <label th:for="name">Category Name</label>
                <input type="text"
                       th:field="*{name}"
                       placeholder="Category Name"
                       class="form-control"
                       aria-describedBy="Enter category name" />
            </div>
            <button type="submit" id="submit" class="btn btn-outline-primary">
                Update category name
            </button>
        </form>
    </div>

和编辑

<a class="mdi mdi-pencil" th:href="@{/category/edit/{id} (id=${category.id})}"
                 href="#ex4" rel="modal:open"></a>

---

问题是我不知道是使用ex4还是在上面的锚标记中使用编辑链接。另外，表单操作，我希望类别的ID是控制器中的ID，但它不允许这样做。请告知我需要做哪些更改以及任何其他代码改进。

我不得不使用类似的东西。这就是我所做的：

<div class="modal fade" id="editUserModal" tabindex="-1" role="dialog" aria-labelledby="editUserModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editUserModalLabel">Edit user</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form th:action="@{/administration/appuser/update}" th:object="${userData}" method='POST'>
                    <div class="form-group">
                        <label for="userId" class="col-form-label">Id</label>
                        <input type="text" class="form-control" id="userId" th:field="*{userId}" readonly>
                    </div>
                    <div class="form-group">
                        <label for="username" class="col-form-label">Username</label>
                        <input type="text" class="form-control" id="userName" th:field="*{userName}" required>
                    </div>
                    <div class="form-group">
                        <label for="password" class="col-form-label">New passowrd</label>
                        <input type="text" class="form-control" th:field="*{password}" id="password" required>
                    </div>
                    <div class="form-group">
                        <label for="active" class="col-form-label">Active</label>
                        <select class="form-control" th:field="*{active}" id="active">
                            <option value="0">Disabled</option>
                            <option value="1" selected>Active</option>
                        </select>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

希望就是你想要的

问候,，

---

穆罕默德

我不得不使用类似的东西。这就是我所做的：

<div class="modal fade" id="editUserModal" tabindex="-1" role="dialog" aria-labelledby="editUserModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editUserModalLabel">Edit user</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form th:action="@{/administration/appuser/update}" th:object="${userData}" method='POST'>
                    <div class="form-group">
                        <label for="userId" class="col-form-label">Id</label>
                        <input type="text" class="form-control" id="userId" th:field="*{userId}" readonly>
                    </div>
                    <div class="form-group">
                        <label for="username" class="col-form-label">Username</label>
                        <input type="text" class="form-control" id="userName" th:field="*{userName}" required>
                    </div>
                    <div class="form-group">
                        <label for="password" class="col-form-label">New passowrd</label>
                        <input type="text" class="form-control" th:field="*{password}" id="password" required>
                    </div>
                    <div class="form-group">
                        <label for="active" class="col-form-label">Active</label>
                        <select class="form-control" th:field="*{active}" id="active">
                            <option value="0">Disabled</option>
                            <option value="1" selected>Active</option>
                        </select>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

希望就是你想要的

问候,，

---

Mohamad

代码中有许多内容需要更新。但在此之前，让我澄清一些情态动词

Modals是客户端组件，这意味着没有向服务器发送显示/关闭Modals的请求。也就是说，它们始终是父页面的一部分，父页面由服务器提供服务

让我列出解决这个问题的步骤：

包含modal的父页面-我们称之为category-detail.html我在这里使用的是bootstrap4版本 处理表单提交以进行编辑类别的控制器方法： 在上面的HTML中，我们看到表单元素绑定到action/category/${id}并使用HTTP方法POST。因此，我们需要在控制器中创建一个方法来处理此URL：

---

现在，您已经实现了完整的流程。

代码中有许多内容需要更新。但在此之前，让我澄清一些情态动词

Modals是客户端组件，这意味着没有向服务器发送显示/关闭Modals的请求。也就是说，它们始终是父页面的一部分，父页面由服务器提供服务

让我列出解决这个问题的步骤：

包含modal的父页面-我们称之为category-detail.html我在这里使用的是bootstrap4版本 处理表单提交以进行编辑类别的控制器方法： 在上面的HTML中，我们看到表单元素绑定到action/category/${id}并使用HTTP方法POST。因此，我们需要在控制器中创建一个方法来处理此URL： 现在您已经实现了完整的流程

function editModalContent(t, username, active, id) {

    var modal = $('#editUserModal');

    // change modal content
    modal.find('#userId').val(id);
    modal.find('#userName').val(username);

}

<h1>[[|${category.name}|]]</h1>
<button type="button" class="btn btn-primary"
        data-toggle="modal" data-target="#editCategoryModal">
    Edit Category
</button>

<!-- Edit category modal  -->
<div class="modal fade" id="editCategoryModal" tabindex="-1"
     role="dialog" aria-labelledby="editCategoryModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editCategoryModalLabel">Edit Category</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form th:object="${category}" th:action="@{|/category/*{id}|}" method="post">
                    <div class="form-group">
                        <label for="catName">Name</label>
                        <input type="text" class="form-control" id="catName"
                               placeholder="Category Name" name="name" th:value="*{name}">
                    </div>
                    <button type="submit" class="btn btn-primary">Save Category</button>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div><!-- End of Modal -->

String categoryName = "Information technology";

@GetMapping("/category/{categoryId}")
public String category(@PathVariable Long categoryId, ModelMap modelMap){
    modelMap.put("categoryId", categoryId);
    //try to get the category detail object from DB
    Category category = new Category();
    category.setId(categoryId);
    category.setName(categoryName);

    modelMap.put("category", category);
    return "category-detail";
}

@PostMapping("/category/{categoryId}")
public String categoryEdit(
    @PathVariable Long categoryId,
    @RequestParam(name = "name") String categoryName){

    log.info("Category Id {}, Category Name {}", 
        categoryId, categoryName);
    this.categoryName = categoryName;
    //you can update the database here
    return "redirect:/category/"+categoryId;
}