Thiết kế website giá rẻ

Question

The context:
I’ve been developing a Proof of Concept application (for the sake of learning) with Java 17, Spring Framework, and in the front end HTML, CSS and Thymeleaf. The inventory view shows each Item object (Which has attributes like, very importantly, the Unique Identifier, price, name, discount, etc…) in my “Data Base” (ArrayList, for the sake of simplicity), along with the update button at the right side of every single Item. In case the Update button is pressed, consequently the user is redirected to a view item_form.html which posess a form with prepopulated information from the respective item the user desired to update. The way I know in the front end if such form was accessed via the inventory view it’s because the Spring Model might (or might not) contain an id key (Which is the Unique Identifier of the Item object my StoreController sent). I find hard to illustrate my idea so I’ll be showing the necessary code to reach my problem:

This is my inventory view:

<html xmlns:th="http://www.thymeleaf.org">
    <head> 
        <link th:href="@{/inventory-stylesheet.css}" rel="stylesheet"> 
    </head>    
    <body>
        <div class="topnav">
            <a  th:href="@{/}">HOME</a>
            <a  th:href="@{/form}">FORM</a>
            <a class="active" th:href="@{/inventory}">INVENTORY</a>
        </div>
        <div class="alert success" th:if="${submissionState} == true">
          <strong>Item submission was successfull!</strong>
        </div> 
        <div class="container">
           <table>
               <tr class="head">
               <th>UUID</th>
               <th>Product Name</th>
               <th>Category</th>
               <th>Price</th>
               <th>Discount</th>
               <th>Order Date</th>
               <th> </th>
              </tr>
              <tr th:each="item: ${storedItems}">
                 <td th:text="${item.id}"></td>
                 <td th:text="${item.name}"></td>
                 <td th:text="${item.category}"></td>
                 <td type="currency" th:text="${item.price}"></td>
                 <td type="percentage" th:text="${item.discount}"></td>
                 <td type="date" th:text="${#dates.format(item.date, 'yyyy-MM-dd')}"></td>
                 <td>
                    <a role="button" style="color:white; background-color: #3333f0" class="table-button" th:href="@{/getUpdateView(id=${item.id})}">Update</a>
                 </td>
              </tr>
           </table>
        </div>
   </body>
</html>

This is the handler method mapped to /getUpdateView(id=${item.id})

@GetMapping("/getUpdateView")
    public String getUpdateView(Model model, @RequestParam String id) {
        Item item = itemService.getObjectById(id);
        logger.log(Level.INFO, "Attempting to update " + item.toString());
        model.addAttribute("categories", Constants.CATEGORIES);
        model.addAttribute("item", item);
        model.addAttribute("id", id);
        return "item_form";
    }

This is the item_form.html view which posess the form I’m talking about:

<html xmlns:th="http://www.thymeleaf.org">
    <head> 
        <link th:href="@{/form-stylesheet.css}" rel="stylesheet"> 
    </head>    
    <body>
        <div class="topnav">
            <a th:href="@{/}">HOME</a>
            <a class="active" th:href="@{/form}">FORM</a>
            <a th:href="@{/inventory}">INVENTORY</a>
        </div>
        <div class="container">
            <h2> Item submission </h2>
            <form method="post" th:object="${item}" th:action="@{(#model.containsKey('id') ? '/submitItem(id=${model.id})' : '/submitItem')}">
                <p th:errors="*{category}" style="color:red"></p>
                <select class="select" th:field="*{category}">
                    <option style="color:rgb(90, 90, 255)" value="">Choose Category</option>
                    <option th:each="category: ${categories}" th:text="${category}" th:value="${category}"> Placeholder </option>
                </select>
                <p>Name</p>
                <p th:errors="*{name}" style="color:red"></p>
                <input type="text" placeholder="Name" th:field="*{name}">
                <p>Price</p>
                <p th:errors="*{price}" style="color:red"></p>
                <input type="text" placeholder="Price" th:field="*{price}">
                <p>Discount (0% - 100%)</p>
                <p th:errors="*{discount}" style="color:red"></p>
                <input type="text" placeholder="Discount" th:field="*{discount}">
                <p>Order Date</p>
                <p th:errors="*{date}" style="color:red"></p>
                <input type="date" style="color:black" th:field="*{date}">
                <input type="submit" value="Submit Item">
            </form>
        </div>
    </body>
</html>

And this is my actual problem: When I press on “Submit Item” button, I get an error:

Whitelabel Error Page
This application has no explicit mapping for /error, so you are seeing this as a fallback.

Mon Jun 10 22:05:03 ART 2024
There was an unexpected error (type=Not Found, status=404).
No message available

What I want to happen: In case #model.containsKey('id') returns true, set th:action equal to @{/submitItem(id=${model.id})}, in case it returns false I want th:action to contain @{/submitItem}.

Thiết kế website giá rẻ

Danh mục

Thymeleaf th:action equal to link expression which contains a context relative URL, or another, based on condition