ASP.NET中 Wizard 控件的使用方法
先來看看官方介紹
使用表單收集用戶輸入是 Web 開發(fā)中要反復(fù)執(zhí)行的一項任務(wù)。用來完成某項任務(wù)的一組表單通常稱為“向?qū)А?。ASP.NET Wizard 控件簡化了許多與生成多個表單和收集用戶輸入相關(guān)聯(lián)的任務(wù)。Wizard 控件提供了一種簡單的機制,使您能夠輕松地生成步驟、添加新步驟或重新安排步驟順序。無需編寫代碼即可生成線性和非線性的導航,以及自定義控件的用戶導航。
Wizard控件可以用用在下列工作中:
(1)收集多個步驟中的相關(guān)信息。
(2)用于收集用戶輸入的大型Web網(wǎng)頁可分割成較小的邏輯步驟。
(3)允許線性或非線性的導航各個步驟。
Wizard控件可區(qū)分成4大區(qū)域:
(1)向?qū)Р襟E(WizardStep)區(qū)域:Wizard控件使用多個步驟來描繪用戶輸入的不同部分。每個步驟的內(nèi)容添加在標記<asp:WizardStep>中,所有的<asp:WizardStep>又都包含在<WizardSteps>標記中。實際應(yīng)用時,每次只能顯示一個<asp:WizardStep>定義的內(nèi)容。
(2)標題(Header)區(qū)域:用于在步驟頂部提供一致信息,此項是可選元素。
(3)側(cè)欄(sidebar)區(qū)域:此項也是可選元素,通常顯示在向?qū)ё筮?,包含所有步驟的列表,并提供在各個步驟間的跳轉(zhuǎn)。
(4)導航按鈕(Navigation)區(qū)域:是Wizard內(nèi)置導航功能,它會根據(jù)步驟類型(StepType)設(shè)置值的不同,而呈現(xiàn)不同的導航按鈕。
每個WizardStep步驟都會有個StepType屬性,它最主要的作用是決定每個步驟中的導航Button按鈕會如何被顯示。StepType的類型有:Start(開始步驟)、Step(階段步驟)、Finish(完成步驟) 、Complete(結(jié)束步驟) 、Auto(自動),系統(tǒng)自動識別其為何種StepType類型。
Wizard控件使用過程演示
(1)拖放Wizard控件到頁面上,郵件選擇 添加/移除 WizardSteps...
(2)帳號信息 StepType 設(shè)置為 Start
(3)個人基本信息 StepType 設(shè)置為 Step
(4)聯(lián)系方式 StepType 設(shè)置為 Finish
(5)帳號信息選項加入用戶名密碼
(6)基本信息選項加入姓名出生日期
(7)聯(lián)系方式選項加入手機郵箱
(8)雙擊FinishButtonClick生成事件
(9)完成按鈕事件代碼如下
protected void Wizard1_FinishButtonClick(object sender, WizardNavigationEventArgs e)
{
Response.Write("用戶名:" + txtUsername.Text + "<br>");
Response.Write("密碼:" + txtPassword.Text + "<br>");
Response.Write("姓名:" + txtTruename.Text + "<br>");
Response.Write("出生日期:" + txtBirthday.Text + "<br>");
Response.Write("手機:" + txtPhone.Text + "<br>");
Response.Write("郵箱:" + txtEmail.Text + "<br>");
}
至此就可以運行看演示效果了,填寫完用戶名和密碼之后,點擊下一步,填寫姓名和出生日期,再點擊下一步,填寫手機和郵箱,點擊完成,把所有填寫的信息全部輸出。
相關(guān)文章
ASP.NET 5已終結(jié),迎來ASP.NET Core 1.0和.NET Core 1.0
命名是非常困難的事情,微軟這次為了和ASP.NET4.6做區(qū)分,采用了全新的命名方式ASP.NET Core 1.0,它是一個全新的框架。2016-03-03ASP.NET2.0+SQL Server2005構(gòu)建多層應(yīng)用
ASP.NET2.0+SQL Server2005構(gòu)建多層應(yīng)用...2006-12-12.Net結(jié)構(gòu)型設(shè)計模式之橋接模式(Bridge)
這篇文章介紹了.Net結(jié)構(gòu)型設(shè)計模式之橋接模式(Bridge),文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-05-05.Net結(jié)構(gòu)型設(shè)計模式之裝飾模式(Decorator)
這篇文章介紹了.Net結(jié)構(gòu)型設(shè)計模式之裝飾模式(Decorator),文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-05-05