ASP.NET Web Pages - HTML formulier

Een formulier (formulier) is de plek waar je invoercontrole elementen (tekstvakken, selectievakjes, keuzerondjes en dropdown-menu's) in een HTML-document plaatst.

Maak een HTML invoerpagina

Razor voorbeeld

<html>
<body> 
@{
if (IsPost) { 
string companyname = Request["companyname"]; 
string contactname = Request["contactname"]; 
<p>Je hebt ingevoerd: <br />
Bedrijfsnaam: @companyname <br />
Contact Naam: @contactname </p>
}
else
{
<form method="post" action="">
Bedrijfsnaam:<br />
<input type="text" name="CompanyName" value="" /><br />
Contact Naam:<br />
<input type="text" name="ContactName" value="" /><br /><br />
<input type="submit" value="Submit" class="submit" />
</form>
}
} 
</body> 
</html>

运行实例

Razor voorbeeld - Afbeelding weergeven

Stel dat je in je afbeeldingsmap drie afbeeldingen hebt en je wilt deze afbeeldingen dynamisch weergeven op basis van de keuze van de gebruiker.

Dit kan eenvoudig worden gedaan met een korte Razor-code.

Als de naam van het afbeelding bestand in de map met afbeeldingen van de website "Photo1.jpg" is, kun je de HTML <img> element gebruiken om dit afbeelding weer te geven, zoals hieronder:

<img src="images/Photo1.jpg" alt="Sample" />

Het volgende voorbeeld toont hoe je een afbeelding kunt weergeven die de gebruiker heeft geselecteerd uit een dropdown-lijst:

Razor voorbeeld

@{
var imagePath=""; 
if (Request["Choice"] != null)
   {imagePath="images/" + Request["Choice"];} 
} 
<!DOCTYPE html> 
<html> 
<body> 
<h1>显示图片</h1> 
<form method="post" action=""> 
我想查看： 
<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> 元素）。它允许用户选择一个友好的（编者注：容易阅读的）名称（例如 Photo 1），当页面被提交到 web 服务器时，向服务器传递文件名（例如 Photo1.jpg）。

Razor 通过 Request["Choice"] 读取 Choice 的值。如果值存在，则代码构造出指向图片的路径 (images/Photo1.jpg)，并将路径存储于变量 imagePath 。

HTML 页面中的 <img> 元素显示该图片。当显示页面时，src 属性会被设置为 imagePath 变量的值。

如果变量 imagePath 的值为空，则会防止 <img> 元素显示不存在的图片（例如当页面首次加载时）。