本節為你講解ASP.NETWebPagesHTML表單。
表單是HTML 文件中放置輸入控制項(文字方塊、複選框、單選按鈕、下拉式清單)的部分。
Razor 實例
<html> <body> @{if (IsPost) { string companyname = Request["companyname"]; string contactname = Request["contactname"]; <p>You entered: <br /> 公司 Name: @companyname <br /> Contact Name: @contactname </p>}else{ <form method="post" action=""> Company Name:<br /> <input type="text" name="CompanyName" value="" /><br /> Contact Name:<br /> <input type="text" name="ContactName" value="" /><br /><br /> <input type="submit" value="Submit" /> </form> } } </body> </html>
假設在您的圖像資料夾中有3 張圖像,您想要根據使用者的選擇動態地顯示圖像。
這可以透過一段簡單的Razor 程式碼來實現。
如果在您的網站的圖片資料夾中有一個名為"Photo1.jpg" 的映像,您可以使用HTML 的<img> 元素來顯示影像,如下所示:
<img src="images/Photo1.jpg" />
下面的範例示範如何顯示使用者從下列清單中選擇的圖像:
@{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 " /> </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 區塊中,這是為了防止顯示沒有名稱的圖像,例如頁面第一次被載入顯示的時候。