ASP.NET 教程之Web Pages II

一.web pages forms 窗體

1.創建HTML輸入頁面

窗體就是再HTML上輸入的控件,比如文本框、複選框、單選框和下拉菜單。

例如,創建一個HTML輸入頁面

<html>
<body> 
@{
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="">
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" class="submit" />
</form>
}
} 
</body> 
</html>


運行結果如下



2.Razor實例,顯示圖像

假設在您的圖片文件夾中有三張圖片,並且您希望根據用戶的選擇來動態地顯示這些圖片,通過一小段 Razor 就可以很容易地實現。

如果網站圖片文件夾中的圖片的名稱是 "Photo1.jpg",則您可以使用 HTML <img> 元素來顯示這幅圖片

<img src="images/Photo1.jpg" alt="Sample" />


例如,從下拉列表中選擇圖片

@{
var imagePath=""; //服務器創建名爲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>

運行結果如下

代碼解釋:

HTML 頁面中有名爲 Choice 的下拉列表(<select> 元素)。它允許用戶選擇一個友好的(編者注:容易閱讀的)名稱(比如 Photo 1),當頁面被提交到 web 服務器時,向服務器傳遞文件名(比如 Photo1.jpg)。

Razor 通過 Request["Choice"] 讀取 Choice 的值。如果值存在,則代碼構造出指向圖片的路徑 (images/Photo1.jpg),並把路徑存儲於變量 imagePath 中。

HTML 頁面中的 <img> 元素顯示出該圖片。當顯示頁面時,src 屬性會被設置爲 imagePath 變量的值。

如果變量 imagePath 的值爲空,則會防止 <img> 元素顯示不存在的圖片(比如當頁面首次加載時)。



二.web pages objects 對象

1.page對象

之前見到過的page對象

@RenderPage("header.cshtml")

@RenderBody()


之前見到過的page對象屬性(isPost和Request)

If (isPost) {

if (Request["Choice"] != null {


2.page對象的一些方法



3.page對象的一些屬性



4.page對象的page屬性

Page 對象的 Page 屬性,提供對頁面、佈局頁和分頁之間共享的頁數據的類似屬性的訪問


給page屬性添加自己的屬性

Page.Title

Page.Version

Page.anythingyoulike


page屬性很有用,比如可以在內容文件中設置頁面標題,然後在佈局文件中使用它


Home.cshtml

@{
Layout="~/Shared/Layout.cshtml";
Page.Title="Home Page"
}


<h1>Welcome to W3Schools</h1> 

<h2>Web Site Main Ingredients</h2>

<p>A Home Page (Default.cshtml)</p>
<p>A Layout File (Layout.cshtml)</p>
<p>A Style Sheet (Site.css)</p>


Layout.cshtml

<!DOCTYPE html>
<html>
<head>
<title>@Page.Title</title>
</head>
<body>
@RenderBody()
</body>
</html>



三.web pages files 文件

1.處理文本文件

存儲數據的文本文件通常被稱爲平面文件(flat files)。常見的文本文件格式是 .txt、.xml 以及 .csv(comma-delimited values,逗號分隔的值)


2.手動添加文本文件

您的網站上如果沒有 App_Data 文件夾,就創建一個。在 App_Data 文件夾中,創建名爲 Persons.txt 的新文件。

向這個文件添加如下內容:

George,Lucas
Steven,Spielberg
Alfred,Hitchcock


3.顯示文本文件中的數據

例如,顯示文本文件中的數據

@{
var dataFile = Server.MapPath("~/App_Data/Persons.txt");
//Server.MapPath 找到確切的文本文件路徑
Array userData = File.ReadAllLines(dataFile);//File.ReadAllLines 打開這個文件文件,然後把文件中的所有文本行讀入一個數組
}

<!DOCTYPE html>
<html>
<body>

<h1>Reading Data from a File</h1>
@foreach (string dataLine in userData)//顯示出數組的每個數據行(dataline)中的每個數據項(dataItem)的數據
{
  foreach (string dataItem in dataLine.Split(',')) 
  {@dataItem <text>&nbsp;</text>}

  <br />
}
</body>
</html>


運行結果如下



4.顯示Excel文件中的數據

通過微軟的 Excel,您能夠把電子表格保存爲逗號分隔的文本文件(.csv 文件)。當您這麼做時,電子表格中的每行會保存爲一個文本行,每個數據列由一個逗號來分隔。

你可以使用上面的例子讀取一個 Excel .csv 文件(把文件名改爲 Excel 文件的名稱就可以)



四.web pages databases 數據庫

1.顯示數據庫中的數據

用web pages,可以輕鬆地顯示數據庫中的數據,只要連接一個已經存在的數據庫或者創建一個新的數據庫


2.添加一個客戶端頁面

在DemoWebPages文件夾中創建一個CSHTML文件夾,並且命名爲Products.cshtml

把其中的代碼用下面代碼代替

@{
var db = Database.Open("SmallBakery"); 
var selectQueryString = "SELECT * FROM Product ORDER BY Name"; 
}

<html> 
<body> 
<h1>Small Bakery Products</h1> 
<table> 
<tr>
<th>Id</th> 
<th>Product</th> 
<th>Description</th> 
<th>Price</th> 
</tr>
@foreach(var row in db.Query(selectQueryString))
{

<tr> 
<td>@row.Id</td> 
<td>@row.Name</td> 
<td>@row.Description</td> 
<td align="right">@row.Price</td> 
</tr> 
}
</table> 
</body> 
</html>


運行結果



事例解釋




3.ASP.NET Database對象參考手冊




五.web pages helpers 幫助器

1.asp.net 幫助器

ASP.NET 幫助器是通過幾行簡單的 Razor 代碼即可訪問的組件。

可以使用存放在 .cshtml 文件中的 Razor 語法構建自己的幫助器,或者使用內建的 ASP.NET 幫助器。

下面介紹一些有用的 Razor 幫助器


2.WebGrid 幫助器

WebGrid 幫助器簡化了顯示數據的方法

·自動建立顯示數據的 HTML 表格

·支持不同的格式化選項

·支持對數據的分頁(第一頁、下一頁、上一頁、最後一頁)

·支持通過點擊列標題進行排序


3.Chart 幫助器

"Chart Helper" 能夠顯示出帶有不同格式選項和標記的不同類型的圖表圖片

Chart Helper 能夠顯示數組、數據庫或文件中的數據


4.WebMail 幫助器

WebMail 幫助器提供了使用 SMTP (Simple Mail Transfer Protocol) 來發送電郵消息的功能


5.WebImage 幫助器

WebImage 幫助器提供了在網頁中管理圖片的功能

關鍵詞:剪裁、旋轉、調整尺寸、水印


6.第三方幫助器

通過 Razor,您能夠利用內建的第三方幫助器來簡化對電郵、數據庫、多媒體和社交網絡的使用,以及許多其他的問題比如導航和網絡安全


7.安裝幫助器

如果你的網站在 WebMatrix 中創建,請使用如下步驟來安裝幫助器:

·在 WebMatrix 中,打開 Site workspace

·點擊 Web Pages Administration

·使用密碼登陸 Web Pages Administration

·使用搜索字段搜素幫助器

·點擊安裝來安裝你需要的幫助器




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章