Spring Boot&Thymeleaf,将变量传递给控制器

huangapple go评论94阅读模式
英文:

Spring Boot & Thymeleaf,passing variables to the controller

问题

以下是您提供的内容的翻译部分:

控制器代码:

  1. @PostMapping("/buyproduct")
  2. public String buyProduct(@RequestParam int count, @RequestParam long id) {
  3. Product product = productRepository.findById(id);
  4. int activeCount = product.getCount();
  5. if (activeCount - count < 0) {
  6. return "redirect:/";
  7. }
  8. product.setCount(activeCount -= count);
  9. productRepository.save(product);
  10. return "redirect:/buyproductsuccessful";
  11. }

HTML代码:

  1. <div class="col-12 col-md-6 col-lg-4" th:each="element : ${products}">
  2. <div class="card">
  3. <img class="card-img-top" src="https://picsum.photos/362/180" alt="Card image cap">
  4. <div class="card-body">
  5. <h5 style="text-align: center" class="card-title" th:text="${element.getName()}"></h5>
  6. <span th:text="${element.getCost()}"></span>
  7. <span th:text="${element.getCount()}"></span>
  8. ...
  9. </div>
  10. </div>
  11. <form action="#" th:action="@{/buyproduct}" th:object="${element}" method="post">
  12. <!-- Modal Header -->
  13. <div class="modal-header">
  14. <h4 class="modal-title" style="color: #368819"></h4>
  15. <button type="button" class="close" data-dismiss="modal">&times;</button>
  16. </div>
  17. <!-- Modal body -->
  18. <div class="modal-body">
  19. <div>
  20. <input type="hidden" name="id" th:value="*{getId()}">
  21. <label><b>数量</b></label><br>
  22. <input class="col-4" type="number" min="1" value="1" name="count" required><br><br>
  23. <label><b></b></label><br>
  24. <input class="col-12" type="text"><br><br>
  25. <label><b></b></label><br>
  26. <input class="col-12" type="date"><br><br>
  27. <label><b>CVV/CVC</b></label><br>
  28. <input class="col-4" type="text"><br><br>
  29. </div>
  30. </div>
  31. <!-- Modal footer -->
  32. <div class="modal-footer">
  33. <button type="submit" class="btn btn-success"></button>
  34. <button type="button" class="btn btn-danger" data-dismiss="modal"></button>
  35. </div>
  36. </form>
  37. </div>

请注意,翻译中的代码可能会存在格式不一致或错误。如果您需要准确的代码翻译,请在实际工作中进行验证。

英文:

I have a controller that processes the purchase of a product,it takes two parameters,count - the quantity of the product and id - the ID of the product that the user buys.

  1. @PostMapping(&quot;/buyproduct&quot;)
  2. public String buyProduct(@RequestParam int count,@RequestParam long id){
  3. Product product = productRepository.findById(id);
  4. int activeCount = product.getCount();
  5. if (activeCount-count&lt;0){
  6. return &quot;redirect:/&quot;;
  7. }
  8. product.setCount(activeCount-=count);
  9. productRepository.save(product);
  10. return &quot;redirect:/buyproductsuccessful&quot;;
  11. }

In index.html I have listed all available products in the database using Thymeleaf.

  1. &lt;div class=&quot;col-12 col-md-6 col-lg-4&quot; th:each=&quot;element : ${products}&quot;&gt;
  2. &lt;div class=&quot;card&quot;&gt;
  3. &lt;img class=&quot;card-img-top&quot; src=&quot;https://picsum.photos/362/180&quot; alt=&quot;Card image cap&quot;&gt;
  4. &lt;div class=&quot;card-body&quot;&gt;
  5. &lt;h5 style=&quot;text-align: center&quot; class=&quot;card-title&quot; th:text=&quot;${element.getName()}&quot;&lt;/h5&gt;
  6. &lt;span th:text=&quot;${element.getCost()}&quot;&gt;&lt;/span&gt;&lt;/p&gt;
  7. &lt;span th:text=&quot;${element.getCount()}&quot;&gt;&lt;/span&gt; &lt;/p&gt;
  8. ...

Each product has its own button,when clicked, a popup opens in which you need to enter the quantity of the purchased product and Bank data (I don't process them, I don't Need them yet), and there is also a hidden field in which I want to put the product ID so that it can be passed to the controller later.

  1. &lt;form action=&quot;#&quot; th:action=&quot;@{/buyproduct}&quot; th:object=&quot;${element}&quot; method=&quot;post&quot;&gt;
  2. &lt;!-- Modal Header --&gt;
  3. &lt;div class=&quot;modal-header&quot;&gt;
  4. &lt;h4 class=&quot;modal-title&quot; style=&quot;color: #368819&quot;&gt;&lt;/h4&gt;
  5. &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;&gt;&amp;times;&lt;/button&gt;
  6. &lt;/div&gt;
  7. &lt;!-- Modal body --&gt;
  8. &lt;div class=&quot;modal-body&quot;&gt;
  9. &lt;div&gt;
  10. &lt;input type=&quot;hidden&quot; name=&quot;id&quot; th:value=&quot;*{getId()}&quot;&gt;
  11. &lt;label&gt;&lt;b&gt;რაოდენობა&lt;/b&gt;&lt;/label&gt;&lt;br&gt;
  12. &lt;input class=&quot;col-4&quot; type=&quot;number&quot; min=&quot;1&quot; value=&quot;1&quot; name=&quot;count&quot; required&gt;&lt;br&gt;&lt;br&gt;
  13. &lt;label&gt;&lt;b&gt;&lt;/b&gt;&lt;/label&gt;&lt;br&gt;
  14. &lt;input class=&quot;col-12&quot; type=&quot;text&quot;&gt;&lt;br&gt;&lt;br&gt;
  15. &lt;label&gt;&lt;b&gt;&lt;/b&gt;&lt;/label&gt;&lt;br&gt;
  16. &lt;input class=&quot;col-12&quot; type=&quot;date&quot;&gt;&lt;br&gt;&lt;br&gt;
  17. &lt;label&gt;&lt;b&gt;CVV/CVC&lt;/b&gt;&lt;/label&gt;&lt;br&gt;
  18. &lt;input class=&quot;col-4&quot; type=&quot;text&quot;&gt;&lt;br&gt;&lt;br&gt;
  19. &lt;/div&gt;
  20. &lt;/div&gt;
  21. &lt;!-- Modal footer --&gt;
  22. &lt;div class=&quot;modal-footer&quot;&gt;
  23. &lt;button type=&quot;submit&quot; class=&quot;btn btn-success&quot;&gt;&lt;/button&gt;
  24. &lt;button type=&quot;button&quot; class=&quot;btn btn-danger&quot; data-dismiss=&quot;modal&quot;&gt;&lt;/button&gt;
  25. &lt;/div&gt;
  26. &lt;/form&gt;

But Thymeleaf passes the id of the first product every time,what is my mistake?

答案1

得分: 0

问题出在 Bootstrap 模态框作用域上。

  1. <button style="margin-left: 40%" type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">
  2. <div class="modal" id="myModal">

修复后的代码如下。

  1. <button style="margin-left: 40%" type="button" class="btn btn-success" data-toggle="modal" th:attr="data-target='&#39;#id-&#39; + ${element.getId()}'">
  2. <div class="modal" th:id="'id-' + ${element.getId()}">
英文:

The problem was with Bootstrap modal scopes.

  1. &lt;button style=&quot;margin-left: 40%&quot; type=&quot;button&quot; class=&quot;btn btn-success&quot; data-toggle=&quot;modal&quot; data-target=&quot;#myModal&quot;&gt;
  2. &lt;div class=&quot;modal&quot; id=&quot;myModal&quot;&gt;

After fix its looks like this.

  1. &lt;button style=&quot;margin-left: 40%&quot; type=&quot;button&quot; class=&quot;btn btn-success&quot; data-toggle=&quot;modal&quot; th:attr=&quot;data-target=&#39;#id-&#39; + ${element.getId()}&quot;&gt;
  2. &lt;div class=&quot;modal&quot; th:id=&quot;&#39;id-&#39; + ${element.getId()}&quot;&gt;

huangapple
  • 本文由 发表于 2020年10月21日 21:02:39
  • 转载请务必保留本文链接:https://go.coder-hub.com/64464159.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定