HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

RazorのHtml.DropDownListFor()でページロード時に選択されるオプションを設定する方法

Html.DropDownListFor()でページロード時の選択オプションを指定する

RazorのHtml.DropDownListFor()を使用する際、ページ読み込み時にどのオプションを選択状態にするかは、各SelectListItemのSelectedプロパティにブール値（Boolean）を設定することで制御できます。

この方法では、モデルの値と比較した結果（true / false）を直接Selectedに渡すため、条件に一致する項目が自動的に選択された状態でドロップダウンが表示されます。

実装コード例

以下のコードスニペットを参考に、実際に動作を確認してみてください。

// ブール値を返して選択状態を決定する
@Html.DropDownListFor(m => m.Valeur,
new List<SelectListItem> { // リスト項目を生成
new SelectListItem { Value = "0" , Text = "Show", Selected = Model.Valeur == 0 },
new SelectListItem { Value = "1" , Text = "Hide", Selected = Model.Valeur != 0 },
}, new { @class = "selectnew" })

コードのポイント

Selected = Model.Valeur == 0
モデルのValeurプロパティが「0」の場合に、テキストが「Show」のオプションが選択されます。

Selected = Model.Valeur != 0
逆にValeurが「0」以外の場合は、テキストが「Hide」のオプションが選択されます。

このように、三項演算子やif文を使わずとも、比較式の結果をそのままSelectedプロパティに代入するだけで、ページロード時の初期選択状態を簡潔に実装できます。また、第3引数のnew { @class = "selectnew" }により、生成されるHTML要素にCSSクラスを付与し、スタイリングにも対応できます。

  1. HTMLのoption要素におけるvalue属性とは？基本構文とサンプルコードで解説

    HTMLのvalue属性は、<option>要素に対してサーバーへ送信する値を指定するための属性です。フォーム送信時に、ユーザーが選択した選択肢の値がこの属性の内容として送られます。値そのものは画面上には表示されず、表示されるテキスト（ラベル）とは別に内部的なデータを持たせられるのが特徴です。基本構文value属性の基本的な書き方は以下のとおりです。<option value=テキスト></option>value属性には任意の文字列を指定できます。省略した場合は、<option>要素内のテキストがそのまま送信されます。使用例ここでは、好きな科目

  2. HTML KeyboardEventのwhichプロパティとは？使い方をサンプルコード付きで解説

    HTMLの KeyboardEvent which プロパティは、HTMLドキュメント内で onkeypress イベント、onkeydown イベント、または onkeyup イベントを発生させたキーのUnicode文字コード（数値）を返すプロパティです。ユーザーがどのキーを押したのかを数値として判別したい場合に活用できます。 構文 whichプロパティの基本的な構文は以下の通りです。 event.which それでは、HTML KeyboardEvent whichプロパティの具体的な使用例を見ていきましょう。 サンプルコード <!DOCTYPE html> <html