表单是 HTML 文档中放置输入控件(文本框、复选框、单选按钮、下拉列表)的部分
创建一个 HTML 输入表单
<!DOCTYPE html>
<meta charset="utf-8" />
@{
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="">
<p>Company Name:</p>
<p><input type="text" name="CompanyName" value="" /></p>
<p>Contact Name:</p>
<p><input type="text" name="ContactName" value="" /></p>
<p><input type="submit" value="Submit" class="submit" /></p>
</form>}}
创建一个下拉显示图片的表单
假设在我们的图像文件夹中有 3 张图片,我们想根据用户的选择动态地显示图片
这个功能可以通过一段简单的 Razor 代码来实现
假设我们的网站的图片文件夹中有一个名为 "photo_1.jpg" 的图片,我们可以使用 HTML 的 <img> 元素来显示图片
<img src="images/photo_1.jpg" alt="Sample" />
下面的范例演示了如何显示用户从下列列表中选择的图像
@{
var imagePath="";
if (Request["Choice"] != null)
{imagePath="images/" + Request["Choice"];}
}
<!DOCTYPE html>
<meta charset="utf-8" />
<h1>Display Images</h1>
<form method="post" action="">
I want to see:
<select name="Choice">
<option value="photo_1.jpg">Photo 1</option>
<option value="photo_2.jpg">Photo 2</option>
<option value="photo_3.jpg">Photo 3</option>
</select>
<input type="submit" value="Submit" />
@if (imagePath != "")
{<p><img src="@imagePath" alt="Sample" /></p>}
</form>
在这个范例中,服务器创建了一个叫 imagePath 的变量
HTML 页面有一个名为 Choice 的 下拉列表 ( <select> 元素 )
它允许用户根据自己的意愿选择一个名称(如 photo_1 ),当页面被提交到 Web 服务器时,则传递了一个文件名 ( 如 photo_1.jpg )
Razor 代码通过 Request["Choice"] 读取 Choice 的值
如果通过代码构建的图片路径(images/photo_1.jpg)有效,就把图像路径赋值给变量 imagePath
在 HTML 页面中,<img> 元素用来显示图片
当页面显示时,src 属性用来设置 imagePath 变量的值
<img> 元素是在一个 if
语句中,这是为了防止显示没有名称的图像,比如页面第一次被加载显示的时候