redwarrior’s diary

C#, ASP.NET, WEB, G*などの雑多な情報

ASP.NET MVC で備考入力欄を作成する方法のまとめ

久しぶりの更新になってしまった。ブログを書く時間を意識してとるように気をつけよう。

入力フォームを作る時に、大体作ることになる備考入力欄について、ASP.NET MVC での実装方法のポイントをまとめてみました。

はじめに

ASP.NET MVC 5で動作を確認しています。Scaffolding機能を使用して、Model,Controller,Viewを作成しておいてください。

備考を格納するプロパティはstring型を想定しています。

textareaタグで表示する

デフォルトではテキストボックス(<input type="text">)で表示されるのを、テキストエリア(<textarea>)で表示するように変更します。

[方法] モデルクラスのプロパティにDataType.MultilineTextを指定したDataType属性を設定します。

public class Member
{
    //他のプロパティは省略
   
    [DisplayName("備考")]
    [DataType(DataType.MultilineText)]
    public string Note { get; set; }

複数行で表示する

textareaタグで表示しただけでは、見た目がテキストボックスと変わらないため複数行での入力をできるようにします。

[方法] ビュー(cshtml)のHtml.EditorForメソッドの引数にrowsを追加します。今回は4行で表示します。

@Html.EditorFor(model => model.Note, new { htmlAttributes = new { @class = "form-control", rows = "4" } })

備考欄にフォーカスした時に文字入力を日本語入力に変更する

見た目は良くなりました。数値を入力するテキストボックス等から、備考欄にフォーカスが移った場合は日本語入力が可能になっていると便利なので設定を行います。

[方法] ビュー(cshtml)のHtml.EditorForメソッドの引数にスタイルシートとしてime-mode: active;を設定します。

@Html.EditorFor(model => model.Note, new { htmlAttributes = new { @class = "form-control", rows = "4", style = "ime-mode: active;" } })

あるいは直接指定せずに、Site.css(元から用意されているcssファイル)に書き込んだ方が便利かもしれません。

textarea.form-control {
    ime-mode: active;
}

ime-modeは他にも値があるので、テキストボックスとテキストエリアに別の値を設定することで、フォーム入力少し便利になりそうです。

参考サイト:

www.htmq.com