ASP.NET Web Pages HTML 表单

表单是 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 语句中,这是为了防止显示没有名称的图像,比如页面第一次被加载显示的时候

ASP.NET 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.