ASP.NET程序設計教程2---關於label和button的基礎用法

上一講,講述瞭如何創建一個ASP.NET網站。這一講,主要講解ASP.NET的基礎用法。
1.2 創建ASP.NET網站的基本步奏
(1)根據用戶需求進行問題分析,構思出合理的程序設計思路。
(2)創建一個新的ASP.NET網站。
(3)設計網站中包含的所有Web頁面的外觀。
(4)設置頁面中所有控件對象的初始屬性值。
(5)編寫用於響應系統時間或用戶事件的代碼。
(6)運行並調試程序。

接下來以一個例子來演練上述過程。
演練:設計一個能顯示當前數據和ASP.NET網站
這是一個簡單的單頁面應用程序,頁面可由一個標籤(Label)控件和一個命令按鈕(Button)控件組成,當單機命令按鈕控件時,調用用於返回系統時間的Now方法,並將返回值顯示到標籤控件中。
1)創建ASP.NET網站
打開visual studio,點擊“文件”–>“新建”–>“網站”命令,這裏不清楚的可以查看上一講。彈出對話框如圖1-1所示。左側選擇visual C#語言,右側選擇“ASP.NET 空網站”,注意是“空網站”。項目取名爲“gettime”,也可以自定義命名。
在這裏插入圖片描述

圖1-1 新建網站對話框
點擊確定後,會得到一個空網站。此時,在“解決方案資源管理器”中,在項目名稱上點擊右鍵,會得到如圖1-2的對話框,按照圖中的提示,選擇“添加新項”,然後會彈出新的對話框,在新的對話框中,選擇“Web窗體”,直接點擊確定即可。

在這裏插入圖片描述

圖1-2 添加新項對話框
完成上述操作以後,會得到如下代碼:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>

直接運行(快捷鍵ctrl+F5),會運行一個空網站,下面將講解如何在這個網站中添加label和button以實現獲取時間的功能。
在visual studio右側的“解決方案資源管理器”中的“Default.aspx”上點擊右鍵,然後選擇“視圖設計器”,操作過程如圖1-3所示。

在這裏插入圖片描述

圖1-3 視圖設計器
接下來,注意visual studio的最右側有一個叫作“工具箱”標籤,點擊(實際鼠標滑到圖標上即可)後,會得到如圖1-4的顯示結果,在這裏主要注意label和button兩項,在圖中已用紅色的方框標註。

在這裏插入圖片描述

圖1-4 工具箱視圖
直接選擇label控件,然後拖動到中間的“Default.aspx”視圖中即可。同樣的,選擇一個button控件拖動到“Default.aspx”中,注意,拖動到“div”中,然後在工具欄中選擇“居中”。完成這一步操作以後,得到如圖1-5的操作結果。

在這裏插入圖片描述

圖1-5 對label和button控件居中操作
接下來,對“Default.aspx”中的Label控件點擊右鍵,選擇“屬性”。如圖1-6所示。

在這裏插入圖片描述

圖1-6 右鍵選擇屬性
在visual studio右下角會彈出屬性菜單欄(部分VS2010環境原本就有這個菜單欄)。修改“**Text**”選項爲“**請點擊按鈕**”。修改“**ID**”爲“**lblShowTime**”,操作結果如圖1-7所示。

在這裏插入圖片描述

圖1-7 修改label控件屬性
同樣的,在button控件上點擊右鍵,選擇屬性,按照圖1-8中進行修改。“Text”修改爲“更新時間”,“ID”修改爲“btnUpdate”。

在這裏插入圖片描述

圖1-8 修改button控件屬性
然後,運行程序(快捷鍵ctrl+F5)。得到如圖1-9的運行結果。

在這裏插入圖片描述

圖1-9 添加控件後的運行結果
點擊“更新時間”按鈕以後,網頁的顯示界面沒有任何更改。實際上,此時還未對button控件的點擊事件編寫代碼,換句話說,此時點擊“更新時間”按鈕,沒有可執行程序。接下來,講解如何對button按鈕的點擊事件進行響應。 回到visual studio中,在“視圖設計器”中(找不到的話,雙擊Default.aspx),在中間的“Default.aspx”中雙擊“更新時間”,將跳轉到“Default.aspx.cs”文件中,此時可以看到以下部分代碼:
protected void btnUpdate_Click(object sender, EventArgs e)
    {

    }

在btnUpdate_Click函數中添加代碼:

lblShowTime.Text = "現在時間是: " + DateTime.Now;

最終整個btnUpdate_Click函數的代碼爲:

protected void btnUpdate_Click(object sender, EventArgs e)
    {
        lblShowTime.Text = "現在時間是: " + DateTime.Now;
    }

然後運行程序(ctrl+F5),再次點擊“更新時間”按鈕,將會得到如圖1-10的運行結果。

在這裏插入圖片描述

圖1-10 獲取時間運行結果
簡單講解以下剛添加的代碼,lblShowTime.Text表示的是剛纔添加的那個Label控件所要顯示的結果,lblShowTime是修改屬性時,給Label控件的ID的取名。DateTime.Now是獲取當前系統時間的方法。 回頭,在看一下“Default.aspx.cs”文件中,還有一個函數叫作Page_Load,我們可以對其代碼進行修改,修改結果如下:
protected void Page_Load(object sender, EventArgs e)
    {
        this.Title = "邦彥cc的ASP.NET應用程序";
    }

運行程序(ctrl + F5),得到如圖1-11的運行結果。
在這裏插入圖片描述

圖1-11 修改title後的運行結果
通過圖1-11的運行結果可以知道,Page_Load函數是在網頁加載的過程中執行的函數,在本例中,我們修改了網站的title,爲title屬性值指定了新的文字。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章