表单填写播放框架scala不起作用

Question

我正在创建一个包含员工列表的应用程序。管理员可以查看员工列表并更改他们的数据。当他单击“更改”按钮时，html 表单应填写所选员工数据，以便他可以更改它。我在游戏框架中使用了标准机制，但它不起作用。我正在调试它，一切看起来都很好（员工数据设置为表单）但它没有显示在我的 html 表单上......我不知道为什么......

  def loadEmployee(id: Int) = Action { implicit request =>
    val loadedEmployee = EmployeeService.getEmployee(id)
    val employee = Await.result(loadedEmployee, Duration(5, SECONDS)).get

    val employees = Await.result(EmployeeService.listAllEmployees, Duration(5, SECONDS))

    val form = EmployeeForm.form.fill(EmployeeFormData(employee.name, employee.additionalInformation, employee.resume))

    Ok(views.html.index(form,employees))
  }

查看文件：

@(employeeForm: Form[models.EmployeeFormData],employees : Seq[models.Employee])
@main() {


    <form id="employee-data-form" role="form" action='@routes.ApplicationController.addInformation()' method="post" class="form-horizontal" align="center" autocomplete="off">

        <fieldset class="employee-fieldset">

            <div class="employee-form">
                <label class="form-title" style="color: #F8741B; font-size: 22px;font-weight: bold; text-decoration:none">title</label>
            </div>
            <br/>
            <table align="center" cellspacing="20">
                <tr>
                    <td align="left">
                        <div class="employee-form" id="name_field_label">
                            <div class="controls col-xs-offset-3 col-xs-9">
                                <div class="input-group">
                                    <span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>
                                    <strong>name</strong> :
                                </div>
                            </div>
                        </div>
                    </td>
                    <td align="center">
                        <div class="employee-form" id="name_field_value">
                            <div class="controls col-xs-offset-3 col-xs-9">
                                <div class="input-group">
                                    <span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>                               
                                    <input type="text" id="name" name="name" value="" placeholder="First Name" class="form-control input-lg" required>                                
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td align="left">
                        <div class="employee-form" id="additionalInformation_field_label">
                            <div class="controls col-xs-offset-3 col-xs-9">
                                <div class="input-group">
                                    <span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>
                                    <strong>Additional information</strong> :
                                </div>
                            </div>
                        </div>
                    </td>
                    <td align="center">
                        <div class="employee-form" id="additionalInformation_field_value">
                            <div class="controls col-xs-offset-3 col-xs-9">
                                <div class="input-group">
                                    <span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>
                                    <textarea rows="4" cols="50" id="additionalInformation" name="additionalInformation" value="" class="form-control input-lg" required></textarea>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td align="left">
                        <div class="employee-form" id="resume_field_label">
                            <div class="controls col-xs-offset-3 col-xs-9">
                                <div class="input-group">
                                    <span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>
                                    <strong>resume</strong> :
                                </div>
                            </div>
                        </div>
                    </td>
                    <td align="center">
                        <div class="employee-form" id="resume_field_value">
                            <div class="controls col-xs-offset-3 col-xs-9">
                                <div class="input-group">
                                    <span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>
                                    <textarea rows="4" cols="50" id="resume" name="resume" class="form-control input-lg" required></textarea>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>

            </table>
            <br/>
            <div class="form-actions controls ynt-btn-xlarge">
                <button type="submit" class="btn btn-primary ynt-btn-orange">Add</button>
            </div>

        </fieldset>
    </form>

    <div class="employee-display" >
        <fieldset>
            <legend align="center"><h3>Registered Employees</h3></legend>
            <table cellspacing="20">
                <tr>
                    <th>employeeid</th>
                    <th>firstname</th>
                    <th>lastname</th>
                    <th>resume</th>
                </tr>
                @for(employee <- employees){
                    <tr>
                        <td>@employee.id</td>
                        <td>@employee.name</td>
                        <td>@employee.additionalInformation</td>
                        <td>@employee.resume</td>
                        <td><a href="@routes.ApplicationController.deleteEmployee(employee.id)">delete</a></td>     
                        <td><a href="@routes.ApplicationController.loadEmployee(employee.id)">loadEmployee</a></td>                   
                    </tr>
                    }
            </table>
        </fieldset>
    </div>

}

Answer 1

您的控制器代码看起来不错 - 您正在 fill 输入 Form[EmployeeFormData] 并将其传递给您的模板。问题是，您从不在模板中使用您的employeeForm - 无法填充表单。

如果您阅读了 showing forms in a view template 的 Play 文档，您会发现有整个系列的 helpers 可用于此目的。在许多情况下，它们几乎与您使用的“纯 HTML”版本一样容易编写。这是一个例子：

你在哪里：

<div class="input-group">
  <span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>
  <input type="text" id="name" name="name" value="" placeholder="First Name" class="form-control input-lg" required>
</div>

你需要：

<div class="input-group">
  <span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>
  @helper.inputText(
    employeeForm("name"),
    'id -> "name",
    'placeholder -> "First Name",
    'class -> "form-control input-lg",
    'required -> "true"      
  )
</div>

请注意，您可以如何通过以 ' 字符为前缀，将任意数量的任意参数传递到生成的 HTML 中。这可能非常方便，例如，如果您想在输入上设置额外的 data- 属性。