Thymeleaf: pass Eingabetext als Parameter in href

Question

Ich habe ein input Feld, dessen Wert durch response.query durch die Steuerung eingestellt, in der Vorlage Ich habe auch zwei Links, die read und delete Anrufe an die id im query eingegeben zuführen. Hier ist die Vorlage.

<div class="input-group"> 
     <input type="text" th:value="*{response.query}" /> 
     <div class="input-group-btn"> 
      <ul class="dropdown-menu dropdown-menu-right"> 
       <li><a href="#" th:href="@{/read/{id}(id=response.query)}">Read</a></li> 
       <li><a href="#" th:href="@{/delete/{id}(id=response.query)">Delete</a></li> 
      </ul> 
     </div> 
</div> 

Leider ist die href Parameter immer wird als null geben. Gibt es einen alternativen Ansatz dazu?

Answer 1

Sie können nicht response.query bekommen, weil es auf der Client-Seite ist, dann rufen Sie es an. In Ihrem Fall müssen Sie die JavaScript aktivieren, die Ihren Link URL konstruieren wird (othervise Sie ein Formular benötigen Wert der Eingabe einreichen):

<div class="input-group"> 
    <input type="text" id="myval" th:value="*{response.query}" /> 
    <div class="input-group-btn"> 
     <ul class="dropdown-menu dropdown-menu-right"> 
      <li><a href="#" onclick="onReadClick();" href="#">Read</a></li> 
      <li><a href="#" th:href="@{/delete/{id}(id=response.query)">Delete</a></li> 
     </ul> 
    </div> 
</div> 

<script th:inline="javascript"> 
/*<![CDATA[*/ 
function onReadClick() { 
    var id = $('#myval').value; 
    /*[+ 
    var myUrl = [[@{/read}]] + id; 
    +]*/ 
    window.location.href = myUrl; 
}); 
/*]]>*/ 
</script> 

Answer 2

Nun lassen Sie mich sehen, ob ich verstehe, was Sie wollen:

Zum Beispiel setzen Sie '5' in die Texteingabe. Jetzt wollen Sie href:

http://localhost:8080/read/5

Und Sie haben eine Steuerung, die etwa wie folgt aussieht:

@RequestMapping(value="/read/{id}", method=RequestMethod.GET) 
public String read(@PathVariable String id, Model model) { 
    // your logic goes here 
    return "read"; 
} 

Erstens mein Vorschlag ist, dass Sie nur Ihren Code ändern aus:

<li><a href="#" th:href="@{/read/{id}(id=response.query)}">Read</a></li> 

zu:

<li><a href="#" th:href="@{/read/{id}(id=${response.query})}">Read</a></li>