Help us understand the problem. What is going on with this article?

Play Framework 2.6(Scala)でFormにhiddenを埋め込んでみる

More than 1 year has passed since last update.

概要

ScalaのPlay FrameworkでFormに、hiddenタグをどう埋め込むかについて調べてみた&試しにサンプルを作成してみました。

前提

Play Framework2.6を前提としているので、Formの基本的な仕様は以前に私が投稿した、Play Framework 2.6(Scala)でFormの処理を作ってみたの内容をご参照ください。

対応方法

How to hide a text field in play frameworkのstackoverflowの記事によるといくつか対応方法はあるようですが、今回のサンプルはinputタグを直接使う方法で試してみました。

サンプルの概要

とあるカテゴリーの登録画面で既存にあるカテゴリーを変更するイメージを前提として、リクエストパラメータで受け取ったIDをFormのhiddenに埋め込むようなサンプルソースにしています。DB接続部分は割愛しています。
キャプチャ.PNG

サンプルソース

【routesファイル】

GET     /categoryregist                  controllers.CategoryController.registCategoryDisplay(categoryIdParam: Option[String])
POST     /categoryregist                  controllers.CategoryController.categorySubmit

【models】

models.scala
package models

case class Category(
    categoryid:String,
    categoryname:String, 
    categorysort:String); 

【controllers】

CategoryController.scala
package controllers

import javax.inject._
import play.api._
import play.api.mvc._
import play.api.data._
import play.api.data.Forms._
import models._
import play.api.i18n.I18nSupport
import play.api.i18n._
import commonlogic.logicservice.tablemodel.CategoryTable
import commonlogic.logicservice.CategoryService
import models.Category
import java.time.ZonedDateTime


class CategoryController @Inject()( cc: ControllerComponents ) extends AbstractController(cc) with I18nSupport {

  // カテゴリーフォーム
  val categoryForm = Form( mapping( "categoryid" -> text ,
                                    "categoryname" -> text, 
                                    "categorysort" -> text
                                    )
                                    (Category.apply)(Category.unapply) 
                           )

  // カテゴリー登録画面の表示
  def registCategoryDisplay(categoryIdParam: Option[String]) = Action { implicit request =>
    // IDのリクエストパラメータチェック
    categoryIdParam match {
      case Some(categoryIdString) =>
        // DBからカテゴリーテーブルのデータ取得(サンプルでは内容を割愛)
        var categoryTableFromId = CategoryService.getCategoryById(categoryIdString)
        // DBからオブジェクトが取得できた場合
        if( categoryTableFromId != null){ 
          // formにセット
          val categoryFilledForm = categoryForm.fill(Category(categoryIdString , categoryTableFromId.categoryname , categoryTableFromId.categorysort))
          // formの値を埋めてカテゴリー登録画面へ遷移
          Ok( views.html.categoryRegist(categoryFilledForm) )
        }else{
          // そのままカテゴリー登録画面へ遷移
          Ok( views.html.categoryRegist(categoryForm) )
        }
      case None =>
        // そのままカテゴリー登録画面へ遷移
        Ok( views.html.categoryRegist(categoryForm) )

   }
  }

  // カテゴリー登録画面からのsubmit
  def categorySubmit() = Action { implicit request: Request[AnyContent] =>
    categoryForm.bindFromRequest.fold(
      // 入力チェックNG
      errors => {
        BadRequest( views.html.categoryRegist(errors) )
      },
      // 入力チェックOK
      success => {
        // フォームのカテゴリー情報
        var category = categoryForm.bindFromRequest.get
        if(category.categoryid != ""){
          // カテゴリーをアップデート(サンプルでは内容を割愛)
          CategoryService.updateCategory(category.categoryid , category.categoryname , category.categorysort)
          Ok( views.html.categoryregistSuccess() )
        }else{
          Ok( views.html.categoryregistError() )
        }
      }
    )
  }

【view】

categoryRegist.scala.html
@(categoryForm)(implicit request: RequestHeader, messagesProvider: MessagesProvider)
@import helper._
@main("サンプル"){
    <font size=5>■カテゴリー登録画面</font><br/><br/>
    @helper.form( action = helper.CSRF(routes.CategoryController.categorySubmit) ){
        <fieldset>
          @helper.inputText(categoryForm("categoryname") , '_label -> "カテゴリー名")
          @helper.inputText(categoryForm("categorysort") , '_label -> "ソート番号")
        </fieldset>
        <input type="hidden" value="@categoryForm("categoryid").value" name="categoryid">
        <input type="submit" value="変更する">
    }
}
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした