ASP.NET Web Pages基礎知識---Razor 例項：顯示圖片

zhanglei1234321發表於2018-03-05
ASP.NETWeb

假設在您的影象資料夾中有 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>

伺服器建立了一個叫 imagePath 的變數。HTML 頁面有一個名為 Choice 的下拉選單（<select> 元素）。它允許使用者根據自己的意願選擇一個名稱（如 Photo 1），當頁面被提交到 Web 伺服器時，則傳遞了一個檔名（如 Photo1.jpg）。Razor 程式碼通過 Request["Choice"] 讀取 Choice 的值。如果通過程式碼構建的影象路徑（images/Photo1.jpg）有效，就把影象路徑賦值給變數 imagePath。在 HTML 頁面中，<img> 元素用來顯示影象。當頁面顯示時，src 屬性用來設定 imagePath 變數的值。<img> 元素是在一個 if 塊中，這是為了防止顯示沒有名稱的影象，比如頁面第一次被載入顯示的時候。


相關文章