Các đối tượng trong asp.net: 1 Label:

Một phần của tài liệu Giáo trình Thiết kế website (Nghề: Thiết kế đồ hoạ - Cao đẳng) - Trường Cao đẳng nghề Đồng Tháp (Trang 31 - 37)

2.1 Label:

Trong phần này chúng ta sẽ nói về cách sử dụng những control chính trong ASP.NET 4. Đây là những control mà bạn có thể sử dụng trong bất kỳ ứng dụng nào của ASP.NET 4.

Bạn sẽ tìm hiểu làm thế nào để hiển thị thông tin cho người sử dụng bằng cách sử dụng control Label và Literal. Bạn sẽ tìm hiểu làm thế nào để chấp nhận người sư dụng nhập vào dữ liệu bằng cách sư dụng control TextBox, CheckBox và RadioButton. Bạn cũng sẽ tìm hiểu làm sao để có thể gửi thơng tin đi bằng các button. Vào phần cuối bạn sẽ tìm hiểu làm sao để có thể group các control lại với nhau bằng cách sử dụng Panel.

Control dùng để hiển thị thơng tin

ASP.NET có 2 control mà bạn có thể sử dụng để hiển thị text, thơng tin: Label và Literal. Trong khi Literal thì chỉ đơn giản là hiển thị thơng tin, cịn Label thì ngồi việc hiển thị thơng tin, Label cịn hỗ trợ nhiều thuộc tính để format.

Sử dụng Label

Bất kể khi nào bạn muốn chỉnh sửa text, thông tin được hiển thị trên trang web, bạn có thể sử dụng Label.

Ví dụ1, Label bên dưới sẽ hiển thị thời gian hiện tại của Server.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="label- control.aspx.cs"Inherits="Chapter02_label_control" %>

<!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>

<asp:Label ID="lblTime" runat="server" /> </div>

</form> </body> </html> using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls;

public partial class Chapter02_label_control : System.Web.UI.Page {

protected void Page_Load(object sender, EventArgs e) {

lblTime.Text = DateTime.Now.ToString("T"); }

}

Bấy kỳ chuỗi nào bạn gán vào thuộc tính Text của Label thì được hiển thị bởi Label. Bạn có thể gán cho thuộc tính Text này giá trị là text thông thường hoặc là HTML text đều được.

Label hỗ trợ nhiều thuộc tính mà bạn có thể sử dụng để format nội dung được hiển thị trong Label:

 BackColor: cho phép bạn thay đổi màu nền của Label

 BorderColor: cho phép bạn thay đổi màu viền nền của Label

 BorderStyle: cho phép bạn thay đổi hình dạng của đường viền xung quanh Label. Bạn có thể sử dụng các giá trị sau: NotSet, None, Dotted, Dashed, Solid, Double, Groove, Ridge, Inset và Outset.

 BorderWith: cho phép bạn thay đổi kích thước của đường viền.

 CssClass: cho phép bạn kết hợp, sử dụng 1 class trong CSS

 Font: cho phép bạn thay đổi font của Label.

 ForeColor: cho phép bạn thay đổi màu chữ.

 ToolTip: cho phép bạn thiết lập title cho label. Ví dụ 2:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="label_mau.aspx.cs" Inherits="label_mau" %> <!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 id="Head1" runat="server">

<style type="text/css"> div

{ padding: 10px; } .labelStyle { color: red; background-color: yellow; border: Solid 2px Red; }

</style> <title></title> </head>

<body>

<form id="form1" runat="server"> <div>

<asp:Label id="lblFirst" Text="First Label" ForeColor="Red" BackColor="Yellow" BorderStyle="Solid" BorderWidth="2" BorderColor="Black" Runat="server" > </asp:Label><br /> <br /> <asp:Label id="lblSecond" Text="Second Label" CssClass="labelStyle" Runat="server"> </asp:Label> </div> </form> </body> </html> Ví dụ 3:

lblA.Text = "Đây là chuỗi văn bản thường";

lblB.Text = "<B>Còn đây là chuỗi văn bản được in đậm</B>";

2.2 Text box:

TextBox là điều khiển được dùng để nhập và hiển thị dữ liệu. TextBox thường được sử dụng nhiều với các ứng dụng trên windows form.

định

ode: Qui định chức năng của Textbox, có các giá trị sau: o SingleLine: Hiển thị và nhập liệu 1 dòng văn bản

o MultiLine: Hiển thị và nhập liệu nhiều dòng văn bản

o Password: Hiển thị dấu * thay cho các ký tự có trong Textbox.

ường hợp thuộc tính TextMode = MultiLine, thuộc tính Rows sẽ qui số dịng văn bản được hiển thị.

định số ký tự tối đa được nhập vào cho TextBox

định việc hiển thị của văn bản có được phép tự động xuống dịng khi kích thước ngang của của điều khiển khơng đủ để hiển thị dòng nội dung văn bản. Giá trị mặc định của thuộc tính này là True - tự động xuống dịng.

Ví dụ:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="textbox.aspx.cs" Inherits="textbox" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server">

<title>Sử dụng TextBox</title> </head>

<body>

<form id="form1" runat="server"> <div>

<asp:TextBox id="txtUserName"

TextMode="SingleLine"

Runat="server" Text=" nhập liệu 1" /> <br /><br />

<asp:TextBox id="txtPassword"

TextMode="Password"

Runat="server" Height="39px" Width="177px"/> <br /><br />

<asp:TextBox id="txtComments"

TextMode="MultiLine"

</div> </form> </body> </html> 2.3 Image

Điều khiển này được dùng để hiển thị hình ảnh lên trang Web. Các thuộc tính:

ImageURL: Đường dẫn đến tập tin hình ảnh cần hiển thị.

ăn bản sẽ hiển thị khi tập tin được thiết lập trong thuộc tính ImageURL khơng tồn tại.

o NotSet o Left o Middle o TextTop o Right Ví dụ: ăn bản.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="image.aspx.cs" Inherits="image" %>

<!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>Untitled Page</title> </head> <body>

<form id="form1" runat="server"> <div>

<asp:Image ID="Image2" runat="server" AlternateText="hình đẹp2" /> <br /><br>

<asp:Image ID="Image1" runat="server" Height="179px"

ImageUrl="~/1.png" Width="244px" ImageAlign="Left" ToolTip="hìnhđẹp 1" /><br />

</div> </form>

</body> </html>

2.4 Button, ImageButton, LinkButton

điều khiển Button, ImageButton, LinkButton mặc định đều là các nút Submit Button, mỗi khi được nhấn vào sẽ PostBack về Server.

điều khiển này, chúng ta gọi tên chung cho các điều khiển này là Command Button.

Các thuộc tính chung của Button, ImageButton, LinkButton

Thuộc tính Ý nghĩa

Text Chuỗi văn bản hiển thị trên điều khiển.

CommandName Tên lệnh. Được sử dụng trong sự kiện Command. điều khiển ImageButton cịn có các thuộc tính ImageURL, ImageAlign và AlternateText như điều khiển Image.

Ví dụ: Tạo Website Tinhtoan gồm các điều khiển: Label, Textbox, Button

protected voidbttinhtien_Click(objectsender,EventArgse) {

intsoluong =int.Parse(txtsoluong.Text); intdongia = int.Parse(txtdongia.Text); intthanhtien = soluong * dongia;

txtthanhtien.Text = thanhtien.ToString(); }

2.5 HyperLink

Điều khiển này được sử dụng để tạo ra các liên kết siêu văn bản. Các thuộc tính:

ImageURL: Qui định hình hiển thị trên điều khiển.

ăn bản sẽ được hiển thị trên điều khiển. Trong trường hợp cả 2 thuộc tính ImageURL và Text được thiết lập, thuộc tính ImageURL được ưu tiên, thuộc tính Text sẽ được hiển thị như Tooltip.

h

NavigateUrl: Đường dẫn cần liên kết đến.

Target: Xác định cửa sổ sẽ hiển thị cho mối liên kết o _blank: Hiển thị trang liên kết ở một cửa sổ mới.

o _self: Hiển thị trang liên kết tại chính cửa sổ chứa liên kết đó. o _parent: Hiển thị trang liên kết ở frame cha.

Một phần của tài liệu Giáo trình Thiết kế website (Nghề: Thiết kế đồ hoạ - Cao đẳng) - Trường Cao đẳng nghề Đồng Tháp (Trang 31 - 37)