【Asp.net入門09】第一個Asp.net應用程式-建立表單並設定其樣式

標籤：

本節內容：

• 添加一個aspx表單並設計表單內容
• 為aspx表單添加樣式

前面我們為PartyInvites應用程式項目添加了兩個c#檔案：GuestResponse.cs和ResponseRepository.cs檔案。這兩個檔案裡面的代碼一個是用來描述資料的GuestResponse類，一個是用來進行資料讀寫的ResponseRepository類。這兩個類都不是使用者直接存取的頁面。下面我們就要開始設計一個與使用者互動的頁面，也就是我們通常所理解的網頁。

我們接下來的任務是建立建立一個包含晚會資訊，以及允許嘉賓做出回複的頁面。

開啟我們之前為PartyInvites項目添加的Default.aspx分頁檔。按如下代碼清代修改代碼：

代碼清單1-6　建立表單

樣本更改了form元素的id特性值，並增加了一些標準的HTML元素，以顯示晚會的相關資訊並從使用者處收集回複資訊。整個頁面代碼除了第一行與我們熟悉的html頁面內容不一樣之外，其它部分都一樣。

從調試（Debug）菜單中選擇啟動調試（Start Debugging），或單擊工具列中的Internet Explorer按鈕，啟動應用程式，即可看到更改後的應用程式。1-7所示，我們建立了一個表單，但它並不美觀。

為Web表單中的元素設定樣式的方法與為常規HTML版面設定樣式的方法相同——使用CSS（階層式樣式表）。要為應用程式添加一些基本的樣式，在Solution Explorer中按右鍵PartyInvites項，然後從彈出式菜單中選擇Add→Style Sheet（樣式表）。將名稱設定為PartyStyles，然後單擊OK按鈕。Visual Studio將在項目中添加一個新的PartyStyles.css檔案。設定這個新檔案的內容，使其與代碼清單1-7中的CSS相一致。雖然這些是非常基本的CSS樣式，但它們能夠美化表單欄位。

代碼清單1-7　在PartyStyles.css檔案中定義的CSS樣式

使用link元素將CSS樣式與Web表單關聯。在Default.aspx檔案的head部分添加一個link元素，如代碼清單1-8所示。

 

注意，樣本使用標準的HTML元素連結包含標準CSS樣式的檔案。啟動應用程式後，即可看到使用CSS的效果，1-8所示。

 

【Asp.net入門09】第一個Asp.net應用程式-建立表單並設定其樣式