传递选择的选定值以形成动作

Question

我有一个菜单，我想根据系统中当前选择的帐户有所不同。

我有一个页面，允许用户从 html 选择中选择一个帐户。当用户从帐户选择页面提交表单时，我想调用控制器上的菜单方法，传入所选值，以便我的 url 看起来正确。

这是页面中允许用户选择帐户的现有模板：

@helper.form(action = routes.Accounts.menu {
    <table>
        <tr>
            <td><select id="accountNames">
                @accountNames.map { name =>
                    <option value="@name">@name</option>
                }
            </select></td>
        </tr>
        <tr>
            <td>
                <p>
                    <input type="submit" value="Choose">
                </p>
            </td>
        </tr>
    </table>
}

来自我的路线文件：

GET /account/:accountName/menu controllers.Accounts.menu(accountName: String)

如何从我的选择 (id="accountNames") 中引用选定的值并将其传递到我的表单操作中？

Answer 1

实际上，我认为你这样做是错误的。

如果表单的动作不得不改变使用你的'select'，它必须使用JS来完成。 所以当表单提交时（事件submit）你必须更新url。

这可以使用javascriptRoutes 轻松完成。

所以你必须做几件事：

1/ 创建 javascriptRouter（假设您将其添加到 Application.scala）

def javascriptRoutes = Action {
  Ok(
    Routes.javascriptRouter("playRoutes")(
      //accounts
      controllers.routes.javascript.Accounts.menu
    )
  ).as("text/javascript")
 }

2/ 在您的 routes 文件中定义它

# Javascript routing
GET     /assets/javascripts/routes      controllers.Application.javascriptRoutes

3/ 在你的视图中添加相关的javascript文件导入，比如main.scala.html

<script type="text/javascript" src="@routes.Application.javascriptRoutes"></script>

4/ 在表单中添加一个submit 处理程序，在执行默认行为之前执行此操作

$("form").submit(function () {
    //this computes the correct URL giving a parameter which is the value of the selected option
    var newURl = playRoutes.controllers.Accounts.menu($("#accountNames").val()).url
    $(this).attr("action", newUrl); 
})

请注意我们如何在控制器 (1) 和 JS 调用 (4) 中使用 playRoutes。