Web ページのフォーム
ASP.NET Web ページ- HTML フォーム
フォームは、入力コントロール (テキスト ボックス、チェック ボックス、ラジオ ボタン、ドロップダウン リスト) が配置される HTML ドキュメントの一部です。
HTML入力ページを作成します
Razorインスタンス
<!DOCTYPE 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><br>
<input type="text" name="ContactName" value=""><br><br>
<input type="submit" value="Submit" class="submit">
</form>
}
}
</body>
</html>インスタンスを実行する»
「インスタンスを実行」ボタンをクリックしてオンラインインスタンスを表示します
Razorインスタンス - 画像を表示します
あなたのイメージで仮定してくださいフォルダー内に 3 つの画像があり、ユーザーの選択に基づいて画像を動的に表示したいとします。 これは、単純な Razor コードで実現できます。 Web サイトの画像フォルダーに「Photo1.jpg」という名前の画像がある場合は、次のように HTML <img> 要素を使用して画像を表示できます:
<img src= "../style /images/Photo1.jpg" alt="Sample" />
次の例は、ユーザーが次のリストから選択した画像を表示する方法を示しています。 Example
実行例 » 「サンプルの実行」ボタンをクリックしてオンラインサンプルを表示します
サンプルの説明サーバーは@{
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="Pic1.jpg">Photo 1</option>
<option value="Pic2.jpg">Photo 2</option>
<option value="Pic3.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> 要素) があります。これにより、ユーザーは自分で選択した名前 (Photo 1 など) を選択でき、ページが Web サーバーに送信されるときにファイル名が渡されます (Photo1.jpg など)。
Razor コードは、Request["Choice"] を通じて Choice の値を読み取ります。コードを通じて構築された画像パス (images/Photo1.jpg) が有効な場合は、画像パスを変数 imagePath に割り当てます。
HTML ページでは、画像を表示するために <img> 要素が使用されます。 src 属性は、ページが表示されるときに imagePath 変数の値を設定するために使用されます。 <img> 要素は if ブロック内にあります。これは、ページが最初に読み込まれるときなどに、画像が名前なしで表示されるのを防ぐためです。
