24/05/2018, 20:49

Sử dụng các điều khiển Standard

Trong chương này các bạn sẽ học các điều khiển cở bản của ASP.NET Framework, đây là những điều khiển mà bạn thường xuyên sử dụng trong ứng dụng web của mình. Label Một số thuộc tính Các thuộc tính của ...

Trong chương này các bạn sẽ học các điều khiển cở bản của ASP.NET Framework, đây là những điều khiển mà bạn thường xuyên sử dụng trong ứng dụng web của mình.

Label

Một số thuộc tính

Các thuộc tính của label
Tên thuộc tinh Ảnh hưởng
BackColor Cho phép thay đổi màu nền của Label
BorderColor Cho phép thiết lập đường viền của Label
BorderStyle Hiển thị đường viền của Label theo các dạng Notset, None, Dotted, Dashed, Solid, Double, Groove, Ridge, Insert và OutSet.
cssClass Cho phép đưa vào một lớp css
Font Thiết lập thuộc tính của Font
ForeColor Thiết đặt màu chữ nội dung của Label
Style Cho phép gán các thuộc tính cho Label
ToolTip Hiển thị nội dung khi di chuột vào điều khiển Label
ID Tên của điều khiển

Tuy điều khiển Label chứa đựng rất nhiều thuộc tính để kết xuất hiển thị nhưng với kinh nghiệm của mình trong quá trình thiết kế Web tôi khuyên bạn lên sử dụng thuộc tính cssClass để sử dụng một lớp css.

Gán thuộc tính trực tiếp

<asp:Label ID="Label1" BackColor="ActiveBorder" BorderColor="ActiveCaption" ForeColor="Blue" Font-Size="12pt" runat="server" Text="Trung tâm công nghệ  cao iTechPro" />

Sử dụng cssClass

<asp:Label ID="Label2" CssClass="label" runat="server" Text="Trung tâm công nghệ  cao iTechPro" />

Kết quả

Điều khiển Literal

Giống với điều khiển Label bạn có thể dùng Literal để trình bày Text hoặc nội dung Html. Literal hỗ trợ một thuộc tính mà Label không hỗ trợ đó là: thuộc tính Mode gồm 3 giá trị là: Pass through, Endcode, transform.

<asp:Literal ID="lit1" runat="server" Text="<hr/>" Mode="PassThrough" />
<asp:Literal ID="lit2" runat="server" Text="<hr/>" Mode="Encode" />
<asp:Literal ID="lit3" runat="server" Text="<hr/>" Mode="Transform" />

Hiển thị:

Điều khiển TextBox

Bảng các thuộc tính:

Các thuộc tính của Textbox
Thuốc tính
Textmode Kiểu hiển thị của Textbox gồm 3 giá trị: SingleLine- hiển thị 1 trường nhập liệu trên 1 dòng, MultiLine- hiển thị 1 trường nhập liệu nhiều dòng, Password- hiển thị 1 trườngnhập mà Text sẽ được thay thế bằng các ký tự đặc biệt
AccessKey Cho pheps bạn chỉ định phím để di chuyển tới controlTextBox
AutoCompleteType Cho phép bạn kết hợp với một lớp autoComplete với điều khiển TextBox.
AutoPostBack Cho phép gửi dữ liệu lên server khi nội dung của TextBox thay đổi.
Columms Cho phép chỉ định số cột được hiển thị trong TextBox
Enabled Cho phép hay không cho phép nhập liệu trên TextBox
MaxLength Cho phép quy đinh độ dài của dữ liệu mà một người sửdụng có thể nhập trên TextBox
ReadOnly Cho phép chỉ đưa dữ liệu ra TextBox chứ không nhập dữliệu vào.
Rows Cho phép chỉ định số dòng hiển thị trong TextBox
TabIndex Cho phép chỉ định thứ tự Tab của TextBox
Wrap Cho phép chỉ định có word-wraps không khi thiết lập thuộc tính TextMode là Multiline

Điều khiển TextBox hỗ trợ phương thức và sự kiện sau:

- Focus: cho phép thiết lập form khởi tạo ưu tiên tới TextBox

- TextChanged: Xảy ra trên Server khi nội dung TextBox thay đổi. để sự kiên này xảy ra bạn cần thiết đặt thuộc tính AutoPostback là true.

Sử dụng điều khiển CheckBox

Các thuộc tính

Các thuộc tính của Checkbox
AccessKey Enables you to specify a key that navigates to the TextBox contro
AutoPostBack nablesyou to post the form containing the CheckBox back to theserver automatically when the CheckBox is checked or unchecked
Checked Cho phép bạn gán hoặc thiết đặt trạng thái chọn hay không chọn của CheckBox
Enabled Cho phép hoặc không cho phép
TabIndex Enables you to specify the tab order of the check box.
Text Enablesyou to provide a label for the check box.
TextAlign Enables you to align the label for the check box. Possible values areLeft and Right.

CheckBox hỗ trợ phương thức va sự kiện

- Focus: Enables you to set the initial form focus to the check box.

- CheckedChanged: Raisedontheserverwhenthecheckboxischeckedorunchecked.

Điều khiển RadioButton

Điều khiển RadioButton luôn được sử dụng trong một nhóm và trong nhóm đó chỉ một RadioButton được chọn

Các thuộc tính

Các thuộc tính của điều khiển RadioButton
Thuộc tính
AccessKey Enablesyou to specify a key that navigates to the RadioButton control
AutoPostBack Enables you to post the form containing the RadioButton back tothe server automatically when the radio button is checked or unchecked
Checked Enables you to get or set whether the RadioButton control is checked.
Enabled Enables you to disable the RadioButton
GroupName Enables you to group RadioButton controls
TabIndex Enables you to specify the tab order of the RadioButton control.
Text Enables you to label the RadioButton control.
TextAlign Enablesyou to align the RadioButton label. Possible values are Leftand Right.

RadioButton hỗ trợ các phương thức và sự kiện

- Focus: Enables youto set the initial form focus to the RadionButton control.

- CheckedChanged: Raised on the server when the unchecked.

Điều khiển Button

Các thuộc tính:

Các thuộc tính của điều khiển Button
AccessKey Cho phép chỉ định phím di chuyển tới điều khiển Button.
CommandArgument Cho phép bạn chỉ rõ đối số được truyền tới lệnh thực hiện.
CommandName Chỉ định tên một lệnh được truyền tới trong Command Event.
Enabled Cho phép vô hiệu hoá điều khiển Button
OnClientClick Cho phép chỉ định đến một hàm phía client khi nhấn vào Button.
PostBackUrl Cho phép trả dữ liệu lên một trang khác.
TabIndex Chỉ định thứ tự tab của Button.
Text Nội dung text hiển thị trên điều khiển Button.
UseSubmitBehavior Cho phép sử dụng javascript để trả dữ liệu lên một form.

Các phương thức và sự kiện

- Focus: Cho phép thiết lập khi khơi tạo Form ưu tiên điều khiển TextBox.

- Click: Xảy ra khi điều khiển Button được nhấn.

- Command: Xảy ra khi điều khiển Button được nhấn. CommandName và

CommandArgument được truyền qua sự kiện.

Điều khiển LinkButton

Các phương thức và thuộc tính giống với điều khiển Button nhưng cách hiển thị của nó dưới dạng Text giống như thẻ <a> của HTML và có thể áp dụng thuộc tính css của thể <a> cho đối tượng LinkButton.

Học viên tự tìm hiểu thêm

Điều khiển ImageButton

Các thuộc tính và phương thức của điều khiển Button và thêm vào một số thuộc tính

Các thuộc tính của điều khiển ImageButton
Thuộc tính
ImageUrl Chỉ đến đường dẫn của ảnh
ImageAlign Cho phép căn chỉnh ảnh trong ImageButton các giá trị của nó có thể là: AbsBottom, AbsMiddle, Baseline, Bottom,Left, Middle, NotSet, Right, TextTop, and Top.

Sử dụng Client Scripts với điều khiển Button

Cả ba điều khiển Button trên đều có thuộc tính OnClientClick, bạn có thể sử dụng thuộc tính này để thực hiện mã phía Client mà bạn cần khi điều khiển Button được nhấn.

<%@ Page Language="C#"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void btnDelete_Click(object sender, EventArgs e)
{
lblResult.Text = "All pages deleted!";
}
</script>
<html>
<head runat="server">
<title>iTechPro</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" OnClick="Button1_Click" OnClientClick="return confirm('Bạn có chắc chắn?');" runat="server" Text="Button" /><br />
<asp:Label ID="Label1" runat="server" Text="iTechPro" />
</div>
</form>
</body>
</html>

Giải thích ví dụ: trên đoạn mã trên trong form gồm 2 điều khiển Button và Label. Trong điều khiển Button ta gán vào 2 sự kiện: OnClientClick phía Clien, và OnClick phía Server

OnClientClick sẽ thực hiện khi người dùng phía Client nhấn vào Button, trong mã Client trình bày một hàm confirm trong javascript với mục đính hỏi người dùng xác nhận việc thực hiện nào đó “Bạn có chắc chắn?” nếu người dùng chọn OK thì Sự kiện thứ 2 OnClick sẽ được thực hiện còn nếu chọn Cancel thì sự kiện phía Server không được thực hiện.

Thực hiện chuyển trang

Mặc định khi bạn nhấn vào Button nó sẽ thực hiện công việc ngay trên trang và trang của chúng ta sẽ Load lại một lần nhưng bạn có thể sử dụng thuộc tính PostBackUrl để chuyển sang một trang khác.

Trang ButtonSearch.aspx
 <%@ 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>iTechPro</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="lblSearch" runat="server" Text="Search:" />
<asp:TextBox ID="txtSearch" runat="server" />
<asp:Button ID="btnSearch" Text="GO!" runat="server" PostBackUrl="ButtonSearchResult.aspx" />
</div>
</form>
</body>
</html>

Trong thuộc tính PostBackUrl của điều khiển btnSearch sẽ chuyển sang trang ButtonSearchResult

  <script runat="server">
void Page_Load(object sender, EventArgs e)
{
if (PreviousPage != null)
{
TextBox txtSearch = (TextBox)PreviousPage.FindControl("txtSearch");
lblSearch.Text = txtSearch.Text;
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>iTechPro</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="lblSearch" runat="server" />
</div>
</form>
</body>
</html>
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Trong đoạn mã trên ta để ý phương thức FindControl của PreviousPage nó sẽ tìm đến Điều khiển trên trang ButtonSearch.aspx mà ta cung cấp ID của nó.

Chỉ định một Button mặc định

Ví dụ trên trang của bạn có nhiều điều khiển Button, khi nhập dữ liệu bạn lại quen nhập xong dữ liệu và nhấn nút Enter trên bàn phím, bạn có thể để mặc định nút cập nhật dữ liệu làm mặc định khi nhấn phím Emter. Như ví dụ dưới đây.

<%@ Page Language="C#" %>
<script runat="server">
void btnXacnhan_Click(object sender,EventArgs e)
{
lblThongbao.Text = txtHoten.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>iTechPro</title>
</head>
<body>
<form id="form1" runat="server" defaultbutton="btnXacnhan">
<div>
<asp:Label ID="lblHoten" runat="server" Text="Nhập họ  tên" />
<asp:TextBox ID="txtHoten" runat="server" />
<hr />
<asp:Button ID="btnXacnhan" OnClick="btnXacnhan_Click" runat="server" Text="Xác nhận" />
<asp:Button ID="btnBoqua" runat="server" Text="Bỏ  qua" />
<hr />
<asp:Label ID="lblThongbao" runat="server" Text="" />
 </div>
</form>
</body>
</html>

Điều khiển Command Event

Sự khác nhau giữa Command Event và Command Click là trong Command Event bạn có thể cung cấp Command Name và Command argument

Trong các ví dụ trước tôi đã lấy ví dụ về sự kiện Command Click nên bây giờ tôi sẽ lấy một ví dụ về Command Event để bạn so sánh.

Ví dụ trên trang bạn có 3 điều khiển Button như ví dụ dưới đây:

<%@ Page Language="C#"%>
<script runat="server">
void hcubiuChon(object sender, CommandEventArgs e)
{
if (e.CommandName == "language")
{
switch (e.CommandArgument.ToString())
{
case "C#":
lblComandEvent.Text = "CShap";
break;
case "VBNET":
lblComandEvent.Text = "VB.NET";
break;
case "JAVA":
lblComandEvent.Text = "Java";
 
break;
}
}
</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>iTechPro</title>
</head>
<body>
<form id="form1" runat="server">
<div>
Bạn chọn ngôn ngữ:
<asp:Label ID="lblComandEvent" runat="server" 
Text=""></asp:Label>
<br />
<asp:Button ID="btna" OnCommand="hcubiuChon" 
CommandName="language" CommandArgument="C#" runat="server" Text="C#" />
<asp:Button ID="btnb" OnCommand="hcubiuChon" 
CommandName="language" CommandArgument="VBNET" runat="server" Text="VB.NET" />
<asp:Button ID="btnc" OnCommand="hcubiuChon" CommandName="language" CommandArgument="JAVA" runat="server" Text="Java" />

</div>
</form>
</body>
</html>

Cả ba điều khiển Button trên đều chứa Tên lệnh và đối số lệnh và tuỳ thuộc vào đối số lệnh khác nhau để ta có thể thực hiện một công việc tương ứng.

ASPNET bao gồm 2 điều khiển hiển thị ảnh. điều khiển Image và ImageMap.

Điều khiển Image

Điều khiển này dùng để hiển thị ảnh giống với thẻ <Img> trong HTML Các thuộc tính quan tâm

Các thuộc tính của điều khiển Image
Thuộc tính
AlternateText Nội dung thay thế khi lỗi đường dẫn của ảnh
DescriptionUrl Cho phép bạn cung cấp một đường dẫn đến trang miêu tả chi tiết nội dung của ảnh
ImageAlign Cho phép căn chỉnh ảnh lên quan tới các thành phần HTML khác trong trang và nó có thể là các giá trị sau:AbsBottom, AbsMiddle, Baseline, Bottom, Left, Middle, NotSet, Right, TextTop, and Top.
ImageUrl Đường dẫn của ảnh trên điều khiển
<%@ Page Language="C#" %>

<script runat="server">
void Page_Load(object sender, EventArgs e)
{
Random rnd = new Random();
switch (rnd.Next(3))
{
case 0:
Image1.ImageUrl = "Images/images1.jpg"; 
Image1.AlternateText = "Picture 1"; 
break;
case 1:
Image1.ImageUrl = "Images/images2.jpg";
 
Image1.AlternateText = "Picture 2";
break;
case 2:
Image1.ImageUrl = "Images/images3.jpg"; 
Image1.AlternateText = "Picture 3"; 
break;
}
}
</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>iTechPro</title>

</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Image ID="Image1" runat="server" />
</div>
</form>
</body>
</html>

Điều khiển ImageMap

Cho phép bạn tạo bản đồ ảnh trên 1 ảnh hiển thị trên trang web mà người dùng phía Client có thể chọn vào một vùng của ảnh để thực hiện một công việc nào đó.

<%@ Page Language="C#"%>
<script runat="server">
void ImageMap1_Click(object sender, ImageMapEventArgs e)
{
switch (e.PostBackValue)
{
case "top":
lblResult.Text = "Day la phan dau";
break;
case "middle":
lblResult.Text = "day la phan giua";
break;
case "under":
lblResult.Text = "day la phan cuoi";
break;
}
}
</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>iTechPro</title>
</head>
<body>
<form id="form1" runat="server">
 
<div>
<asp:ImageMap ID="ImageMap1" HotSpotMode="PostBack" 
OnClick="ImageMap1_Click" ImageUrl="~/Images/jiwoo18034.jpg" runat="server">
<asp:RectangleHotSpo
t 
PostBackValue="top" 
Left="0"
Top="0"
Right="300" 
Bottom="150" 
AlternateText="Top" 
/>
<asp:RectangleHotSpot
PostBackValue="middle" 
Left="0"
Top="150"
Right="300" 
Bottom="300"
AlternateText="middle" />

<asp:RectangleHotSpot 
PostBackValue="under" 
Left="0"
Top="300" 
Right="300" 
Bottom="450"
AlternateText="Under" />
</asp:ImageMap>
<asp:Label ID="lblResult" runat="server" />
</div>
</form>
 
</body>
</html>

Các thuộc tính của ImageMap giống với Image và thêm vào hai thuộc tính đó là:

- HotSpots: cho phép bạn điền tập hợp thông tin của HotSpots được chứa đựng trong điều khiển ImageMap.

- HotSpotMode:Cho phép bạn chỉ định Enables you to specifythe behavior of the image map when you click a region. Possible values are Inactive, Navigate, NotSet, and PostBack.

Khi bạn cần đưa các điều khiển trang vào một nhóm để giải thích nghĩa cho nhóm đó hoặc có thể là để ần hoặc hiện nhóm điều khi nhấn 1 sự kiện nào đó trên trang của bạn, bạn

có thể dùng điều khiển panel.

Một số thuộc tính của điều khiển panel mà bạn cần lưu ý là:

- DefaultButton: Cho phép bạn định nghĩa một button mặc định trong panel mà button mặc định này sẽ được thực hiện khi bạn nhấn phím Enter

- Direction: Cho phép bạn gán hoặc thiết đặt hướng hiển thị nội dung được đưa ra trong panel, có thể là các giá trị:NotSet, LeftToRight, and RightToLeft.

- GroupingText: Cho phép bạn trình bày Panel như 1 Fieldset với một chú giải riêng biệt

- HorizontalAlign: Cho phép bạn chỉ ra hướng ngang thể hiện nội dung của panel và nó có thẻ là các giá trị: Center, Justify, Left, NotSet, and Right.

- ScrollBars: Cho phép bạn hiển thị scrollbars khi bạn cố định chiều cao hoặc chiều rộng của panel và nội dung trong panel vượt quá độ rộng hoặc độ cao đó, nó có thể là các giá trị: Auto, Both, Horizontal, None, and Vertical.

  <%@ Page Language="C#" %>

<script runat="server">
void Page_Load(object sender, EventArgs e)
{
for (int i = 1; i < 100; i++)
 
{
buletnghenghiep.Items.Add("Nghề  "+i.ToString());
}
}
void hcubiuSothich(object sender, EventArgs e)
{
if (chkhtsothich.Checked == true)
panelsothich.Visible = true;
else
panelsothich.Visible = false;
}
void hcubiuNghenghiep(object sender, EventArgs e)
{
if (chkhtnghenghiep.Checked == true)
panelnghenghiep.Visible = true;
else
panelnghenghiep.Visible = false;
}
</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>iTechPro</title>
</head>
 
<body>
<form id="form1" runat="server">
<div>
<asp:Panel ID="panelpage" runat="server" GroupingText="iTechPro">
<table>
<tr>
<td>
<asp:Panel ScrollBars="auto" ID="panelsothich" Width="200px" Height="200px" runat="server" GroupingText="Sở  thích">
<asp:CheckBox ID="CheckBox1" Text="Bóng đá" runat="server" /><br
/>
<asp:CheckBox ID="CheckBox2" Text="Xem phim" runat="server" /><br
/>
<asp:CheckBox ID="CheckBox3" Text="Kinh doanh" runat="server" />
</asp:Panel>
</td>
<td>
<asp:Panel ID="panelnghenghiep" Width="200px" Height="200px" ScrollBars="Vertical" runat="server" GroupingText="Nghề  nghiệp">
<asp:BulletedList ID="buletnghenghiep" runat="server">
</asp:BulletedList>
</asp:Panel>
</td>
</tr>
<tr>
<td>
<asp:CheckBox Checked="true" ID="chkhtsothich"
AutoPostBack="true" OnCheckedChanged="hcubiuSothich" Text="Hiển thị  sở  thích"
runat="server" /><br />
<asp:CheckBox Checked="true" ID="chkhtnghenghiep" AutoPostBack="true" OnCheckedChanged="hcubiuNghenghiep" Text="Hiển thị  nghề nghiệp" runat="server" /><br />
 
</td>
</tr>
</table>
</asp:Panel>
</div>
</form>
</body>
</html>

Điều khiển HyperLink cho phép tạo 1 link tới trang web khác, không giống với LinkButton, HyperLink không đệ trình dữ liệu lên server.

0