Sử dụng các điều khiển khác
Ở phần đầu của chương này các bạn sẽ được học sử dụng điều khiển FileUpload để cho phép chúng ta đưa các file dữ liệu lên Server, như là các file ảnh, word hay excel… Ở chương này các bạn cũng được học các điều khiển khác như Calendar, ...
Ở phần đầu của chương này các bạn sẽ được học sử dụng điều khiển FileUpload để cho phép chúng ta đưa các file dữ liệu lên Server, như là các file ảnh, word hay excel…
Ở chương này các bạn cũng được học các điều khiển khác như Calendar, AdRotator, Multiview, Wizard.
Điều khiển FileUpload cho phép người sử dụng Upload file từ chính ứng dụng Web của mình.
File sau khi Upload có thể lưu trữ ở 1 nơi nào đó có thể là trên ổ cứng hay trong Database.
Điều khiển FileUpload hỗ trợ các thuộc tính sau:
| Thuộc tính | Ý nghĩa |
| Enable | Cho phép bạn vô hiệu hoá điều khiển FileUpload. |
| FileBytes | Cho phép lấy nội dung file đã được upload như một mảng Byte. |
| FileContent | Cho phép lấy nội dung của file đã được upload theo dòng dữ liệu |
| FileName | Lấy tên file được Upload |
| HasFile | Trả về giá trị đúng khi File được Upload |
| PostedFile | Enables you to get the uploaded file wrapped in the HttpPostedFile object. |
Điều khiển FileUpload hỗ trợ các phương thức
- Focus: Enables you to shift the form focus to the FileUpload control.
- SaveAs: Cho phép bạn lưu file được upload lên hệ thống.
Thuộc tính PostedFile của điều khiển FileUpload cho phép lấy thông tin từ File upload được bao bọc trong đối tượng HttpPostedFile. đối tượng này sẽ đưa thêm thông tin về Upload file.
Lớp HttpPostedFile gồm các thuộc tính sau:
- ContentLength: Lấy về kích thước của File Upload tính theo byte
- ContentType: lấy kiểu MIME của File Upload
- FileName: cho phép lấy tên của file được upload.
- InputStream: Enables you to retrieve the uploaded file as a stream.
Lớp HttpPostedFile chỉ hỗ trợ phương thức
- SaveAs: Cho phép bạn lưu file được upload lên hệ thống.
Upload 1file lên Server
Trong ví dụ sau bạn sẽ được học cách Upload 1 file ảnh lên đĩa cứng của Server.
<%@ Page Language="C#" Debug="true" AutoEventWireup="true"
CodeFile="Fileupload.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>FileUpload</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="Chọn File"></asp:Label>
<asp:FileUpload ID="FileUpload1" runat="server" Width="286px" />
<br />
<asp:Button ID="Button1" runat="server" Text="Add image" Width="92px"
onclick="Button1_Click" />
<hr />
<br />
<asp:DataList ID="listImage" RepeatColumns="3" runat="server">
<ItemTemplate>
<asp:Image ID="Image1" ImageUrl='<%# Eval("Name", "~/Upload/{0}")
%>' style="awidth:200px" Runat="server" />
<br />
<%# Eval("Name") %>
</ItemTemplate>
</asp:DataList>
</div>
</form>
</body>
</html>
Code 1b.Fileupload.aspx.cs
using System;
using System.Data;
using System.IO;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Page_PreRender()
{
string upload_folder = MapPath("~/Upload/"); DirectoryInfo dir = new DirectoryInfo(upload_folder); listImage.DataSource = dir.GetFiles(); listImage.DataBind();
}
bool CheckFileType(string fileName)
{
string ext = Path.GetExtension(fileName);
switch (ext.ToLower())
{
case ".gif":
return true;
case ".png":
return true;
case ".jpg":
return true;
case ".jpeg":
return true;
default:
return false;
}
}
protected void Button1_Click(object sender, EventArgs e)
{
if (FileUpload1.HasFile)
{
if(CheckFileType(FileUpload1.FileName))
{
string filepath = "~/Upload/" + FileUpload1.FileName; FileUpload1.SaveAs(MapPath(filepath));
}
}
}
}
Giải thích ví dụ trên: Trong sự kiện Button1_Click Kiểm tra có tồn tại File để Upload? Nếu đúng thì kiểm tra kiểm tra file upload có phải đúng định dạng của ảnh không bằng hàm CheckFileType nếu đúng thì sẽ thực hiện việc ghi file lên server với phương thức SaveAs của điều khiển FileUpload.
Bạn có thể hiển thị một lịch trên trang web của mình với điều khiển Calendar
Ví dụ sau sẽ trình bày một Calendar đơn giản
<%@ Page Language="C#"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head runat="server"> <title>Calendar</title> </head> <body> <form id="form1" runat="server"> <div> <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar> </div> </form> </body> </html>
Kết xuât của nó sẽ như sau:
Các thuộc tính
| Thuộc tính | Ý nghĩa |
| DayNameFormat | Cho phép bạn chỉ rõ sự xuất hiện các ngày của tuần, có thể là các giá trị: FirstLetter, FirstTwoLetters, Full, Short, và Shortest. |
| NextMonthText | Chỉ định Text xuất hiện cho liên kết tháng tiếp theo |
| NextPrevFormat | Cho phép bạn chỉ rõ định dạng tháng tiếp theo và tháng trước đó, nó có thể là các giá trị: CustomText, FullMonth, và ShortMonth. |
| PreMonthText | Cho phép bạn chỉ định hiển thị text cho liên kế tháng trước đó |
| SelectedDate | Cho phép bạn lấy về hoặc thiết đặt cho ngày lựa chọn |
| SelectedDates | Cho phép bạn gán hoặc lấy về một tập các ngày được lựa chọn |
| SelectionMode | Cho phép chỉ định các ngày được lựa chọn có giá trị như thế nào, nó có thể là các giá trị sau: Day, DayWeek, DayWeekMonth, và none. |
| SelectMonthText | Cho phép hiển thị Text cho 1 tháng được chọn |
| SelectWeekText | Cho phép hiển thị Text cho 1 tuần được chọn |
| ShowdayHeader | Cho phép hiển thị tên ngày hay không trên đỉnh của điều khiển. |
| ShowNextPrevMonth | Cho phép hiển thị hay không liên kết đến tháng tiếp theo hoặc tháng trước đó. |
| ShowTitle | Cho phép bạn ẩn hay hiện Text trên thanh tiêu đề của điều khiểnCalendar. |
| TitleFormat | Cho phép định dang text trên thanh tiêu đề, các giá trị của nó có thểlà Month và MonthYear. |
| TodaysDate | Cho phép bạn chỉ rõ ngày hiện tại mặc định lấy ngày hiện tại trênServer. |
Các sự kiện
- DayRender: Raised as each day is rendered.
- SelectionChanged: Xảy ra khi một ngày mới, tuần mới hay tháng mới được lựa chọn.
- VisibleMonthChanged: xảy ra khi liên kết đến tháng tiếp theo hoặc tháng trước đó được nhấn.
Ví dụ sau sẽ trình bày cách lấy thông tin khi chúng ta lựa chọn nhiều ngày trên đối tượng Calendar.
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Calendarmultiselect.aspx.cs" Inherits="Calendarmultiselect" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head runat="server">
<title>Multi select date</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Calendar ID="calendar1" SelectionMode="DayWeekMonth" runat="server" SelectedDate="2008-04-18" TitleFormat="Month"></asp:Calendar>
<br />
<asp:Button ID="btnSubmit" runat="server" OnClick="btnSubmit_Click" Text="Submit" Width="83px" /><br />
<hr />
</div>
<asp:BulletedList ID="bllresult" runat="server" DataTextFormatString="{0:d}">
</asp:BulletedList>
</form>
</body>
</html>
Code 3b. Calendamultiselect.aspx.cs
using System;
public partial class Calendarmultiselect : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
bllresult.DataSource = calendar1.SelectedDates;
bllresult.DataBind();
}
}
Kết xuất của ví dụ 3
Tạo một Popup Datepicker
Trong phần này bạn sẽ học cách sử dụng điều khiển Calendar kết hợp với Javacript để tạo một Pop-up Date picker như trong hình dưới đây:
Code 4. popupdatepicker.aspx
<%@ Page Language="C#" %>
<script runat="server">
protected void calEventDate_SelectionChanged(object sender, EventArgs e)
{
txtEventDate.Text = calEventDate.SelectedDate.ToString("d");
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
lblResult.Text = "Bạn chọn: " + txtEventDate.Text;
}
</script>
<!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>Pop-up Date Picker</title>
<script type="text/javascript">
function displayCalendar()
{
var datePicker = document.getElementById('datePicker');
datePicker.style.display = 'block';
}
</script>
<style type="text/css">
#datePicker
{
display:none; position:absolute; border:solid 2px black; background-color:white;
}
.content
{
awidth:0px;
background-color:white; margin:auto; padding:10px;
}
html
{
background-color:silver;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="content">
<asp:Label id="lblEventDate" Text="Nhập ngày:" Runat="server" />
<asp:TextBox id="txtEventDate" Runat="server" />
<img src="img.gif" alt="" onclick="displayCalendar()" />
<div id="datePicker">
<asp:Calendar id="calEventDate" OnSelectionChanged="calEventDate_SelectionChanged" Runat="server" />
</div>
<br />
<asp:Button id="btnSubmit" Text="Submit" Runat="server" OnClick="btnSubmit_Click" />
<hr />
<asp:Label id="lblResult" runat="server" />
</div>
</form>
</body>
</html>
Cho phép bạn hiển thị các ảnh quảng cáo khác nhau trong 1 trang. bạn có thể lưu trữ các quảng cáo của bạn trong 1 file XML hoặc một bảng cơ sở dữ liệu.
. Các thuộc tính
| Thuộc tính | Ý nghĩa |
| AdvertisementFile | Cho phép bạn chỉ định đến đường dẫn file XML chứa đựng danh sách ảnh quảng cáo |
| AlternateTextField | Cho phép chỉ định đến tên của trường để hiển thị nội dung thay thế khiảnh quảng cáo vì một lý do nào đó không hiển thị được |
| DataMenber | Cho phép ràng buộc đến một thành viên cơ sở dữ liệu của nguồn cơ sởdữ liệu |
| DataSource | Chỉ rõ cở sở dữ liệu chứa danh sách các banner quảng cáo |
| DataSourceID | Ràng buộc đến 1 cơ sở dữ liệu |
| ImgUrlFile | Chỉ rõ đến trường chứa đường dẫn banner quảng cáo |
| KeywordFilter | Cho phép bạn lọc quảng cáo bởi 1 từ khoá |
| NavigateUrlField | Chỉ rõ đến tên của trường chứa các liên kết quảng cáo |
| Target | Cho phép bạn mở ra một cửa sổ mới khi nhấn vào banner quảng cáo |
Sự kiện
- AdCreated: Xảy ra sau khi điều khiển Adrotator lựa chọn một quảng cáo nhưng trước khi điều khiển AdRotator đưa ra quảng cáo.
Chú ý rằng điều khiển AdRotator chứa đựng thuộc tính KeywordFilter bạn có thể cung cấp mỗi banner quảng cáo với 1 từ khoá sau đó khi trình bày quảng cáo chúng ta có thể lọc những quảng cáo theo điều kiện để hiển thị.
Ví dụ như trên trang của bạn, bạn cần trình bầy quảng cáo ở 4 vị trí trên banner(top) của trang, bên trai, phải và phía chân(bottom) của trang. Khi đó bạn gán với mỗi ảnh quảng cáo một từ khoá(ví dụ tương ứng với 1- top, 2- right, 3 – bottom, 4 - left) và khi trình bầy trong điều khiển AdRotator ta có thể dùng thuộc tính KeywordFilter để lọc và trình bày.
Code 5a: AdRotatorXML.aspx
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="AdRotatorXML.aspx.vb"
Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head runat="server">
<title>AdRotator XML</title>
<style type="text/css">
#wrapper {awidth: 782px; margin: 0 auto;}
#border { border: 1px solid #8ECE5F; margin: 20px 0px 5px 0px;
background-color: #ffffff; min-height: 776px; float: right; awidth: 780px;}
#header {background-color:#BECEF5; text-align: awidth:782px;
height:00px; center; margin: 6px 0px 0px 0px;}
#right{background-color:#BECEF5; awidth:170px;margin: 6px 0px 0px 4px;
height:00px; float:right}
.box{ float:right;padding:10px; border-left:solid 1px black;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="wrapper" >
<div id="border">
<div id="header">
<asp:AdRotator ID="advbanner" AdvertisementFile="~/App_Data/AdList.xml" KeywordFilter="banner" runat="server" />
</div>
<div id="right">
<div class="box">
<asp:AdRotator ID="AdRotator1"
AdvertisementFile="~/App_Data/AdList.xml" KeywordFilter="right" runat="server"/>
</div>
<div class="box">
<asp:AdRotator ID="AdRotator2"
AdvertisementFile="~/App_Data/AdList.xml" KeywordFilter="right" runat="server"/>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Nội dung File XML
Code 5b.
<?xml version=".0" encoding="utf-8" ?> <Advertisements> <Ad> <ImageUrl>~/Advertisement/images/banner.png</ImageUrl> <Width>82</Width> <Height>100</Height> <NavigateUrl>http://www.itechpro.com.vn</NavigateUrl> <AlternateText>Cong ty cong nghe cao iTechPro</AlternateText> <Impressions>50</Impressions> <Keyword>banner</Keyword> </Ad> <Ad> <ImageUrl>~/Advertisement/images/banner2.gif</ImageUrl> <Width>82</Width> <Height>100</Height> <NavigateUrl>http://www.itechpro.com.vn</NavigateUrl> <AlternateText>Cong ty cong nghe cao iTechPro</AlternateText> <Impressions>50</Impressions> <Keyword>banner</Keyword> </Ad> <Ad> <ImageUrl>~/Advertisement/images/anh1.gif</ImageUrl> <Width>50</Width> <Height>150</Height> <NavigateUrl>http://www.itechpro.com.vn</NavigateUrl> <AlternateText>Box Advertisement 1</AlternateText> <Impressions>50</Impressions> <Keyword>right</Keyword> </Ad> <Ad> <ImageUrl>~/Advertisement/images/anh1.gif</ImageUrl> <Width>50</Width> <Height>150</Height> <NavigateUrl>http://www.itechpro.com.vn</NavigateUrl> <AlternateText>Box Advertisement 1</AlternateText> <Impressions>50</Impressions> <Keyword>right</Keyword> </Ad> <Ad> <ImageUrl>~/Advertisement/images/anh2.gif</ImageUrl> <Width>50</Width> <Height>150</Height> <NavigateUrl>http://www.itechpro.com.vn</NavigateUrl> <AlternateText>Box Advertisement 1</AlternateText> <Impressions>50</Impressions> <Keyword>right</Keyword> </Ad> <Ad> <ImageUrl>~/Advertisement/images/anh3.gif</ImageUrl> <Width>50</Width> <Height>150</Height> <NavigateUrl>http://www.itechpro.com.vn</NavigateUrl> <AlternateText>Box Advertisement 1</AlternateText> <Impressions>50</Impressions> <Keyword>right</Keyword> </Ad> <Ad> <ImageUrl>~/Advertisement/images/anh4.gif</ImageUrl> <Width>50</Width> <Height>150</Height> <NavigateUrl>http://www.itechpro.com.vn</NavigateUrl> <AlternateText>Box Advertisement 1</AlternateText> <Impressions>50</Impressions> <Keyword>right</Keyword> </Ad> <Ad> <ImageUrl>~/Advertisement/images/anh5.gif</ImageUrl> <Width>50</Width> <Height>150</Height> <NavigateUrl>http://www.itechpro.com.vn</NavigateUrl> <AlternateText>Box Advertisement 1</AlternateText> <Impressions>50</Impressions> <Keyword>right</Keyword> </Ad> <Ad> <ImageUrl>~/Advertisement/images/anh6.gif</ImageUrl> <Width>50</Width> <Height>150</Height> <NavigateUrl>http://www.itechpro.com.vn</NavigateUrl> <AlternateText>Box Advertisement 1</AlternateText> <Impressions>50</Impressions> <Keyword>right</Keyword> </Ad> </Advertisements>
Điều khiển MultiView cho phép bạn ẩn hoặc hiện các phần khác nhau của trang Web, điều khiển này tiện ích khi bạn tạo một TabPage. Nó thực sự tiện ích khi bạn muốn chia 1 trang web có độ dài lớn thành các phần để hiển thị
Điều khiển MultiView chứa đựng 1 hoặc nhiều điều khiển View, bạn sử dụng Multiview để lựa chọn các điều khiển View để trình bày.
Điều khiển MultiView hỗ trợ các thuộc tính.
- ActiveViewIndex: Lựa chọn điều khiển View được đưa ra hiển thị bằng chỉ số Index
- Views: Cho phép bạn lấy về tập hợp các điều khiển View chứa đựng trong điều khiển MultiView.
Điều khiển MultiView hỗ trợ hai phương thức.
- GetActiveView: Cho phép lấy về thông tin của điều khiển View được lựa chọn.
- SetActiveView: cho phép bạn thiết lập điều khiển View được hiên thị.
Và MultiView hỗ trợ sự kiện sau:
- ActiveViewChanged: Xảy ra khi điều khiển View được lựa chọn
Cách sử dụng
Hiển thị như một TabPage
Khi bạn sử dụng MultiView kết hợp với điều khiển Menu bạn có thể tạo một TabPage
Ví dụ sau sẽ hướng dẫn bạn tạo một TabPage từ 2 điều khiển Menu và MultiView
<%@ Page Language="C#" %>
<script runat="server">
void Menu1_MenuItemClick(object sender, MenuEventArgs e)
{
int index = Int32.Parse(e.Item.Value); MultiView1.ActiveViewIndex = index;
}
void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
MultiView1.ActiveViewIndex = 0;
}
}
</script>
<!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>Create a TabView</title>
<style type="text/css">
html
{
background-color:silver;
}
.tabs
{
position:relative;
top:1px;
left:10px;
}
.tab
{
border:solid 1px black; background-color:#eeeeee; padding:2px 10px;
}
.selectedTab
{
background-color:white;
border-bottom:solid 1px white;
}
.tabContents
{
border:solid 1px black;
padding:10px;
background-color:white;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Menu ID="Menu1" OnMenuItemClick="Menu1_MenuItemClick" runat="server"
Orientation="Horizontal" StaticMenuItemStyle-CssClass="tab"
StaticSelectedStyle-CssClass="selectedTab" CssClass="tabs">
<Items>
<asp:MenuItem Text="Tab 1" Value="0" Selected="true"></asp:MenuItem>
<asp:MenuItem Text="Tab 2" Value="1"></asp:MenuItem>
<asp:MenuItem Text="Tab 3" Value="2"></asp:MenuItem>
</Items>
</asp:Menu>
<div class="tabContents">
<asp:MultiView ID="MultiView1" runat="server">
<asp:View ID="view1" runat="server"> Day la View 1<br />
Day la View 1<br /> Day la View 1<br /> Day la View 1<br /> Day la View 1<br /> Day la View 1<br />
</asp:View>
<asp:View ID="view2" runat="server"> Day la View 2<br />
Day la View 2<br /> Day la View 2<br /> Day la View 2<br /> Day la View 2<br /> Day la View 2<br />
</asp:View>
<asp:View ID="view3" runat="server"> Day la View 3<br />
Day la View 3<br /> Day la View 3<br /> Day la View 3<br /> Day la View 3<br /> Day la View 3<br />
</asp:View>
</asp:MultiView>
</div>
</div>
</form>
</body>
</html>
Trong ví dụ trên Menu được kết hợp với CSS để tạo ra các trạng thái khi MenuItem được chọn(
StaticSelectedStyle-CssClass="selectedTab") và ko được chọn(
StaticMenuItemStyle-CssClass="tab").
Hiển thị nhiều phần trên trang
Bạn có thể chia một Form có độ dài lớn thành các thành phần nhỏ hơn và hiển thị từng phần, bạn có thể sử dụng các điều khiển Button nằm trong điều khiển MultiView và khi Button được nhấn thì Multiview sẽ xử lý thay đổi hiển thị View khác.
Điều khiển MultiView hỗ trợ các điều khiển lệnh sau:
- NextView: MultiView sẽ kích hoạt điều khiển View tiếp theo
- PrevView: MultiView sẽ kích hoật điều khiển View trước đó
- SwitchViewByID: MultiView sẽ kích hoạt View chỉ định bởi đối số của điều khiển Button
- SwitchViewByIndex: MultiView sẽ kích hoạt View chỉ định bởi đối số của điều khiển Button
Bạn có thể sử dụng các điều khiển lệnh như Button, ImageButton, LinkButton. Và thiết lập thuộc tính CommandName, với trường hợp điều khiển lệnh là SwitchViewByID và SwitchViewByIndex bạn thiết lập thêm thuộc tính CommandArgument.
Ví dụ sau sẽ hướng dẫn bạn tạo một Form có nhiều phần với việc sử dụng điều khiển lệnh NextView.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MultipartView.aspx.cs"
Inherits="MiltipartView" %>
<script runat="server">
void View3_Active(object sender, EventArgs e)
{
lblRHoten.Text = txtHoten.Text;
lblRCMT.Text = txtCMT.Text;
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head runat="server">
<title>MultiPart View</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="View1" runat="server">
<asp:Label ID="lblHoten" runat="server" Text="Nhập họ
tên"></asp:Label>
<asp:TextBox ID="txtHoten" runat="server" Width="198px"></asp:TextBox><br />
<asp:Button ID="btnNext1" runat="server" CommandName="NextView" Text="Next" Width="98px" /></asp:View>
<asp:View ID="View2" runat="server">
<asp:Label ID="lblCMT" runat="server" Text="Nhập số
CMT"></asp:Label>
<asp:TextBox ID="txtCMT"
runat="server"></asp:TextBox>
<br />
<asp:Button ID="btnNext2" runat="server" CommandName="NextView" Text="Next" Width="99px" /></asp:View>
<asp:View ID="View3" OnActivate="View3_Active" runat="server">
<asp:Label ID="Label1" runat="server" Text="Họ
tên:"></asp:Label>
<asp:Label ID="lblRHoten" runat="server" Text="Label"></asp:Label><br />
<asp:Label ID="Label2" runat="server" Text="Số
CMT:"></asp:Label>
<asp:Label ID="lblRCMT" runat="server" Text="Label"></asp:Label></asp:View>
</asp:MultiView></div>
</form>
</body>
</html>
Trong ví dụ trên 2 button đầu thiết lập thuộc tính CommandName có giá trị là NextView, do điều khiển MultiView hỗ trợ lệnh NextView lên khi nhấn vào 2 Button đó thì lệnh NextView được thực hiện và kích hoạt View tiếp theo đền View 3 với sự kiện OnActive gọi hàm View3_Active và thực hiện lấy về giá trị của hai TextBox và gán vào 2 Label tương ứng.
Điều khiển Wizard giống với điều khiển MultiView có thể dùng để chia một Form lớn thành nhiều phần nhỏ. Tuy nhiên nó sẽ có thêm một số thuộc tính mà MultiView không hỗ trợ.
Điều khiển Wizard có thể chứa nhiều điều khiển WizardStep con, nhưng chỉ 1 WirardStep được hiển thị tại 1 thời điểm.
Các thuộc tính.
- ActiveStep: cho phép bạn lấy thông tin của WizardStep đang kích hoạt
- ActiveStepIndex: cho phép bạn gán hoặc lấy về chỉ số Index của WizardStep đang kích hoạt
- CancelDestinationPageUrl: cho phép bạn chỉ rõ địa chỉ URL được gửi tới khi người sử dụng nhấn nút Cancel
- DisplayCancelButton: Cho phép ẩn hoặc hiện Cancel Button.
- DisplaySlideBar: Cho phép ẩn hoặc hiện SlideBar(hiển thị tất cả các WizardStep)
- FinishDestinationPageUrl: cho phép bạn chỉ định địa chỉ URL được gửi tới khi người dùng nhấn nút Finish
- HeaderText: cho phép bạn chỉ định tiêu đề hiển thị trên đỉnh của điều khiển Wizard.
- WizadSteps: Cho phép bạn lấy thông tin của các điều khiển WizardStep trong điều khiển Wizard
- Điều khiển Wizard hỗ trợ các Template.
- FinishNavigationTemplate: cho phép hiển thị Navigation ở bước kết thúc
- HeaderTemplate: hiển thị thanh tiêu đề ở đầu của điều khiển Wizard
- SlideBarTemplate: Cho phép hiển thị SlideBar trong điều khiển Wizard
- StartNavigationTemplate: Cho phép hiển thị Navigation ở bước bắt đầu
- StepNavigationTemplate: cho phép hiển thị Navigation ở các bước à không phải bước bắt đầu và kết thúc.
Điều khiển Wizard hỗ trợ các phương thức:
- GetHistory(): cho phép lấy thông tin của các điều khiển Wizard mà đã truy cập.
- GetStepType(): Cho phép bạn trả về kiểu của mỗi WizardStep riêng theo chỉ số, nó có thể là các thuộc tính sau: Auto, Start, Finish hay Step
- MoveTo(): cho phép bạn di chuyển đến một WizardStep.
Điều khiển Wizard hỗ trợ các sự kiện:
- ActiveStepChanged: xảy ra khi một WizardStep trở thành Step được kích hoạt
- CancelButtonClick: xảy ra khi Cancel Button được nhấn.
- FinishButtonClick: xảy ra khi Finish Button được nhấn
- NextButtonClick: Xảy ra khi Next button được nhấn
- PreviousButtonClick: xảy ra khi Previous button được nhấn
- SlideBarButtonClick: xẩy ra khi SlideBar button được nhấn:
Một điều khiển Wizard chứa đựng một hoặc nhiều WizardStep để diễn tả các bước strong quá trình Wizard.
Các WizardStep hỗ trợ các thuộc tính:
- AllowReturn: Ngăn cản hay cho phép người sử dụng trả về bước này từ một bước khác.
- Name: tên của điều khiển WirardStep
- StepType:Cho phép bạn gán hay lấy về kiểu của WirardStep nó có thể là các giá trị sau: Auto, Finish, Start, Complete và Step.
- Title: lấy về hoặc gán tiêu đề của điều khiển WizardStep tiêu đề này được hiển thị ở Wizard Slidebar
- Wizard: cho phép bạn lấy thông tin điều khiển Wizard chứa trong WizardStep.
- Các Sự kiện trong WizardStep
- Activate: Xảy ra khi một WizardStep được kích hoạt
- DeActivate: xảy ra khi WizardStep khác được kích hoạt.
StepType là thuộc tính quan trọng nhất của Wizard, thuộc tính nào xác định WizardStep được đưa ra như thế nào, mặc định là Auto
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="WirardControl.aspx.cs" Inherits="_Default" %>
<script runat="server">
void Wizard1_FinishButtonClick(object sender, WizardNavigationEventArgs e)
{
lblbiet.Text = txt1.Text;
lblkhoahoc.Text = txt2.Text;
}
</script>
<!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>Wizard </title>
<style type="text/css">
.wizard{border:solid 1px black;
font:14px
Verdana,awidth:800px;
height:00px;}
.header{color:gray;
font:bold 18px Verdana,}
.sideBar{background-color:#eeeeee;
padding-left:0px;
awidth:0px;
height:3px;}
.sideBar a{text-decoration:none;}
.step{padding:px;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Wizard ID="Wizard1" HeaderText="Wizard control" OnFinishButtonClick="Wizard1_FinishButtonClick" CssClass="wizard" Width="800px" HeaderStyle-CssClass="header" SideBarButtonStyle-CssClass="sideBar" SideBarStyle-Width="200px" SideBarButtonStyle-Width="200px" StepStyle-CssClass="step" runat="server">
<StepStyle CssClass="step"></StepStyle>
<WizardSteps>
<asp:WizardStep ID="WizardStep1" runat="server" title="Lời giới thiệu">
<asp:Label ID="Label1" Text="Chào mừng bạn đến với trung tâm công nghệ cao runat="server" iTechPRo"></asp:Label>
</asp:WizardStep>
<asp:WizardStep ID="WizardStep2" runat="server" title="step 1">
<asp:Label ID="Label2" runat="server" Text="Bạn biêt đến iTechPro qua phương tiện nào"></asp:Label>
<br />
<asp:TextBox ID="txt1" runat="server"></asp:TextBox>
</asp:WizardStep>
<asp:WizardStep ID="WizardStep3" runat="server" StepType="Finish" title="step 2">
<asp:Label ID="Label3" runat="server" Text="Bạn thích khoá học nào nhất ở iTechPro"></asp:Label>
<asp:TextBox ID="txt2" runat="server"></asp:TextBox>
</asp:WizardStep>
<asp:WizardStep ID="WizardStep4" runat="server" StepType="Complete" title="Tổng kết">
<asp:Label ID="Label4" runat="server" Text="Bạn biết đến iTechPro qua:"></asp:Label>
<asp:Label ID="lblbiet" runat="server" Text=""></asp:Label><br />
<asp:Label ID="Label5" runat="server" Text="Bạn thích nhất khoá học:"></asp:Label>
<asp:Label ID="lblkhoahoc" runat="server" Text=""></asp:Label>
</asp:WizardStep>
</WizardSteps>
</asp:Wizard>
</div>
</form>
</body>
</html>
Giải thích ví dụ:
Trên ví dụ ta đưa vào 4 WizardStep, chương trình sẽ thực hiện trình tự theo các bước và kết thúc với việc nhấn nút Finish ở WizardStep3(được thiết lập thuộc tính StepType=’Finish’) thông qua hàm “Wizard1_FinishButtonClick” sau khi thực hiện hàm này nó sẽ chuyến sang và hiển thị nội dung công việc cần thực hiên thông 2 điều khiển label trên WizardStep4 và điều khiển này được thiết lập thuộc tính tepType=”Complete”.
