Question

我正在努力寻找能够呈现部分内容的正确实现。目前，我想在提交后期操作时呈现/更新部分内容。

当我来自.NET背景时，我发现它在Spring MVC中非常困难。

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

是否有更高效的替代方案？也许使用类似异步控制器的东西，或者可以模仿ASP.NET使用我喜欢的部分内容的东西。如果可能的话。我真的发现Java视图引擎与Razor甚至是Laravels Blade引擎相比都非常弱。 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>

这是＆＃34;父母＆＃34;调用部分

的页面

部分

<!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";
    }

如何让这个设置正常工作？我想念什么，我应该使用哪些布局/片段？我希望这能提供一些细节，以便给予我正确的帮助。

Answer 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";
}

使用Spring MVC和Thymeleaf重新部分

1 个答案: