Spring MVC Контроллер не получает атрибут от шаблона с Thymeleaf

Question

У меня есть шаблон, который представляет собой список заметок, которые извлекаются из базы данных

  <tr th:unless="${#lists.isEmpty(allNotes)}"
                            th:each="note : ${allNotes}">
                            <td>
                                <form action="#" method="POST" th:action="@{/home/editNote}"
                                      th:object="${note}">
                                    <input type="hidden" id="noteId" name="noteId" th:value="*{noteId}">
                                    <button type="button" class="btn btn-success"
                                            onclick="editNoteModal('updateNote', this.getAttribute('data-noteId'),
                                            this.getAttribute('data-noteTitle'),
                                             this.getAttribute('data-noteDescription'))">Edit
                                    </button>
                                </form>
                                <form action="#" method="POST" th:action="@{/home/deleteNote}">
                                    <input type="hidden" name="noteId" th:value="*{note.noteId}">
                                    <a class="btn btn-danger">Delete</a>
                                </form>
                            </td>
                            <th scope="row" th:text="${note.noteTitle}">Example Note Title</th>
                            <td th:text="${note.noteDescription}">Example Note Description</td>
                            </form>
                        </tr>
                        </tbody>

В GUI Это выглядит так

This is my modal code which should open after I click on the edit button:

  Примечание  ×    Титул   Описание          Закрыть   Сохранить изменения       

В GUI это выглядит так:

Я хочу иметь возможность редактировать данную заметку, а затем отправлять отредактированный идентификатор в контроллер, чтобы я мог обновить это изменение в базе данных. У меня есть правильный журнал базы данных c для обновления, я просто не знаю, как отправить данный идентификатор заметки и измененную информацию на мой контроллер.

 @PostMapping("/editNote")
    public String editNote(@ModelAttribute(value = "note") Note note,
                           @ModelAttribute(value = "noteId") NoteIdModel noteIdModel, Model model,
                           Authentication authentication) {
        System.out.println("noteid " + note.getNoteId());
        System.out.println("noteidHidden " + noteIdModel.getNoteIdHidden());
        System.out.println("notedesc" + note.getNoteDescription());
        noteService.editNote(note, authentication);
        return "result";
    }

Однако входящий noteId равен нулю . Я проверил базу данных, и заметка с правильным идентификатором действительно находится в базе данных, а также извлекается из базы данных. Он просто не отправляется контроллеру.

Answer 1

Попробуйте это:

HTML фрагмент

<tr th:unless="${#lists.isEmpty(allNotes)}"
    th:each="note : ${allNotes}">
    <td>
        <button type="button" class="btn btn-success"
            th:data-noteId="${note.noteId}"
            th:data-noteTitle="${note.noteTitle}"
            th:data-noteDescription="${note.noteDescription}"
            onclick="editNoteModal('updateNote', this.getAttribute('data-noteId'),this.getAttribute('data-noteTitle'),this.getAttribute('data-noteDescription'))">Edit
        </button><br/>
        <a class="btn btn-danger">Delete</a>
    </td>
    <td scope="row" th:text="${note.noteTitle}"></td>
    <td th:text="${note.noteDescription}"></td>
</tr>

JS фрагмент

/**
* Fill edit modal with current information
*/
function editNoteModal(modal, noteId, noteTitle, noteDescription) {
    $('#editnoteModalLabel').text("Note " + noteId);
    $('#editNoteId').val(noteId);
    $('#editNoteTitle').val(noteTitle);
    $('#editNoteDescription').val(noteDescription);
    
    $('#editNoteModal').modal("show");
}

/**
* Save to backend edit information
*/
function save() {
    var noteId = $('#editNoteId').val();
    var noteTitle = $('#editNoteTitle').val();
    var noteDescription = $('#editNoteDescription').val();
     $.ajax({
        url : "./editNote",
        method : "POST",
        headers : {
            'Content-Type' : 'application/json'
        },
        data : JSON.stringify({
            noteId : noteId,
            noteTitle : noteTitle,
            noteDescription : noteDescription
        }),
        success : function(result) {
            $('#editNoteModal').modal("hide");
            alert(result);
        }
    }) 
}

Backend

@PostMapping(path = "/editNote", consumes = MediaType.APPLICATION_JSON_VALUE)
public ResponseEntity<String> editNote(@RequestBody Note note) {
    System.out.println("noteid " + note.getNoteId());
    System.out.println("noteidTitle " + note.getNoteTitle());
    System.out.println("notedesc" + note.getNoteDescription());
    
    //Save in database
    
    return ResponseEntity.ok("OK");
}

Answer 2

Вот как я это делал, когда пытался передать идентификатор для открытия модального окна путем поиска деталей по этому идентификатору:

<a href="#" class="btn btn-sm btn-primary"
                th:data-parameter1="${user.useruuid}"
                onclick="openUserModal(this.getAttribute('data-parameter1'));">Details</a>

А затем где-то в вашем JavaScript , можно что-то (подобное) вот так:

<script type="text/javascript" th:fragment="includeModalScript">
function openUserModal(id) {
    
    $.ajax({
        url: "/findOnebyId?id="+ id,
        success: function(data){
            alert(id);
            .......
</script>

А мой контроллер выглядел так:

@GetMapping("/findOnebyId")
@ResponseBody
public AppUser findOneByUUID(String id) {
....    
}

Можете посмотреть здесь , здесь и здесь для рабочей демонстрации, аналогичной вашей проблеме / требованию.