使用 Spring MVC 和 Thymeleaf 渲染部分答案

【问题标题】：Rending Partials with Spring MVC and Thymeleaf使用 Spring MVC 和 Thymeleaf 渲染部分
【发布时间】：2016-01-22 04:40:09
【问题描述】：

我正在努力寻找可以渲染部分的正确实现。目前，我想在提交发布操作时渲染/更新部分内容。

由于我来自 .NET 背景，我发现在 Spring MVC 中非常困难。

使用 ASP.NET MVC，我可以拥有一个局部控制器，它会返回一个可以通过 Ajax 调用的局部视图。在 Spring MVC 中，我似乎需要 Spring Webflow，而且设置 thymeleaf 和应用程序的其余部分看起来很乱。除了需要在 xml 中编写 Spring Webflow。我目前的宠物项目纯粹是在 Java Config 中

有没有更高效的选择？也许使用诸如异步控制器之类的东西，或者可以模仿 ASP.NET 使用我喜欢的部分的东西。如果可能的话。与 Razor 甚至 Laravels Blade 引擎相比，我真的发现 Java 视图引擎真的很弱。 Thymleaf 肯定是在朝着正确的方向前进，但是它们管理部分和模板并不清楚和混乱。

我可能不知道它有多么简单，因此我想要一个很好的权威指南来说明如何设置它。我对在视图中使用 Spring MVC 并不是很有信心。

====================

编辑

给出一些我想要实现的代码示例。

主视图：

    <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="layout/master">
<head>
    <meta charset="UTF-8"/>
    <title>Manage Account</title>
</head>
<body>
<div layout:fragment="header"></div>

<div th:object="${account}" class="col-md-12" id="content" layout:fragment="body">

    <section id="manage" class="col-md-8 col-md-offset-3">
        <form id="manageForm" action="#" th:object="${account}" th:action="@{/account/user/account/{id}/manage/update(id=${account.getAccount().getId()})}" method="post">
            <div id="accountDisplay" th:replace="account/accountDisplay">

            </div>

            <div class="form-group">
                <button id="submit" class="col-md-2 btn btn-primary form-control" th:type="submit" value="Submit">Submit</button>
            </div>
        </form>
    </section>
    <div>

    </div>

    <script>
        $().ready(function () {
            var form = $("#mangeForm").serialize();

            $('#submit').click(function (e) {
                e.preventDefault();
                acId = $('#acId').val();
                updateView(form, acId);
            });

            function updateView(form, acId) {
                $.ajax({
                    url: '/user/account/' + acId + '/manage/update',
                    data: form /* add other additional parameters */,
                    cache: false,
                    dataType: "json",
                    type: "POST",
                    success: function (data, textStatus, XMLHttpRequest) {

                        alert("success");
                    }
                });
            }
        });
    </script>
</div>
</body>
</html>

这是调用部分的“父”页面

部分

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<body>
    <div id="accountDisplay" th:fragment="accountDisplay" class="col-md-6">

        <input id="acId" class="form-control" type="hidden" th:field="${account.account.id}"/>
        <div class="form-group">
            <span>Name :</span> <span th:text="${account.getAccount().getName()}"></span>
        </div>

        <div class="form-group">
            <label class="control-label" th:text="${account.getAccount().getBalance()}">Balance :</label>
            <label class="control-label" th:for="${account.amount}">Amount :</label>
            <input class="form-control" type="text" th:field="*{amount}"/>
        </div>

    </div>
</body>
</html>

现在这个部分确实被渲染了，问题是当我尝试通过上面显示的 ajax 调用进行调用时。

被调用的控制器方法是：

   @RequestMapping(value = "/user/account/{id}/manage/update", method = RequestMethod.POST)
    public String postTransaction(@ModelAttribute("account") final OperationObject account, BindingResult result, HttpServletRequest request) {
        if (result.hasErrors()) {
            return "redirect:/account/mange";
        }
        else {
            System.out.println("New Thread Established");
                    Account thisAccount = accountService.findById(account.getAccount().getId());
                    thisAccount.withdraw(account.getAmount());
                    accountService.update(thisAccount);

                    return "redirect:account/accountDisplay";
        }
    }

    @RequestMapping(value = "/user/account/{id}/manage/update", method = RequestMethod.GET)
    public String updateManageView(@PathVariable Long id, Model model) {

        Account account = accountService.findById(id);
        model.addAttribute("Account", account);
        return "account/accountDisplay";
    }

我怎样才能让这个设置工作？我错过了什么，我应该使用哪些布局/片段？我希望这能提供一些细节，给我一个正确的帮助。

【问题讨论】：

标签： spring spring-mvc thymeleaf spring-webflow partials

【解决方案1】：

在我进一步解释之前，您必须了解百里香布局的概念。 Thymeleaf 默认支持两种布局选项。有关更多信息，请参阅文档http://www.thymeleaf.org/doc/articles/layouts.html

包含样式的布局

解决方案：创建一个新视图并使用th:include跳过以包含页眉和页脚

分层式布局 - 例如，在 ASP.net 中，您有母版页布局。

解决方案：在根节点中创建一个不包含layout:decorator="_layout/some_layout" 的新视图。

我相信您正在使用上述之一。

无论如何，如果您需要为 ajax 请求加载部分视图以获取渲染，您必须通过 controller 中的此类请求发送它。

@RequestMapping(value = "/some_action")
public String ajaxAction(..){
    return "new_view_name_with_layout";
}

@RequestMapping(value = "/some_action", headers = "x-requested-with=XMLHttpRequest")
public String ajaxAction(..){
    return "new_view_name_without_layout";
}

【讨论】：