title: Rending Partials with Spring MVC and Thymeleaf
body: <p>I am struggling to find an right implementation that can render partials. Currently, I want to render/update a partial when post actions is submitted. </p>
  
  <p>As I come from .NET background, I find it extremely difficult in Spring MVC.</p>
  
  <p>With ASP.NET MVC I can have a partial controller that would return me a partial view that I can call through Ajax.
  In Spring MVC it seems that I need Spring Webflow and it looks like a mess to set up with thymeleaf and the rest of the application. On top of the need of writing Spring Webflow in xml. 
  My current pet project is purely in Java Config</p>
  
  <p>Is there an more productive alternative? Maybe using something like asynchronous controllers, or something that can mimic ASP.NET use of partials that I am comfortable with. If possible.
  I really find Java view engines to be really weak compared to Razor, or even Laravels Blade engine. Thymleaf is definitely going in the right direction, but it's not clear and messy with they manage partials and templates.</p>
  
  <p>I might not be aware of how simple it is, hence I would like a good definitive guide to how to set it up. I am not really confident with using Spring MVC in the view.</p>
  
  <p>===================</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>To give some code example of what I am trying to achieve. </p>
  
  <p><em>Main view:</em></p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html xmlns:th="http://www.thymeleaf.org" lang="en"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        layout:decorator="layout/master"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"/&gt;
      &lt;title&gt;Manage Account&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div layout:fragment="header"&gt;&lt;/div&gt;
  
  &lt;div th:object="${account}" class="col-md-12" id="content" layout:fragment="body"&gt;
  
      &lt;section id="manage" class="col-md-8 col-md-offset-3"&gt;
          &lt;form id="manageForm" action="#" th:object="${account}" th:action="@{/account/user/account/{id}/manage/update(id=${account.getAccount().getId()})}" method="post"&gt;
              &lt;div id="accountDisplay" th:replace="account/accountDisplay"&gt;
  
              &lt;/div&gt;
  
              &lt;div class="form-group"&gt;
                  &lt;button id="submit" class="col-md-2 btn btn-primary form-control" th:type="submit" value="Submit"&gt;Submit&lt;/button&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/section&gt;
      &lt;div&gt;
  
      &lt;/div&gt;
  
      &lt;script&gt;
          $().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");
                      }
                  });
              }
          });
      &lt;/script&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is the "parent" page which is calling the partial</p>
  
  <p><em>Partial</em></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns:th="http://www.thymeleaf.org"&gt;
  
  &lt;body&gt;
      &lt;div id="accountDisplay" th:fragment="accountDisplay" class="col-md-6"&gt;
  
          &lt;input id="acId" class="form-control" type="hidden" th:field="${account.account.id}"/&gt;
          &lt;div class="form-group"&gt;
              &lt;span&gt;Name :&lt;/span&gt; &lt;span th:text="${account.getAccount().getName()}"&gt;&lt;/span&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;label class="control-label" th:text="${account.getAccount().getBalance()}"&gt;Balance :&lt;/label&gt;
              &lt;label class="control-label" th:for="${account.amount}"&gt;Amount :&lt;/label&gt;
              &lt;input class="form-control" type="text" th:field="*{amount}"/&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Now this partial does gets rendered, the issue is when I try to call through an ajax call shown above.</p>
  
  <p>The controller methods that are being called are:</p>
  
  <pre><code>   @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";
      }
  </code></pre>
  
  <p>How can I get this set up to work? What do I miss, and which layouts/fragments should I use? 
  I hope this gives some details to give me a right assistance.</p>