このセクションでは、ASP.NET WebPages HTML フォームについて説明します。
フォームは、入力コントロール (テキスト ボックス、チェック ボックス、ラジオ ボタン、ドロップダウン リスト) が配置される HTML ドキュメントの部分です。
Razor インスタンス
<html> <本文> @{if (IsPost) { string companyname = Request["companyname"]; string contactname = Request["contactname"]; <p>入力した内容:<br /> 会社名: @companyname <br /> 連絡先名: @contactname </p>}その他{ <form method="post" action=""> 会社名:<br /> <input type="text" name="CompanyName" value="" /><br /> 連絡先名:<br /> <input type="text" name="連絡先名" value="" /><br /><br /> <input type="submit" value="送信" /> </form> } } </body> </html>
画像フォルダーに 3 つの画像があり、ユーザーの選択に基づいて画像を動的に表示したいとします。
これは、単純な Razor コードで実現できます。
Web サイトの画像フォルダーに「Photo1.jpg」という名前の画像がある場合は、以下に示すように、HTML の <img> 要素を使用して画像を表示できます。
<img src="画像/写真1.jpg" />
次の例は、ユーザーが次のリストから選択した画像を表示する方法を示しています。
@{var imagePath=""; if (Request["Choice"] != null){imagePath="画像/" + Request["Choice"];} } <!DOCTYPE html> <html> <body> <h1>表示画像</h1> <form method="post" action=""> 確認したいのは次のとおりです: <select name="Choice"> <option value=" Photo1.jpg">写真 1</option> <option value="Photo2.jpg">写真 2</option> <option value="Photo3.jpg">写真 3</option> </select> <input type="送信" value="送信" /> @if (imagePath != ""){ <p> <img src="@imagePath " /></p>} </form> </body> </html>サーバーはimagePathという変数を作成します。
HTML ページには、 Choiceという名前のドロップダウン リスト(<select> 要素) があります。これにより、ユーザーは自分の希望に応じて名前を選択でき ( Photo 1など)、ページが Web サーバーに送信されるときにファイル名 ( Photo1.jpgなど) が渡されます。
Razor コードは、 Request["Choice"]を通じて Choice の値を読み取ります。コードによって構築された画像パス (images/Photo1.jpg) が有効な場合は、その画像パスを変数imagePathに割り当てます。
HTML ページでは、<img> 要素を使用して画像を表示します。ページが表示されるとき、src 属性を使用して imagePath 変数の値が設定されます。
<img> 要素は if ブロック内にあります。これは、ページが最初に読み込まれるときなどに、画像が名前なしで表示されるのを防ぐためです。