ASP.NETWebページ-HTMLフォーム
フォームは、入力コントロール(テキストボックス、チェックボックス、ラジオボタン、およびプルダウンリスト)を配置するHTMLドキュメントのセクションです。
HTML入力ページの作成
かみそりの例
<html>
<body>
@{
if (IsPost) {
string companyname = Request["CompanyName"];
string contactname = Request["ContactName"];
<p>You entered: <br />
Company Name: @companyname <br />
Contact Name: @contactname </p>
}
else
{
<form method="post" action="">
Company Name:<br />
<input type="text" name="CompanyName" value="" /><br />
Contact Name:<br />
<input type="text" name="ContactName" value="" /><br /><br />
<input type="submit" value="Submit" class="submit" />
</form>
}
}
</body>
</html>
かみそりの例-画像の表示
画像フォルダに3つの画像があり、ユーザーの選択によって動的に画像を表示したいとします。
これは、小さなRazorコードで簡単に実行できます。
Webサイトのimagesフォルダに「Photo1.jpg」という画像がある場合は、次のようなHTML <img>要素を使用して画像を表示できます。
<img src="images/Photo1.jpg" alt="Sample" />
次の例は、ユーザーがドロップダウンリストから選択した選択した画像を表示する方法を示しています。
かみそりの例
@{
var imagePath="";
if (Request["Choice"] != null)
{imagePath="images/" + Request["Choice"];}
}
<!DOCTYPE html>
<html>
<body>
<h1>Display Images</h1>
<form method="post" action="">
I want to see:
<select name="Choice">
<option value="Photo1.jpg">Photo 1</option>
<option value="Photo2.jpg">Photo 2</option>
<option value="Photo3.jpg">Photo 3</option>
</select>
<input type="submit" value="Submit" />
@if (imagePath != "")
{
<p>
<img src="@imagePath" alt="Sample" />
</p>
}
</form>
</body>
</html>
例の説明
サーバーはimagePathという変数を作成します。
HTMLページには、Choiceという名前のドロップダウンリスト(<select>要素)があります。これにより、ユーザーはわかりやすい名前(写真1など)を選択し、ページがWebサーバーに送信されるときにファイル名(Photo1.jpgなど)を渡すことができます。
Razorコードは、Choice by Request ["Choice"]の値を読み取ります。値がある場合、コードは画像images / Photo1.jpgへのパスを作成し、それを変数imagePathに格納します。
HTMLページには、画像を表示するための<img>要素があります。src属性は、ページが表示されるときにimagePath変数の値に設定されます。
<img>要素はifブロックにあり、名前のない画像を表示しようとするのを防ぎます(ページが最初に表示されるときなど)。