ASP.NET Web Pages基础知识---Razor 实例：显示图片

原创于 2018-03-05 22:36:30 发布 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ASP.NET

ASP.NET 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用Razor语法动态显示用户所选图片的方法。通过创建一个包含多个选项的下拉列表，用户可以从中选择想要查看的图片，之后通过服务器端代码读取用户的选项并构建图片路径。

假设在您的图像文件夹中有 3 张图像，您想根据用户的选择动态地显示图像。

这可以通过一段简单的 Razor 代码来实现。

如果在您的网站的图像文件夹中有一个名为 "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>